amCharts: повторное центрирование карты после источника данных JSON, несмотря на предыдущий chart.homeGeoPoint - PullRequest
Новая
       5

amCharts: повторное центрирование карты после источника данных JSON, несмотря на предыдущий chart.homeGeoPoint

0 голосов
/ 04 января 2019

Я отображаю ряд точек с помощью 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?

1 Ответ

0 голосов
/ 04 января 2019

Я создал проблему на GitHub в связи с тем, почему карта перемещается при загрузке MapImageSeries 'dataSource и как с этим лучше работать.(Если у вас есть учетная запись GitHub, пожалуйста, подпишитесь на эту проблему.)

Тем временем, предполагая, что в первый раз ваш dataSource получит данные о том, что пользователь не переместил карту, и мы хотимподдерживая homeGeoPoint в качестве текущего центра, мы можем связать события для достижения этого.

Когда dataSource равен "done" с его данными, это не обязательно означает, что что-то имеетбыло сделано на фактическом уровне карты.Данные по-прежнему должны распространяться на MapImageSeries, который по-прежнему должен создавать MapImages для каждого элемента данных, проверять / анализировать данные там, и по какой-либо причине положение карты смещается.Итак, в первый раз, когда это происходит (используя events.once вместо events.on), мы затем прослушиваем MapImageSeries '"datavalidated" событие также только один раз (потому что "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.Дайте мне знать, если это все еще имеет место, когда-то реализовано в вашем приложении.

...