[英]AmCharts map. Show data after loading screen
我的應用程序中有一些帶有大量數據(引腳)的amCharts(版本3)地圖。 我希望它加載數據而不凍結頁面。 我可以通過哪種方式實現這一點。 我正在嘗試proccessTimeout,setInterval,setTimeout。 沒有任何幫助。
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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.