Обработка больших точек набора данных в листовке и узле

Question

Я работаю с угловыми js и листовкой js на стороне клиента и узлом js в качестве сервера.

Я использую https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport для добавления и удаления слоев, которые содержат большое количество точек данных.

У меня есть все точки данных в mysql, я выбираю точки данных и отправляю их на клиентскую сторону, затем на уровне клиента я использую цикл, чтобы добавить их в слой. Он отлично работает для небольшого набора данных, теперь мой набор данных превышает 50K.

При таком подходе мой веб-браузер падает.

Мне нужно решение или подход, чтобы справиться с этой ситуацией.

Мой текущий массив данных выглядит так,

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

У меня есть массив объектов 50K. Я попробовал несколько подходов, таких как,

1. Обработка этих данных на стороне сервера.
2. Создание объекта geoJson (я не уверен, как это сделать.)

Может ли кто-нибудь дать мне подход или решение, я застрял на этом в последние четыре дня.

Я получаю два массива один из 50К, а другой из 20К. Я сначала добавляю массив 50 К (ниже мой код)

 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()?
• Вы действительно должны удалить свои маркеры 50 КБ и добавить 20 КБ назад и вперед в кластер маркеров? Будет ли достаточно удаления / добавления непосредственно на карту (в виде 2 отдельных групп кластеров маркеров)?