Загрузка MarkerClusters, в то время как ограничивающие рамки изменяют положение и отображают - PullRequest
Новая
       32

Загрузка MarkerClusters, в то время как ограничивающие рамки изменяют положение и отображают

0 голосов
/ 30 января 2020

я использую буклет markerClusters и javascript, чтобы разработать карту, где я хочу создавать кластеры в соответствии с границами экрана. У меня есть служба, которая возвращает мне список точек в зависимости от границ экрана со свойствами lat и lng.

Объявление карты переменных и кластера. 

/* Single marker cluster layer to hold all clusters */

var markers = L.markerClusterGroup({
  spiderLegPolylineOptions: {weight: 0},
  clockHelpingCircleOptions: {weight: .7, opacity: 1, color: 'black', fillOpacity: 0, dashArray: '10 5'},

  elementsPlacementStrategy: 'spiral',
  helpingCircles: true,

  spiderfyDistanceSurplus: 25,
  spiderfyDistanceMultiplier: 1,

  elementsMultiplier: 1.4,
  firstCircleElements: 8

});

for (var i = 0; i < 10000; i++) {
  var circle = L.circleMarker([Math.random() * 30, Math.random() * 30], {fillOpacity: 0.7, radius: 8, fillColor: 'red',
  color: 'black'});
  markers.addLayer(circle);
}


var sudOest = L.latLng(41.512742, 2.410589);
var nordEst = L.latLng(41.590395, 2.489678);


map = L.map("map", {
    zoom: 14,
    crs: crs25831,
    layers: [baseLayers[Object.keys(baseLayers)[0]]],
    zoomControl: false,
    minZoom: 0,
    maxZoom: 6,
    maxBounds: L.latLngBounds(sudOest, nordEst)
}).setView([40.705008, -73.995581],6);


map.addLayer(markers);

Функция, вызываемая при перемещении, при загрузке все точки координат в соответствии с ограничительной рамкой 

function loadPoints(zoomActual){
    for (var prop in capesDinamiques) {  
      if(map.getZoom()>3){  
        if(capesDinamiques[prop][0]){

        removeAreaLayer(prop); //clean the other markercluster

        baseLayers[prop] =afegirCapaServeiWeb(capesDinamiques[prop][1]
        +zoomActual._southWest.lng+'&x2='
        +zoomActual._northEast.lng+'&y1='
        +zoomActual._southWest.lat+'&y2='
        +zoomActual._northEast.lat+''); //service that return a list of points

        addAreaLayer(prop);//crating the new marker clusters according to the bounding box

            }   
        }
    }
}

    map.on('moveend', function() {
        var zoomActual = map.getBounds();
        cargarMegaCapes(zoomActual);

    });

Пример службы (JSON): 

e {_layers: {…}, _initHooksCalled: true}
_layers:
10054: e
options: {icon: e, title: "", alt: "", clickable: true, draggable: false, …}
_latlng: o.LatLng {lat: 41.5437192894942, lng: 2.44910020452627}
_initHooksCalled: true
properties: undefined
feature: {properties: {…}}
_leaflet_id: 10054
_leaflet_events: {click_idx: {…}, click_idx_len: 1, dblclick_idx: {…}, dblclick_idx_len: 1, mouseover_idx: {…}, …}
__proto__: o.Class
10056: e
options: {icon: e, title: "", alt: "", clickable: true, draggable: false, …}
_latlng: o.LatLng {lat: 41.541313548773, lng: 2.44995964811972}
_initHooksCalled: true
properties: undefined
feature: {properties: {…}}
_leaflet_id: 10056
_leaflet_events: {click_idx: {…}, click_idx_len: 1, dblclick_idx: {…}, dblclick_idx_len: 1, mouseover_idx: {…}, …}
__proto__: o.Class

Методы, которые я использую для добавления и удаления слоев и кластеров: 

function addAreaLayer(prop) {
        console.log("AFEGINT CLUSTERS "+ prop);

        active_area_list[prop]=baseLayers[prop];
        markers.addLayer(baseLayers[prop]);

        map.addLayer(markers);
        refreshActive();

};

function removeAreaLayer(prop) {
    if(map.hasLayer(baseLayers[prop])||active_area_list.hasOwnProperty(prop)){
        console.log("ELIMINANT CLUSTERS");

        delete active_area_list[prop];
        markers.removeLayer(baseLayers[prop]);

        map.removeLayer(markers);
        refreshActive();
    }
};

Маркеры не отображаются на карте, но если я активирую слой на карте, загруженные кластеры отображаются на карте, но не динамически при изменении границ. Можете ли вы помочь мне с примером или, как вы думаете, может быть решением?

Большое спасибо

...