Mapbox-Marker verschwinden, wenn zu weit entfernt von der Kartenmitte

Question

Ich habe eine Mapbox Map mit Markern (ich benutze auch MarkerCluster). Ich erhalte diese HTML-Markierungen in JavaScript, um ihre Position zu bestimmen (aus dem Ansichtsfenster, nicht aus ihren Koordinaten), sodass ich einige Indikatoren für Markierungen hinzufügen kann, die sich nicht im Ansichtsfenster befinden. Aber ich merke, dass wenn ich zu weit von einem Marker entfernt bin (z. B. beim Zoomen oder Ziehen der Karte), die Marker einfach nicht im HTML erscheinen! Es scheint, dass es das normale Verhalten ist, weil ich das gleiche Ding sehen kann, das in den offiziellen Beispielen geschieht.

Also, hier ist die Frage: Gibt es eine Möglichkeit, dieses Verhalten zu verhindern und immer die Markierungen im HTML?

Hier wird der JavaScript ist: (ich benutze mapbox.js und leaflet.markercluster)

var places = { 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { 
      "description": ">Test 1" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-1.6313898, 47.2005156] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { 
      "description": "Test 2" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [2.3279346, 48.8960698] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { 
      "description": "Test 3" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [2.7391394, 48.7238554] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { 
      "description": "Test 4" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [55.4933757, -20.9034031] 
     } 
    }] 
}; 

L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlcmVvc3VwZXIiLCJhIjoiY2lyM2JnMDIwMDAxM2k0bWNndmUzeTFhbSJ9.UZ-XuPASxGVtYFSqdVyppg'; 

var map = L.mapbox.map('map', null, {minZoom: 3, maxZoom: 16, center: [46, 8], zoom: 5, scrollWheelZoom: false, maxBounds: [[-100.0,-100.0],[100.0,100.0]]}); 
L.mapbox.styleLayer('mapbox://styles/stereosuper/cir3bgtaz001wjcnntu6n2axw').addTo(map); 

var markers = L.mapbox.featureLayer(places); 
var icon = L.divIcon({ iconSize: [30, 30], popupAnchor: [0, -20] }); 
markers.eachLayer(function(l){ l.setIcon(icon); }); 

var clusterPlaces = new L.MarkerClusterGroup({ 
    iconCreateFunction: function(cluster){ 
     return new L.DivIcon({ iconSize: [30, 30], html: '<div class="marker-cluster"><span>'+cluster.getChildCount()+'</span></div>' }); 
    } 
}); 
clusterPlaces.addLayer(markers).addTo(map); 

