如何在180度经线附近显示Leaflet标记？

Question

我正在使用Leaflet 1.0.0-rc.2+e02b5c9。我知道默认情况下会将所有标记、折线等从经度-180到180渲染成屏幕截图，如下所示：

但是，我想将地图显示在这个经度上：我想在日本和美国之间的这个海域显示它，如下所示：

但是，你会发现所有标记都没有在右侧渲染出来。即使我设置了

worldCopyJump: true

当我向右拖动时，所有标记都出现在右侧，但左侧的标记消失了，反之亦然。实际上，我希望它们同时出现。

有任何想法来解决这个问题吗？

- Khoi Vu

---

感谢您编辑 @ghybs。 - Khoi Vu

Answer 1

请确保您的标记的经度范围在0..360之间，而不是-180..180。

查看一个有效示例

即，不要使用

L.marker([0,170]).addTo(map);
L.marker([0,-180]).addTo(map);
L.marker([0,-170]).addTo(map);

做类似于以下操作：

L.marker([0,170]).addTo(map);
L.marker([0,180]).addTo(map);
L.marker([0,190]).addTo(map);

换言之，如果经度小于零，则将其加上360。如果您打算一次性过滤所有经度，请使用L.Util.wrapNum(lng, [0,360], true)。

- IvanSanchez

---

链接已失效。 - Icarus

我提供了一个新的例子。 - IvanSanchez

Answer 2

在Leaflet Github上报告了类似的问题。

解决方法是如果标记点的初始经度小于0，则增加它们的经度。

var totalMarkers = markerPositions.length;
for(var i = 0; i<totalMarkers; i++){
    var mData = markerPositions[i];
    if (mData.lon < 0) {
        mData.lon += 360;
    }
    L.marker([mData.lat, mData.lon]).addTo(map);
}

- Weedoze

---

嘿@Weedoze，这对我很有帮助。只是在代码中做了一点改动，变成了if (mData.lon < 0) { mData.lon =parseInt(mData.lon) +360; } +1 :) - SHEKHAR SHETE

@SHEKHARSHETE 2.5年前！感谢你的“+1”。我很感激。 - Weedoze

Answer 3

另一种方法是利用 Leaflet.RepeatedMarkers插件，它会在每360度经度上显示每个标记的副本：

将其应用于跨越反子午线附近的标记也同样有效，例如：

var myRepeatingMarkers = L.gridLayer.repeatedMarkers().addTo(map);

L.polyline([[-85,180],[85,180]]).addTo(map);
L.polyline([[-85,-180],[85,-180]]).addTo(map);

myRepeatingMarkers.addMarker(L.marker([0,140]));
myRepeatingMarkers.addMarker(L.marker([0,150]));
myRepeatingMarkers.addMarker(L.marker([0,160]));
myRepeatingMarkers.addMarker(L.marker([0,170]));
myRepeatingMarkers.addMarker(L.marker([0,180]));
myRepeatingMarkers.addMarker(L.marker([0,-170]));
myRepeatingMarkers.addMarker(L.marker([0,-160]));
myRepeatingMarkers.addMarker(L.marker([0,-150]));
myRepeatingMarkers.addMarker(L.marker([0,-140]));

将会显示类似于:

查看使用Leaflet.repeatedMarkers和标记靠近反子午线的实时示例。

注：Leaflet是一款开放源代码的JavaScript库，用于创建交互式地图。

- IvanSanchez

---

有没有关于如何使用Angular和导入GeoJSON的想法？ - vr_driver

Answer 4

感谢大家的帮助。实际上，我没有使用你们建议的代码，但是我得到了修复它的想法。

这是我的解决方案，希望对其他寻找相同解决方案的人有所帮助： 已解决的屏幕截图

始终在地图上显示图标及其副本（在您想要的经度范围内，在我的情况下，从0到360）

makeMarkers: (item) ->
  markers = []
  markers.push(item.makeMarker())

  copy_marker = item.makeMarker()
  copy_marker.setLatLng( new L.LatLng(copy_marker._latlng.lat, copy_marker._latlng.lng + 360) )
  markers.push(copy_marker)

  markers

在 Item 类中：

makeMarker: ->
  LeafletIcon = L.Icon.extend(
    options: {
      iconSize:     [25, 25],
      iconAnchor:   [10, 10],
      popupAnchor:  [0, 0]
    },
  )
  icon = new LeafletIcon( {iconUrl: this.iconUrl} )

  marker = L.marker([this.latitude, this.longitude], {icon: icon, zIndexOffset: 10})
  marker.id = this.id

  marker

再次感谢。

- Khoi Vu

---

我尝试按照您的方法操作，但是在所有重复的世界地图中，它只在第一个世界地图上显示标记，并在其右侧的第二个地图上显示。有什么正确的方法可以让标记始终在重复的世界地图上重复出现，而不会像启用“worldCopyJump”时那样闪烁？ - Hoang Duc Nguyen