Данные Leaflet.js и JSON: оптимизация и производительность

Question

В настоящее время я работаю над своей первой реальной работой с использованием Javascript для создания интерактивной карты данных наших клиентов.

До сих пор у меня есть основы, но производительность начинает падать, когда я начинаю подниматься примерно на 500 пои с маркерами или 10 000 с помощью маркеров круга .... если кто-нибудь может предложить некоторые советы о том, как оптимизировать то, что я «Я уже получил или, может быть, мне лучше всего перейти к надлежащей БД, например, манго для данных json или, возможно, на стороне сервера работы с Node Js?

Любые советы были бы оценены :)

var apiKey = 'BC9A493B41014CAABB98F0471D759707', 
      styleID = '108219'; 
    // styleID = '997'; 


    // var map = L.map('map').setView([54.550, -4.433], 7); 

     var southWest = new L.LatLng(61.029031, 4.746094), 
      northEast = new L.LatLng(48.786962 ,-13.183594), 
      bounds  = new L.LatLngBounds(southWest, northEast); 

     var mapcenter  = new L.LatLng(53.457393,-2.900391); 
     var map   = new L.Map('map', 
           { 
            center: mapcenter, 
            zoom: 7, 
            // maxBounds: bounds, 
            zoomControl: false 
           }); 

     var cloudmadeUrl = generateTileURL(apiKey, styleID), 
      attribution = 'Map data © OpenStreetMap contributors.', 
      tileLayer = new L.TileLayer(
           cloudmadeUrl, 
           { 
            maxZoom: 18, 
            attribution: attribution, 
           }); 

      tileLayer.addTo(map); 

     var zoomControl  = new L.Control.Zoom({ position: 'topleft'}); 
      zoomControl.addTo(map); 
     var scaleControl = new L.Control.Scale({ position: 'bottomleft' }); 
      scaleControl.addTo(map); 




     geojsonLayer = L.geoJson(geojson, { 
      pointToLayer: function(feature, latlng) { 
      return new L.CircleMarker(latlng, {fillColor: feature.properties.MarkerColour, fillOpacity: 0.5, stroke: false, radius: 6}); 
      // return new L.Marker(latlng, {icon: L.AwesomeMarkers.icon({icon: feature.properties.MarkerIcon, color: feature.properties.MarkerColour, iconColor: 'white'}) }); 
      }, 
     onEachFeature: function (feature, layer) { 
      layer.bindPopup('<strong><b>Customer Data</b></strong><br />' + '<b>Result : </b>' + feature.properties.Result + '<br />' + '<b>Postcode : </b>' + feature.properties.Postcode + '<br />'); 
      } 
     }); 

      console.log('starting: ' + window.performance.now()); 

     map.addLayer(geojsonLayer); 

      console.log('ending: ' + window.performance.now()); 




    function generateTileURL(apiKey, styleID) { 
     return 'http://{s}.tile.cloudmade.com/' + apiKey + '/' + styleID + '/256/{z}/{x}/{y}.png'; 
    } 

и некоторые примерные данные:

{ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -0.213467, 
      51.494815 
     ] 
    }, 
    "properties": { 
     "DateTime": "1372719435.39", 
     "Result": "Cable Serviceable", 
     "MarkerIcon": "ok-sign", 
     "MarkerColour": "green", 
     "Postcode": "W14 8UD"  
    } 
}, 
{ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -0.389445, 
      51.512121 
     ] 
    }, 
    "properties": { 
     "DateTime": "1372719402.083", 
     "Result": "Refer for National Serviceability", 
     "MarkerIcon": "minus-sign", 
     "MarkerColour": "red", 
     "Postcode": "UB1 1NJ", 

    } 
}, 
{ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -0.411291, 
      51.508012 
     ] 
    }, 
     "properties": { 
     "DateTime": "1372719375.725", 
     "Result": "Cable Serviceable", 
     "MarkerIcon": "ok-sign", 
     "MarkerColour": "green", 
     "Postcode": "UB3 3JJ" 
    } 
}, 
{ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 
      -2.11054, 
      53.500752 
     ] 
    }, 
    "properties": { 
     "DateTime": "1372719299.088", 
     "Result": "Cable Serviceable", 
     "MarkerIcon": "ok-sign", 
     "MarkerColour": "green", 
     "Postcode": "OL7 9LR", 

    } 
} 

Answer 1

Есть несколько Leaflet plugins, которые помогают справиться с оказанием большое количество очков в браузере клиента.

Самый простой способ - использовать плагин, который кластеризует маркеры, такие как Marker Clusterer. Clusterer очень сильно помогает рендерингу на стороне клиента, так как клиентский компьютер не должен набирать 10 000 точек, он просто рисует 10-40.

Вы также могли бы сделать Heatmap - Есть два плагина для этого, как основанных на HTML5 Canvas:

• HeatCanvas
• Heatmap.js