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° 经度创建每个标记的副本。