map.on('moveend', function(e){ 
    var htmlMarkers = $('.leaflet-marker-icon'), 
     xCenter = $(window).width()/2, yCenter = $(window).height()/2; 

    if($('.map-indicator').length){ 
     $('.map-indicator').remove(); 
    } 

    htmlMarkers.each(function(i){ 
     var thisMarker = $(this), 
      thisCluster = thisMarker.find('span').length, 
      thisMarkerHtml = thisCluster ? thisMarker.find('span').html() : 1; 
     var top = thisMarker.offset().top, left = thisMarker.offset().left; 
     var indicator = '<button class="map-indicator map-indicator-'+i+'"><span>'+thisMarkerHtml+'</span></button>'; 
     var newLeft, newTop, angle, distance; 
     var mapHtml = $('#map'); 

     if(top + thisMarker.height() < 0){ 
      mapHtml.append(indicator) 
      if(left > xCenter){ 
       distance = (left-xCenter) * (yCenter/(yCenter-top)); 
       angle = Math.atan(distance/yCenter)*180/Math.PI; 
       newLeft = xCenter + distance; 
       if(newLeft > $(window).width() - 40) newLeft = $(window).width() - 40; 
      }else{ 
       distance = (xCenter-left) * (yCenter/(yCenter-top)); 
       angle = - Math.atan(distance/yCenter)*180/Math.PI; 
       newLeft = xCenter - distance; 
       if(newLeft < 40) newLeft = 40; 
      } 
      $('.map-indicator-'+i).css({'top': '10px', 'left': newLeft + 'px', 'bottom': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('top').removeClass('bottom', 'left', 'right'); 
     }else if(top > $(window).height()){ 
      mapHtml.append(indicator) 
      if(left > xCenter){ 
       distance = (left-xCenter) * (yCenter/(yCenter+(top-$(window).height()))); 
       angle = - Math.atan(distance/yCenter)*180/Math.PI; 
       newLeft = xCenter + distance; 
       if(newLeft > $(window).width() - 40) newLeft = $(window).width() - 40; 
      }else{ 
       distance = (xCenter-left) * (yCenter/(yCenter+(top-$(window).height()))); 
       angle = Math.atan(distance/yCenter)*180/Math.PI; 
       newLeft = xCenter - distance; 
       if(newLeft < 40) newLeft = 40; 
      } 
      $('.map-indicator-'+i).css({'bottom': '10px', 'left': newLeft + 'px', 'top': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('bottom').removeClass('top', 'left', 'right'); 
     }else if(left + thisMarker.width() < 0){ 
      mapHtml.append(indicator) 
      if(top < yCenter){ 
       distance = (yCenter-top) * (xCenter/(xCenter-left)); 
       angle = Math.atan(distance/xCenter)*180/Math.PI; 
       newTop = yCenter - distance; 
       if(newTop < 0) newTop = 0; 
      }else{ 
       distance = (top-yCenter) * (xCenter/(xCenter-left)); 
       angle = - Math.atan(distance/xCenter)*180/Math.PI; 
       newTop = yCenter + distance; 
       if(newTop > $(window).height()) newTop = $(window).height() - thisMarker.height(); 
      } 
      $('.map-indicator-'+i).css({'top': newTop, 'left': '10px', 'bottom': 'auto', 'right': 'auto', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('left').removeClass('bottom', 'top', 'right'); 
     }else if(left > $(window).width()){ 
      mapHtml.append(indicator) 
      if(top < yCenter){ 
       distance = (yCenter-top) * (xCenter/(xCenter+(left-$(window).width()))); 
       angle = - Math.atan(distance/xCenter)*180/Math.PI; 
       newTop = yCenter - distance; 
       if(newTop < 0) newTop = 0; 
      }else{ 
       distance = (top-yCenter) * (xCenter/(xCenter+(left-$(window).width()))); 
       angle = Math.atan(distance/xCenter)*180/Math.PI; 
       newTop = yCenter + distance; 
       if(newTop > $(window).height()) newTop = $(window).height() - thisMarker.height(); 
      } 
      $('.map-indicator-'+i).css({'top': newTop, 'left': 'auto', 'bottom': 'auto', 'right': '10px', '-webkit-transform': 'rotate('+angle+'deg)', 'transform': 'rotate('+angle+'deg)'}).addClass('right').removeClass('bottom', 'left', 'top'); 
     } 

     $('.map-indicator-'+i).on('click', function(e){ 
      var coordinates = map.layerPointToLatLng(thisMarker.context._leaflet_pos); 
      map.panTo(coordinates); 
     }); 
    }); 
}); 

Vielen Dank im Voraus

Answer 1

Sie absolut richtig erraten, entfernt Leaflet.markercluster Plugin von Standard-Markern und Clustern, die sind weit weg von Ihrem Aussichtshafen.

Sie können die Option removeOutsideVisibleBounds verwenden, wenn Sie Ihre Marker Cluster Group erstellen, um dieses Verhalten zu deaktivieren.

Beachten Sie, dass dies bei hohem Zoom die Leistung Ihres Browsers möglicherweise verlangsamen kann, da Sie viele Markierungen auf der Karte haben werden. Dies ist eines der Dinge, die Leaflet.markercluster zu vermeiden versucht.