1

我在客户端使用angular js和leaflet js，在服务器上使用node js。

我正在使用https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport添加和删除包含大量数据点的图层。

我在 mysql 中有所有数据点，我获取数据点并将它们发送到客户端，然后在客户端级别我使用循环将它们添加到一个层中。它适用于小型数据集，现在我的数据集超过 50K。

使用这种当前方法，我的网络浏览器正在崩溃。

我需要解决方案或方法来处理这种情况。

我当前的数据集数组如下所示，

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

我有 50K 个对象的数组。我尝试了一些方法，例如，

  1. 在服务器端处理这些数据。
  2. 生成 geoJson 对象（我不知道该怎么做。）

任何人都可以给我一个方法或解决方案，我从过去四天开始就一直坚持这一点。

我得到两个数组，一个是 50K，另一个是 20K。我首先添加 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()，而不是一个一个使用addLayer()？
  • 你真的需要删除你的 50k 标记并将 20k 其他标记来回添加到标记集群中吗？直接删除/添加到地图（作为2个单独的标记集群组）就足够了吗？
于 2016-07-22T07:06:01.447 回答