amcharts4动态位置标记

Question

https://www.amcharts.com/demos/custom-html-elements-map-markers/

当我点击按钮时，我需要添加一个位置标记。我尝试了imageSeries.data.push，addData，init和其他方法，但当我移动图表(mappositionchanged)时，会触发位置更新。我需要让它自动工作，而不是移动或缩放图表。

我使用的是amcharts版本4。

function test() {
    imageSeries.addData({
        "zoomLevel": 5,
        "scale": 0.5,
        "title": "Pretoria",
        "latitude": -25.7463,
        "longitude": 28.1876
    });
    alert(imageSeries.data);
}

<button onClick="test();">click</button>

Answer 1

我无法复制这种行为，在这种情况下，通过addData method将数据动态添加到MapImageSeries需要刷新图表(值得注意的是，用户posted the same issue to our GitHub已经解决了这个问题)。imageSeries.addData(...)应该可以很好地工作。

设置代码：

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set map definition
chart.geodata = am4geodata_worldLow;

// Create map polygon series
var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata = true;

// Create image series
var imageSeries = chart.series.push(new am4maps.MapImageSeries());

// Create a circle image in image series template so it gets replicated to all new images
var imageSeriesTemplate = imageSeries.mapImages.template;
var circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color("#B27799");
circle.stroke = am4core.color("#FFFFFF");
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = "{title}";

// Set property fields
imageSeriesTemplate.propertyFields.latitude = "latitude";
imageSeriesTemplate.propertyFields.longitude = "longitude";

测试代码(addPlace方法)：

// Add data for the three cities

var data = [{
  "latitude": 48.856614,
  "longitude": 2.352222,
  "title": "Paris",
  zoomLevel: 1
}, {
  "latitude": 40.712775,
  "longitude": -74.005973,
  "title": "New York",
  zoomLevel: 2
}, {
  "latitude": 49.282729,
  "longitude": -123.120738,
  "title": "Vancouver",
  zoomLevel: 4
}];

const dataIterator = data[Symbol.iterator]();

function addPlace() {
  var item = dataIterator.next();
  if ( !item.done) {
    imageSeries.addData(item.value);
  }
}

下面是一个快速演示：

https://codepen.io/team/amcharts/pen/c5a5803d81b9517a8fd37d4e2c6541ed

“添加标记”按钮每次都会添加一个标记(最多3次，因为数组中只有3个项目)，而不必刷新图表(通过invalidate或其他方式)。