Question

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

但是，我希望将地图显示为此时我想要显示的经度（这是日本和美国之间的中海）：

但是你看到所有标记都没有在右侧渲染。即便如此，如果我设置

worldCopyJump: true

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

要解决这个问题的想法吗？

Answer 1

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

Answer 2

确保标记的经度在[{1}}范围内，而不是在0..360范围内。 See a working example

即。而不是

-180..180

执行类似

的操作

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

换句话说，如果经度小于零，则向其添加360。如果您打算一次性过滤所有经度，则可能需要使用L.marker([0,170]).addTo(map); L.marker([0,180]).addTo(map); L.marker([0,190]).addTo(map);。

Answer 3

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

这是我的解决方案，希望对寻找相同解决方案的其他人有所帮助： Screenshot that was solved

始终在地图上显示图标及其副本（在我想要的经度范围内，从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

再次感谢你。

Answer 4

另一种方法是利用Leaflet.RepeatedMarkers plugin，它将在每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]));

将显示如下内容：

签出live example for using Leaflet.repeatedMarkers with markers near the antimeridian。

如何在180°子午线附近显示传单标记？

4 个答案: