Рисование границ на карте с помощью LeafletJS

Я начинаю играть с кодом, который может генерировать карты. Сейчас я рассматриваю OSM (OpenStreetMaps) как отличное решение. Также LeafletJS позволяет очень легко рисовать карты на основе OSM. Все идет нормально.

Я хотел бы иметь возможность нарисовать контур (границу) округа и пытаюсь понять, как будет выглядеть этот процесс. Мне сначала вызвать, чтобы найти координаты, а затем передать их в Leaflet или есть лучший способ?

Я могу получить границы, используя Nominatim API, но вызывая так:

https://nominatim.openstreetmap.org/ui/search.html?state=tx&county=Lee

И я могу нарисовать область в Leaflet следующим образом:

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

Итак, я слишком много думаю или это так работает?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
1 780
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать одну функцию, чтобы получить геометрию округа и добавить ее на карту. Попробуйте следующий код:

function drawCountyBoundary(county, state)
{
    url = `https://nominatim.openstreetmap.org/search.php?county=${county}&state=${state}&polygon_geojson=1&format=jsonv2`
    fetch(url).then(function(response) {
    return response.json();
  })
  .then(function(json) {
    geojsonFeature = json[0].geojson;
    L.geoJSON(geojsonFeature).addTo(map);
  });
}

drawCountyBoundary('Lee', 'Tx')

Вау, это выглядит очень здорово, спасибо! Я получаю следующую ошибку JS и не знаю, почему: Uncaught (в обещании) TypeError: t.addLayer не является функцией

santa 17.12.2020 15:19

Также я добавил map = L.map("mapCnty"); но все равно не повезло.

santa 17.12.2020 16:19

Вот моя неудачная попытка: jsfiddle.net/9ax2u0ty

santa 17.12.2020 16:34

Попробуйте эту скрипку.

PeaceLeka 17.12.2020 17:30

Это выглядит здорово, спасибо. Поскольку штат может быть за пределами холста для этого представления, я думаю, я могу начать с полного представления штата, затем добавить контур округа, а затем увеличить масштаб и центрировать. Но это, безусловно, отличное начало!

santa 17.12.2020 17:38

Да, вы можете установить вид на центр штата. Предполагая, что только округа Техаса, вид может быть установлен как:var map = L.map('map').setView([31.3913424,-99.1712139], 5);

PeaceLeka 17.12.2020 17:49

Да, конечно. В LeafletJS есть что-то вроде .flyTo(), которое поможет с масштабированием. Я думаю, мне нужно выяснить viewBox округа, прежде чем запускать его.

santa 17.12.2020 17:54

Другие вопросы по теме