如何在地图循环 Leaflet JS 上复制标记位置

Question

我正在使用 Leaflet JS 构建自定义地图（带有自定义图块），它从东到西循环。我添加了几层标记和多边形（以指示地图中的路线）并且每个标记中都有弹出日期。我想复制 marker/polygon 图层在原始图层左右两侧的克隆地图循环中看似相同的位置。

  var mapMinZoom = 2;
  var mapMaxZoom = 6;

  var tiles = L.tileLayer('../bigger_map/{z}/{x}/{y}.png', {
    unloadInvisibleTiles : false,
    reuseTiles : true,
    updateWhenIdle : false,
    continousWorld : true,
    noWrap: false          
  });

  var marker = L.marker([-110.25, 120.6875]).bindPopup("<iframe src='http://player.vimeo.com/video/114950712'>Vimeo</iframe>"),
      markerSecond = L.marker([ -85.71875, 111.8125]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>"),
      markerThird = L.marker([ -71, 100]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>"),
      markerFourth = L.marker([ -62.75, 82.75]).bindPopup("<iframe src='http://player.vimeo.com/video/114950712'>Vimeo</iframe>"),
      markerFifth = L.marker([ -52.5, 48]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>"),
      markerSixth = L.marker([ -75.75, 57]).bindPopup("<a href='#vid' class='fancybox-media'>  click me </a>");

  var polygon = L.polygon([ [-110.25, 120.6875], [ -85.71875, 111.8125] ]),
      polygonSecond = L.polyline([ [-85.71875, 111.8125], [ -71, 100] ]), 
      polygonThird = L.polyline([[ -71, 100], [ -62.75, 82.75] ]),
      polygonFourth = L.polyline([[ -62.75, 82.75], [ -52.5, 48] ]),
      polygonFifth = L.polyline([ [ -52.5, 48],  [-75.75, 57] ]);   

  var americaTour = L.layerGroup([marker, markerSecond, markerThird, markerFourth, markerFifth, markerSixth]); 
  var americaPolys = L.layerGroup([ polygon, polygonSecond, polygonThird, polygonThird, polygonFourth, polygonFifth]);   

  var map = L.map('map', {
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    layers: [tiles, americaTour, americaPolys],
    //inertia options
    //where the map builds momentum while dragging and continues moving in the same direction for some time.
    inertiaDecelartion : 3000,
    inertiaMaxSpeed    : 1500,
    inertiaThershold   : 32,
    crs: L.CRS.Simple
  });

  var mapBounds = new L.LatLngBounds(
      map.unproject([0, 14295], mapMaxZoom),
      map.unproject([15816, 0], mapMaxZoom));

  map.fitBounds(mapBounds);

 map.panTo(new L.LatLng(-110.25, 120.6875));
}

如有任何帮助，我们将不胜感激。已尝试以各种方式 google 实现此功能，none 的 Leaflet 示例实际上具有此功能。

Answer 1

在您的地图选项中使用 'worldCopyJump': true。

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.

http://leafletjs.com/reference.html#map-worldcopyjump

Plunker 上的工作示例：http://plnkr.co/edit/mWKc4M?p=preview

如何在地图循环 Leaflet JS 上复制标记位置

How to replicate marker position on map loop Leaflet JS

javascript

maps

markers

leaflet