1

クライアント側でangular jsとリーフレットjsを使用し、サーバーとしてノードjsを使用しています。

https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupportを使用して、多数のデータ ポイントを含むレイヤーを追加および削除しています。

mysql にすべてのデータ ポイントがあり、データ ポイントを取得してクライアント側に送信し、クライアント レベルでループを使用してそれらをレイヤーに追加します。小さなデータセットでは問題なく動作します。現在、私のデータセットは 50K を超えています。

この現在のアプローチでは、Web ブラウザーがクラッシュします。

この状況に対処するための解決策またはアプローチが必要です。

現在のデータセット配列は次のようになります。

var dataSetArray = [
   0:{
      latitude: 1.3023456,
      longitude: 103.830367
   },
]

50K オブジェクトの配列があります。私はいくつかのアプローチを試しました、

  1. サーバー側でこのデータを処理します。
  2. geoJson オブジェクトの生成 (方法がわかりません。)

誰かが私にアプローチや解決策を教えてもらえますか?私は過去4日間からこれにこだわっています.

50K の 1 つと 20K の 2 つの配列を取得します。最初に 50 K 配列を追加します (以下は私のコードです)。

 var map = L.map('map', {
  center: L.latLng(1.241244, 103.718401),
  zoom: 18,
  layers: [tiles],
  zoomControl: false,
});

var options = {
  showCoverageOnHover: false,
  animateAddingMarkers: true,
  disableClusteringAtZoom: 17,
  chunkedLoading: true,
  chunkProgress: updateProgressBar,
  maxClusterRadius: 100
};

var markers = L.markerClusterGroup(options);
var LeafIcon = L.Icon.extend({
  options: {
    iconSize: [35, 35],
    iconAnchor: [0, 0],
    popupAnchor: [10, 2]
  }
});

var greenIcon = new LeafIcon({
 iconUrl: 'img/marker.svg'
});

var dataMarkers50K = [], dataMarkers20K = [];

for (var i = 0; i < dataPoints50K.length; i++) {
   var a = dataPoints50K[i];
   var dataMarker = L.marker(new L.LatLng(a.latitude, a.longitude), {
     icon: greenIcon
   });
   dataMarkers50K.push(dataMarker);
}

for (var k = 0; k < dataPoints20K.length; k++) {
  var b = dataPoints20K[k];
  var contentString = '';

  if(b.content) contentString = b.content;

  var dataMarker_2 = L.marker(new L.LatLng(b.latitude, b.longitude), {
    icon: L.divIcon({
        className: 'label',
        html: b.content,
        iconSize: [45, 45],
        iconAnchor: [0, 0],
        popupAnchor: [15, 2]
      })
  });

  dataMarker_2.bindPopup(contentString);
  dataMarkers20K.push(dataMarker_2);
}

map.on('zoomend', function(e) {
  if(map.getZoom() > 16){
    markers.removeLayers(dataMarkers50K);
    markers.addLayers(dataMarkers20K);
  }else if(map.getZoom() <= 16){
    markers.removeLayers(dataMarkers20K);
    markers.addLayers(dataMarkers50K);
  }
});

markers.addLayers(dataMarkers50K);
map.addLayer(markers);

何か提案があれば教えてください。助けてくれてありがとう。

4

1 に答える 1

0

コードを見なければ、クライアント側ですでに何を改善できるかを判断するのは困難です。

確かに、より多くのデータサーバー側を管理することは役に立ちますが、おそらくかなりの量の作業が必要です.

GeoJSON に関しては、それがどのように役立つかわかりません。

いくつかの確認事項:

  • addLayers()を使用して 1 つずつではなく、 を使用してすべてのマーカーを一度に追加しますaddLayer()か?
  • 50k のマーカーを削除し、他の 20k のマーカーをマーカー クラスターに追加したり追加したりする必要は本当にありますか? (2 つの個別のマーカー クラスター グループとして) マップに直接削除/追加するだけで十分ですか?
于 2016-07-22T07:06:01.447 に答える