在传单和节点中处理大数据集点

Question

我在客户端使用 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 个对象的数组。我尝试了一些方法，例如

在服务器端处理此数据。
正在生成 geoJson 对象（我不知道该怎么做。）

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

我得到两个数组，一个 50K，另一个 20K。我先添加50K数组，（下面是我的代码）

 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);

如果您有任何建议，请告诉我。感谢您的帮助。

Answer 1

没有看到你的代码，很难说你可以在客户端改进什么。

当然，管理更多数据服务器端会有所帮助，但您可能需要大量工作。

至于 GeoJSON，我看不出有什么帮助。

需要检查的几件事：

您是否使用 addLayers() 一次添加所有标记，而不是使用 addLayer() 一个一个添加？
您真的需要删除您的 50k 标记并将其他 20k 来回添加到标记集群中吗？直接删除/添加到地图（作为 2 个单独的标记集群组）是否足够？

在传单和节点中处理大数据集点

Handling Large Data Set Points in Leaflet and Node

node.js

angularjs

leaflet

ionic-framework

leaflet.markercluster