如何在地图循环Leaflet JS上复制标记位置 [英] How to replicate marker position on map loop Leaflet JS

问题描述

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

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

任何帮助将不胜感激.尝试以各种方式在Google上进行搜索，并且Leaflet示例均未真正具有此功能.

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

推荐答案

在地图选项中使用'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

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

这篇关于如何在地图循环Leaflet JS上复制标记位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！