amCharts4数据变化不触发地图重绘

Question

我正在使用 amcharts4 作为流星项目的一部分。目标是显示地图并在地图上显示地图标记。每次数据更改时，地图标记都必须自行更新并指向新位置。

我尝试重用已经 available demo

我添加的唯一额外内容是将一组不同的数据重新分配给 imageSeries，以便更新地图上的标记。

我有一个 jsfiddle 来演示发生了什么。 setTimeout 函数用于模拟 5 秒后的数据更改。

  setTimeout(function(){
        $('.map-marker').remove()
        imageSeries.data = [{
           "zoomLevel": 5,
           "scale": 0.5,
           "title": "Brussels",
           "latitude": 50.8371,
           "longitude": 4.3676
         }];
        imageSeries.validateData();
    }, 5000)

5 秒后确实发生了数据更改。但是在您手动平移地图或放大/缩小地图之前，新点不会显示在地图上。

如何解决这个问题？

Answer 1

AmCharts 在 redraw/update 之后更新地图。问题是您使用的是 自定义 HTML 标记 而不是像 this demo 中那样仅包含图像的本机功能。由于您使用的是自定义设置，因此需要一个额外的步骤（顺便说一句，这是为 v3 编写的演示的一个端口，它也没有本机 HTML 标记）。

在演示中，updateCustomMarkers首先负责将标记放置在地图上。请注意，演示通过将此方法附加到地图实例的 mappositionchanged 事件来设置自定义标记，由于创建时发生的 zoom/viewport 定位，该事件也恰好在地图初始化期间被调用。这也是为什么你手动放大后只能看到标记的原因。你的数据更新超时不会调用updateCustomMarkers，所以除非你之后手动调用该方法，否则不会绘制自定义标记；请注意，您也不需要在替换整个数组时调用 invalidateData。

setTimeout(function() {
  $('.map-marker').remove()
  imageSeries.data = [{
    "zoomLevel": 5,
    "scale": 0.5,
    "title": "Brussels",
    "latitude": 50.8371,
    "longitude": 4.3676
  }];
  updateCustomMarkers();
}, 5000)

请注意，使用原生图像时不需要此额外步骤，因为地图会自动更新该场景中的标记。

amCharts4数据变化不触发地图重绘

amCharts4 data change does not trigger map redraw

javascript

amcharts

amcharts4