2

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>
4

1 回答 1

1

我无法复制这种MapImageSeries通过其addData方法将数据动态添加到 a需要刷新图表的行为（对于它的价值，用户将相同的问题发布到我们的 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或其他方式）。

于 2019-03-13T19:25:38.283 回答