chuikoffru
@chuikoffru
Full Stack JS Developer

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

Добрый день.
Делаю конструктор карты с помощью 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()

5f152afb2ce1c116036816.png

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

Исходники: https://github.com/chuikoffru/rrbe-map/blob/react/...
Демо: https://rrbe-map-git-react.chuikoffru.vercel.app/
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
chuikoffru
@chuikoffru Автор вопроса
Full Stack JS Developer
Проблему решил. Оказывается 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]);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 сент. 2020, в 08:35
10000 руб./за проект
28 сент. 2020, в 07:47
15000 руб./за проект
28 сент. 2020, в 00:10
20000 руб./за проект