How to replicate marker position on map loop Leafl

问题:

I'm using Leaflet JS to build a custom map (with custom tiles), it loops East to West. I've added a couple layers of markers and polygons (to indicate a route in the map) and each marker has pop up date within it. I want to duplicate the marker/polygon layers in the seemingly same position on the cloned map loops left and right of the original layer.

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

Any help would be greatly appreciated. Have tried to google this in various ways and none of the Leaflet examples actually have this functionality.

回答1:

Use 'worldCopyJump': true in your map options.

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

Working example on Plunker: http://plnkr.co/edit/mWKc4M?p=preview