Карта AmCharts.Показать данные после загрузки экрана - PullRequest
Новая
       37

Карта AmCharts.Показать данные после загрузки экрана

0 голосов
/ 11 декабря 2018

У меня в приложении есть карта amCharts (версия 3) с большим количеством данных (булавок).Я хочу, чтобы он загружал данные без замораживания страницы.Каким образом я могу реализовать это.Я пробовал proccessTimeout, setInterval, setTimeout.Ничего не помогает.

1 Ответ

0 голосов
/ 11 декабря 2018

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/

...