Почему некоорректно отображаются маркеры на карте leaflet?

Question

[Konstantin Chuykov]

Добрый день.
Делаю конструктор карты с помощью react-leaflet, react-leaflet-draw:

Проблема в том, что при добавлении маркера на карту, он добавляется с большой погрешностью на карту.

Я использую Яндекс карту, и учитываю ее особенности, поэтому делаю так:

<Map
  center={center}
  zoom={zoom}
  crs={L.CRS.EPSG3395}
>
<TileLayer
   url="http://vec{s}.maps.yandex.net/tiles?l=map&v=4.55.2&z={z}&x={x}&y={y}&scale=2&lang=ru_RU"
   subdomains={["01", "02", "03", "04"]}
/>
</Map>

Объекты вывожу вот так:

<FeatureGroup>
   {state.features.map((item, key) => renderObject({ ...item, key }))}
</FeatureGroup>

Когда добавляю новый маркер, он отображается в другом месте.

const createLayer = (e) => {
    console.log("object", e);
    console.log("layer", e.layer.toGeoJSON());
}

Проблема возникает после toGeoJSON()



Почему это происходит и как это исправить?

Исходники: https://github.com/chuikoffru/rrbe-map/blob/react/...
Демо: https://rrbe-map-git-react.chuikoffru.vercel.app/

Comments

[freeExec]

Вы же в курсе, что выводить карту яндекса разрешено только через их собственный апи, а не эти ваши лефлеты.

[EmelyanovKonstantin]

freeExec, Интересно. За этим вообще как-то следят? Какие последствия, и были ли реальные прецеденты?

[freeExec]

EmelyanovKonstantin, В логах же видно, с какого сайта грузили тайлы. Последствия когда использовали в закрытых проекта были. В общем принцип неуловимиго Джо.

[Konstantin Chuykov]

freeExec, https://yandex.ru/blog/mapsapi/pravovoy-vopros-isp...

То есть просто тайлы нельзя использовать, только в связке с плагином? Ну даже если использовать OSM, проблема не устраняется. По-прежнему toGeoJSON меняет координаты.

[freeExec]

Konstantin Chuykov, Ничего он не меняет.

Answer 1

[Konstantin Chuykov]

Проблему решил. Оказывается layer имеет координаты {lat, lng}, а после toGeoJSON координаты меняются местами [lng, lat]. В итоге пришлось немного дописать при рендере:

const renderObject = ({ id, key, type, properties, geometry }) => {
    const { coordinates } = geometry;
    const position = new L.LatLng(coordinates[1], coordinates[0]);
}

Comments

[Konstantin Chuykov]

Карту яндекса убрал :)