Как отображать маркеры листовка около 180 ° меридиана?

Question

Я использую Leaflet 1.0.0-rc.2 + e02b5c9. Я знаю, что по умолчанию делает все маркеры, полилинии ... от долготы -180 до 180, как снимок экрана здесь:

Однако, я хочу, чтобы показать карту, как эта долготе я хочу показать в этом точка (это среднее море между Японией и США):

но вы видите все маркеры не отображаются на правой стороне. Несмотря на то, если я установить

worldCopyJump: true 

, когда я перетащить вправо, все маркеры оказались на правом, но они исчезли на левой, и наоборот. На самом деле, я хочу, чтобы они появились одновременно.

Любые идеи исправить это?

Answer 1

Просто убедитесь, что долготы ваших маркеров находятся в диапазоне 0..360, а не в диапазоне -180..180. See a working example.

Другими словами, если долгота меньше нуля, добавьте 360 к ней. Вместо этого вы можете использовать L.Util.wrapNum(lng, [0,360], true), если вы планируете сразу фильтровать все свои долготы.

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

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 

Спасибо агу в.