6

私は現在、Javascript を使用して顧客データのインタラクティブ マップを構築する最初の実際の外出に取り組んでいます。

これまでのところ、基本は機能していますが、マーカーで約 500 ポイ、円マーカーで約 10,000 を超えると、パフォーマンスが低下し始めます。それとも、json データの mongo のような適切な DB に移動するか、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",

     }
 }
4

1 に答える 1

7

クライアントのブラウザで大量のポイントをレンダリングするのに役立つLeaflet プラグインがいくつかあります。

最も簡単な方法は、 Marker Clustererなどのマーカーをクラスター化するプラグインを使用することです。Clusterer は、クライアント コンピューターが 10,000 ポイントを描画する必要がなく、10 ～ 40 を描画するだけであることを意味するため、クライアント側でのレンダリングに非常に役立ちます。

ヒートマップを実行することもできます。そのための 2 つのプラグインがあり、どちらも HTML5 Canvas に基づいています。

于 2013-09-29T16:47:08.487 に答える