Как подключить KML в Leaflet карты?

Question

Goobert Cripto @goober-cripto

Leaflet

Как подключить KML в Leaflet карты?

Есть карта города с подгруженными локальными тайлами. Пытался подключить туда KML c сайта

(я KMZ перевёл в KML,и тестил на google earth, всё отображается как надо без потерь)
В документации Leaflet посмотрев подключение данного KML не смог реализовать

map.addLayer(osm);

            // Load kml file
            fetch('assets/example1.kml')
                .then(res => res.text())
                .then(kmltext => {
                    // Create new kml overlay
                    const parser = new DOMParser();
                    const kml = parser.parseFromString(kmltext, 'text/xml');
                    const track = new L.KML(kml);
                    map.addLayer(track);

                    // Adjust map to show the kml
                    const bounds = track.getBounds();
                    map.fitBounds(bounds);
                });

Это подключение данного KML не работает,помогите пожалуйста разобраться.
Заранее ОГРОМЕННОЕ СПАСИБО =)

Вопрос задан более трёх лет назад
826 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

German Jet @GeraJet

Напишите, что именно не работает. В консоли браузера что?

Написано более трёх лет назад

Goobert Cripto @goober-cripto Автор вопроса

German Jet,

<html>
    <head>
        <link rel="stylesheet" href="http://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
        <script src="http://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
        <script src="./L.KML.js"></script>
    </head>
    <body>
        <div style="width: 100vw; height: 100vh" id="map"></div>
        <script type="text/javascript">
            // Make basemap
            const map = new L.Map('map', { center: new L.LatLng(58.4, 43.0), zoom: 11 });
            const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

            map.addLayer(osm);

            // Load kml file
            fetch('assets/doc.kml')
                .then(res => res.text())
                .then(kmltext => {
                    // Create new kml overlay
                    const parser = new DOMParser();
                    const kml = parser.parseFromString(kmltext, 'text/xml');
                    const track = new L.KML(kml);
                    map.addLayer(track);

                    // Adjust map to show the kml
                    const bounds = track.getBounds();
                    map.fitBounds(bounds);
                });
        </script>
    </body>
</html>

Написано более трёх лет назад

Goobert Cripto @goober-cripto Автор вопроса

И ошибка

Написано более трёх лет назад

Решения вопроса 1

5 комментариев

Goobert Cripto @goober-cripto Автор вопроса
Спасибо,(решение это пробовал https://github.com/Raruto/leaflet-kmz) но есть не большой нюанс,по поводу открытия этого файла.В самом файле kmz(разархивировав его в kml) нету координат точек,для отображения слоёв,есть только ссылки на ресурсы:

<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> <NetworkLink> <name>ВП РФ 07.03.2013</name> <open>1</open> <description><![CDATA[Структура воздушного пространства Российской Федерации.<br> Введена в действие с 28.06.2012г.<br> <br>Copyright © 2011 <a href="http://www.aopa.ru">АОПА-Россия</a>]]></description> <Link> <href>http://aopa.ru/maps/root_v02.kmz</href> </Link> </NetworkLink> </kml>

И при подключении этого фала либо kmz,kml,не отображается содержимое этого слоя
как мне быть когда имеются такие ссылки,как их подгружать?
Написано более трёх лет назад
EmelyanovKonstantin @EmelyanovKonstantin

aopa.ru/maps/root_v02.kmz
В этом файле есть только названия полей.
Самих значений нет.

Написано более трёх лет назад
Goobert Cripto @goober-cripto Автор вопроса

EmelyanovKonstantin, так вот вопрос с этим файлом xml быть?Его отправляют на сервер либо,как с него вытащить данные о координатах?

Написано более трёх лет назад
EmelyanovKonstantin @EmelyanovKonstantin

В нём нет координат. По крайней мере в том kmz что лежит на сервере.
Если у вас есть исходный kmz то подключайте его плагином leaflet-kmz.

Написано более трёх лет назад
Goobert Cripto @goober-cripto Автор вопроса

EmelyanovKonstantin, нашёл исходник,с координатами всё выводится но только при нажатии на слой не отображаются данные ошибки такие:

Как их устранить?

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

Leaflet

Средний
Leaflet кастомная сетка координат?
- 1 подписчик
- 04 янв.
- 65 просмотров
1

ответ
Next.js

+1 ещё

Простой
Как решить неправильно отображающуюся карту leaflet?
- 1 подписчик
- 29 июл. 2023
- 82 просмотра
0

ответов
OpenStreetMap

+1 ещё

Простой
Как локализовать всю карту на русский, английский и казахский язык?
- 1 подписчик
- более года назад
- 128 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Leaflet как отцентровать карту в зависимости от Маркеров нанесенных на карту?
- 1 подписчик
- более года назад
- 183 просмотра
1

ответ
React

+1 ещё

Простой
При подключении в React карты leaflet возникает ошибка Map container is already initialized, как исправить?
- 1 подписчик
- более года назад
- 266 просмотров
0

ответов
React

+1 ещё

Средний
Как сделать масштабируемый зум для маркеров leaflet?
- 1 подписчик
- более года назад
- 109 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как запретить действие за объектом(кнопкой)?
- 1 подписчик
- более года назад
- 66 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как исправить данную ошибку?
- 1 подписчик
- более года назад
- 81 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать прозрачной карту, но оставить непрозрачным geoJSON одной страны?
- 1 подписчик
- более года назад
- 95 просмотров
0

ответов
API

+2 ещё

Простой
Есть ли api с районами регионов России?
- 3 подписчика
- более года назад
- 216 просмотров
0

ответов
Показать ещё Загружается…

Продакт дизайнер в финтех

Module Agency

от 110 000 до 190 000 ₽

Golang developer middle

Posman

До 200 000 ₽

PPC Team Lead Amazon (Senior)

Gora Group LLC

от 2 500 $

DevOps задачи, работа с Yandex Cloud и Yandex Database

19 апр. 2024, в 18:38

1500 руб./в час

Верстка сайта -4-5 страниц

19 апр. 2024, в 18:36

1500 руб./за проект

MiniApp для телеграмм на React

19 апр. 2024, в 18:36

30000 руб./за проект

Напишите, что именно не работает. В консоли браузера что?
German Jet,
<html> <head> <link rel="stylesheet" href="http://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script src="http://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script src="./L.KML.js"></script> </head> <body> <div style="width: 100vw; height: 100vh" id="map"></div> <script type="text/javascript"> // Make basemap const map = new L.Map('map', { center: new L.LatLng(58.4, 43.0), zoom: 11 }); const osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'); map.addLayer(osm); // Load kml file fetch('assets/doc.kml') .then(res => res.text()) .then(kmltext => { // Create new kml overlay const parser = new DOMParser(); const kml = parser.parseFromString(kmltext, 'text/xml'); const track = new L.KML(kml); map.addLayer(track); // Adjust map to show the kml const bounds = track.getBounds(); map.fitBounds(bounds); }); </script> </body> </html>

Answer 1 · 2020-07-10 12:53:55

Замените Leaflet KML layer plugin на leaflet-omnivore.
Добавляйте слой:

omnivore.kml('a.kml').addTo(map);

Есть вероятность неправильной конвертации kmz в kml.
Ошибка в вашей консоли показывает, что из kml не удаётся вычислить границы области. Может быть ошибка в системе координат.
Поэтому , если не получится с omnivore, используйте плагин https://github.com/Raruto/leaflet-kmz
И добавляйте сразу исходный kmz.

Как подключить KML в Leaflet карты?

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

Минуточку внимания

Войдите на сайт