为什么我的 Markercluster 在立体投影上消失了?

Why does my Markercluster vanish on a stereographic projection?

我正在极地地区使用 Leaflet 和自定义立体投影。

在这个投影中,我处理了几十个需要聚类的标记位置。因此我正在使用 Leaflet.markercluster 插件。

我目前的问题是,根据缩放,单个簇的拖动位置,它们会消失并再次出现。

我制作了一个 jsfiddle 来重现错误:

https://jsfiddle.net/mzg9j327/

 <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>

<div id="map">
</div>
#map {
  height: 600px
}
var customCRS = new L.Proj.CRS('EPSG:3995',
  "+proj=stere +lat_0=90 +lat_ts=71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs", 
  {
    origin: [-12403632.820,12403632.820], // correct origin needs to be set
    resolutions: [22600, 11300, 5650, 2825, 1412.5, 706.25, 353.125, 176.5625, 88.28125, 44.140625], // 10 example zoom level resolutions
    tileSize: 256,
    bounds: L.bounds([-1403632.820, 17760.815,22417841.080,-13082466.960]) // max bounds also need to be set
  });

var wmsBKLayer = L.tileLayer.wms('http://eumetview.eumetsat.int/geoserv/wms', {
  layers: 'bkg-raster:bkg-raster',
  format: 'image/png',
  transparent: true
});


var map = new L.map('map', {
  center: L.latLng(70, -10),
  zoom: 0,
  tileSize: 256,
  continuousWorld: true,
  worldCopyJump: false,
  crs: customCRS,
  layers: [wmsBKLayer]
});


var baseMaps = {
  "background": wmsBKLayer
};

L.control.layers(baseMaps).addTo(map);
var marker1 = L.marker([-70, 0]);
var marker2 = L.marker([0, 0]);
var marker3 = L.marker([70, 0]);

var markers = L.markerClusterGroup();

markers.addLayer(marker1);
markers.addLayer(marker2);
markers.addLayer(marker3);

map.addLayer(markers);

这是由于极投影和 Leaflet.markercluster 选项 removeOutsideVisibleBounds:

Clusters and markers too far from the viewport are removed from the map for performance.

极坐标投影使得地图视口边界的纬度可能比其中心的纬度小(通常当极点靠近中心,边缘位于较低的纬度时)。在这种情况下,Leaflet.markercluster 读取视口边界,并且(在这种情况下不正确)得出用户在较低纬度显示世界的结论,并隐藏远离这些边界的集群和标记。

一个可能的解决方案是简单地禁用此行为,希望您没有太多的标记,以至于您仍然会遇到性能不佳的情况:

L.markerClusterGroup({
  removeOutsideVisibleBounds: false // Disable performance optimisation
});

更新现场演示:https://jsfiddle.net/cefnt946/