Блог

Главная - Вопросы по программированию - Рисование границ на карте с помощью LeafletJS

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

#javascript #leaflet #openstreetmap

#javascript #листовка #openstreetmap

Вопрос:

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

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

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

 https://nominatim.openstreetmap.org/ui/search.html?state=txamp;county=Lee

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

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

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

Ответ №1:

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

 function drawCountyBoundary(county, state)
{
    url = `https://nominatim.openstreetmap.org/search.php?county=${county}amp;state=${state}amp;polygon_geojson=1amp;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')

Комментарии:

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

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

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

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

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