amCharts：尽管先前有chart.homeGeoPoint，但在JSON数据源之后将地图重新​​居中

Question

我正在用amChart映射一系列点；从外部JSON来源加载数据后，地图重新居中，而不是停留在我之前用chart.homeGeoPoint设置的点上。

我相信我需要使用事件侦听器并在地图渲染点后设置homeGeoPoint ...但是我有点茫然；我发现的唯一事件来自dataSource.events，这些事件似乎与获取/解析JSON有关，而不是与呈现地图有关。

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

// Set map definition
chart.geodata = am4geodata_region_world_northAmericaLow;

// Set projection
chart.projection = new am4maps.projections.Miller();

// Initial Position / Zoom
chart.homeZoomLevel = 2.6;
chart.homeGeoPoint = {
    latitude: 39,
    longitude: -96.2456
};

// Series for World map
var worldSeries = chart.series.push(new am4maps.MapPolygonSeries());
worldSeries.useGeodata = true;

// Markers

// 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 = 5;
circle.fill = am4core.color("#116ad6");
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";
imageSeriesTemplate.propertyFields.url = "url";

// Load data        
imageSeries.dataSource.url = "/foo/map-points.php";
imageSeries.dataSource.parser = new am4core.JSONParser();
imageSeries.dataSource.parser.options.emptyAs = 0;

// Center after render
imageSeries.dataSource.events.on("done", function(ev) {
    // This doesn't work - perhaps it is firing too early?
    chart.homeGeoPoint = {
        latitude: 39,
        longitude: -96.2456
    };
});

根据请求，这是一个用于到期的foo.json文件。

[{"title":"ISP","url":"\/airport\/kisp\/","latitude":40.7952,"longitude":-73.1002},{"title":"AEX","url":"\/airport\/kaex\/","latitude":31.3274,"longitude":-92.5486}]

在加载和渲染JSON数据后，我需要做什么以确保地图保持在所需位置的中心？

Answer 1

关于地图为何重新放置在MapImageSeries'dataSource负载上，以及如何更好地使用它，我已经created an issue on GitHub了。 （如果您拥有GitHub帐户，请订阅该问题。）

同时，假设您的dataSource第一次获得用户尚未移动地图的数据，而我们想将homeGeoPoint保持为当前中心，则可以链接事件以实现那个。

当dataSource与"done"一起使用时，其数据不一定表示在实际地图级别上已完成任何操作。数据仍然需要传播到MapImageSeries，仍然需要为每个数据项创建MapImages，在那里对数据进行验证/解析，并且无论出于何种原因，地图位置都会移动。因此，第一次发生（使用events.once而不是events.on），然后我们也只听了一次MapImageSeries'"datavalidated" event（因为"datavalidated"已经在此之前运行，例如，一旦您创建MapImageSeries，如果没有提供数据或花费了一些时间，它将仍然运行事件和"inited"事件，即我想您可以说系列本身将不会成功呈现任何内容。

为使地图居中，我们使用chart.goHome(0);，此方法将缩放到您的homeGeoPoint和homeZoomLevel，0用于动画持续时间，即只是做工作，不要动画。

所以所有这些看起来像这样：

// Center after render
imageSeries.dataSource.events.once("done", function(ev) {    
    imageSeries.events.once("datavalidated", function() {
      chart.goHome(0);
    });
});

这是一个演示：

https://codepen.io/team/amcharts/pen/239bfdc8689c65468df32d71b29759b8

即使MapImageSeries加载后地图确实会重新定位，但它会根据上述代码重新居中，但实际上我再也没有看到地图发生偏移。因此在我看来，以上代码正在完成维护homeGeoPoint的工作。让我知道，一旦在您的应用程序中实现，情况是否仍然如此。