javascript - Leaflet 可以在缩放时跳转到新的世界副本，而不仅仅是平移吗？

Question

如果我平移 map ，标记将出现在 map 上，但如果我缩小然后放大没有标记的 map 副本，它们将不会出现，直到我再次平移。
是否可以更改此设置，以便放大和缩小会导致标记在 map 上重新计算？

L.map('map', {
  'center': [0, 0],
  'zoom': 0,
  'worldCopyJump': true,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data © OpenStreetMap contributors'
    }),
    L.marker([0, -135]),
    L.marker([0, -90]),
    L.marker([0, -45]),
    L.marker([0, 0]),
    L.marker([0, 45]),
    L.marker([0, 90]),
    L.marker([0, 135])
  ]
});

body {
    margin: 0;
}
html, body, #map {
    height: 100%
}

<link href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<div id="map"></div>

http://embed.plnkr.co/mWKc4M/

Answer 1

The markers will appear on the map if I pan the map

具体来说，这种行为仅在拖动 map 时发生(而不是通过任何其他方法平移 map 时，例如使用键盘快捷键)。这是因为，在内部， worldCopyJump功能是 defined inside the Drag handler at src/map/handler/Map.Drag.js :

// TODO refactor, move to CRS
// @option worldCopyJump: Boolean = false
// With this option enabled, the map tracks when you pan to another "copy"
// of the world and seamlessly jumps to the original one so that all overlays
// like markers and vector layers are still visible.
worldCopyJump: false,

(请注意，Leaflet 解释了 what map handlers are 及其工作原理)
As the code stands now , worldCopyJump功能仅影响拖动处理程序，并通过在每次 map 拖动处理程序即将更新时重置拖动偏移量(而不是 map 中心)来工作:

if (map.options.worldCopyJump) {
    this._draggable.on('predrag', this._onPreDragWrap, this);
    map.on('zoomend', this._onZoomEnd, this);

    map.whenReady(this._onZoomEnd, this);
}
/* snip */
_onPreDragWrap: function () {
    // TODO refactor to be able to adjust map pane position after zoom
    var worldWidth = this._worldWidth,
        halfWidth = Math.round(worldWidth / 2),
        dx = this._initialWorldOffset,
        x = this._draggable._newPos.x,
        newX1 = (x - halfWidth + dx) % worldWidth + halfWidth - dx,
        newX2 = (x + halfWidth + dx) % worldWidth - halfWidth - dx,
        newX = Math.abs(newX1 + dx) < Math.abs(newX2 + dx) ? newX1 : newX2;

    this._draggable._absPos = this._draggable._newPos.clone();
    this._draggable._newPos.x = newX;
},

那么该怎么办？一种选择是利用 wrapLatLng 在每个 zoomend 上重置 map 中心事件，例如:

map.on('zoomend', function(ev){
    map.panTo(map.wrapLatLng(map.getCenter()), {animate: false})
});

那应该只是工作。见 working demo .

作为替代方案，请考虑使用 https://gitlab.com/IvanSanchez/Leaflet.RepeatedMarkers ，这将每 360° 经度创建每个标记的副本。