时间戳

首页 > 解决方案 > amCharts：尽管以前的 chart.homeGeoPoint，但在 JSON 数据源之后地图中心化

amcharts - amCharts：尽管以前的 chart.homeGeoPoint，但在 JSON 数据源之后地图中心化

问题描述

我正在用 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 数据后，我需要做些什么来确保地图始终以我想要的位置为中心？

标签： amcharts

解决方案

我在 GitHub 上创建了一个MapImageSeries关于为什么地图在'负载上重新定位dataSource以及如何更好地使用它的问题。（如果您有 GitHub 帐户，请订阅该问题。）

同时，假设您第一次dataSource获得用户没有移动地图的数据并且我们希望将其保持homeGeoPoint为当前中心，我们可以链接事件来实现这一点。

当dataSource它"done"带有数据时，这并不一定意味着在实际地图级别上已经做了任何事情。数据仍然需要传播到MapImageSeries，仍然需要创建MapImages每个数据项，在那里验证/解析数据，并且无论出于何种原因，地图位置都会发生变化。所以第一次发生（使用events.once而不是），然后我们也只events.on监听一次MapImageSeries'"datavalidated"事件"datavalidated"（因为在此之前会运行，例如，一旦你创建了MapImageSeries，如果没有提供数据或者它需要一些时间，它仍然会运行事件和"inited"事件，即我猜你可以说系列本身不会成功渲染）。

为了使我们使用的地图居中chart.goHome(0);，此方法将缩放到您的homeGeoPointand 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. 让我知道在您的应用程序中实施后是否仍然如此。

推荐阅读