Question

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

  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));
}

非常感谢任何帮助。试图以各种方式谷歌这一点，并没有任何Leaflet示例实际上具有此功能。

Answer 1

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

启用此选项后，地图会跟踪您平移到另一个＆＃34;复制＆＃34;世界的并且无缝地跳转到原始世界，以便所有覆盖图如标记和矢量图层仍然可见。

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

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

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

1 个答案: