AmCharts地图.加载屏幕后显示数据

Question

我的应用程序中有一些amCharts(版本3(映射，其中包含大量数据(pin(。我希望它在不冻结页面的情况下加载数据。我可以用什么方式来实现这一点。我正在尝试proccessTimeout、setInterval、setTimeout。没有什么帮助。

Answer 1

amMaps 3没有经过优化以处理大量数据。有几个变通方法可以在一定程度上帮助提高性能，但这不是100%的解决方案，如果数据量很大，可能会达到上限。

一种选择是创建一个多级向下搜索，以区域标记的形式显示较小的数据子集。当用户点击其中一个时，会显示底层数据点，例如：

"dataProvider": {
"map": "usa2Low",
"images": [ {
"svgPath": targetSVG,
"label": "San Diego", //Clicking on the San Diego marker 
"zoomLevel": 14,      //will reveal markers for Imperial Beach, El Cajon, etc
"scale": 1,
"title": "San Diego",
"latitude": 32.715738,
"longitude": -117.161084,
"images": [ {
"svgPath": targetSVG,
"scale": 0.7,
"title": "Imperial Beach",
"latitude": 32.586299,
"longitude": -117.110481
}, {
"svgPath": targetSVG,
"scale": 0.7,
"title": "El Cajon",
"latitude": 32.802417,
"longitude": -116.963539
}, {
"svgPath": targetSVG,
"scale": 0.7,
"title": "University City",
"latitude": 32.861268,
"longitude": -117.210045
}, {
"svgPath": targetSVG,
"scale": 0.7,
"title": "Poway",
"latitude": 32.969635,
"longitude": -117.036324
} ]
} ]

以下是一个示例：https://www.amcharts.com/docs/v3/tutorials/map-marker-drill-down/

另一种选择是使用groupId和zoomLevel仅在特定缩放级别上显示某些数据点，这可以最大限度地减少最初需要渲染的点的数量，直到用户寻找更多细节，类似于前面的示例，但不使用嵌套结构：

"dataProvider": {
"map": "worldLow",
"images": [ {
"groupId": "minZoom-2", //minZoom-2 group of images, visible at zoomLevel 5
"svgPath": targetSVG,
"zoomLevel": 5,
"scale": 0.5,
"title": "Vienna",
"latitude": 48.2092,
"longitude": 16.3728
}, 
// ... other images with group minZoom-2 omitted
// ...
{
"groupId": "minZoom-2.5", //minZoom-2.5 group, visible at 
"svgPath": targetSVG,
"zoomLevel": 5,
"scale": 0.5,
"title": "Pyinmana",
"latitude": 19.7378,
"longitude": 96.2083
}, 
// ... etc
// create a zoom listener which will check current zoom level and will toggle
// corresponding image groups accordingly
map.addListener( "rendered", function() {
revealMapImages();
map.addListener( "zoomCompleted", revealMapImages );
} );
function revealMapImages( event ) {
var zoomLevel = map.zoomLevel();
if ( zoomLevel < 2 ) {
map.hideGroup( "minZoom-2" );
map.hideGroup( "minZoom-2.5" );
} else if ( zoomLevel < 2.5 ) {
map.showGroup( "minZoom-2" );
map.hideGroup( "minZoom-2.5" );
} else {
map.showGroup( "minZoom-2" );
map.showGroup( "minZoom-2.5" );
}
}

以下是一个示例：https://www.amcharts.com/docs/v3/tutorials/show-groups-map-images-specific-zoom-level/