Нарисуйте границу страны на карте листовки, используя координаты JSON - PullRequest
Новая
       33

Нарисуйте границу страны на карте листовки, используя координаты JSON

1 голос
/ 23 марта 2019

У меня есть листовка с картой и набор границ страны в длинном файле JSON.Я пытаюсь использовать координаты JSON, чтобы нарисовать сплошную зеленую границу вдоль границы страны, отображаемой на объекте карты.

Я также не хочу рисовать полностью покрытый слой над страной.

Я построил функцию JS, которая выполняет Ajax-запрос для запроса координат границы JSON для конкретной страны.

Когда данные JSON получены, я применяю их и привязываю к объекту карты. 

function applyCountryBorder(countryname) {
    var addresssObj = null;

    jQuery.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'https://nominatim.openstreetmap.org/search?country=' + countryname.trim() + '&polygon_geojson=1&format=json',
        async: true,
        cache: true,
        success: function(responseData) {
             var polyline = L.polyline(responseData[0].geojson.coordinates, {
                color: 'green',
                weight: 14,
                opacity: 1    
            }).addTo(map);
            map.invalidateSize();
        },
        error: function(responseData) {
            addresssObj =  responseData;}
    });
}

Я ожидаю, что граница указанной страны будет яркой, сплошной, толстой, зеленойлиния.Но на самом деле, карта и границы страны остаются неизменными и остаются по умолчанию.

Что я делаю не так?Как мне достичь желаемой цели?

1 Ответ

1 голос
/ 27 марта 2019

Скорее всего, граница (форма MultiPolygon) визуализируется, но не на том месте, где вы ожидаете.В формате GeoJSON координаты представлены в порядке lng,lat, в то время как L.polyline ожидает координаты в формате lat,lng, другими словами, координаты GeoJSON (lng,lat) необходимо поменять на lat,lng.

L.GeoJSON.coordsToLatLng() Функция может быть использована для этого вопроса, например 

const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2); 
L.polyline(latLngs, {
    color: "green",
    weight: 14,
    opacity: 1
}).addTo(map);

Поскольку предоставленный сервис возвращает GeoJSON, другой вариант будет использовать L.geoJSON для рендеринга границы следующим образом: 

const layer = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution:
    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

const map = L.map("map", {
  layers: [layer]
}).setView([52.8203934, -4.5700609], 6);
applyCountryBorder(map, "United Kingdom");

function applyCountryBorder(map, countryname) {
  jQuery
    .ajax({
      type: "GET",
      dataType: "json",
      url:
        "https://nominatim.openstreetmap.org/search?country=" +
        countryname.trim() +
        "&polygon_geojson=1&format=json"
    })
    .then(function(data) {
      /*const latLngs = L.GeoJSON.coordsToLatLngs(data[0].geojson.coordinates,2) 
      L.polyline(latLngs, {
        color: "green",
        weight: 14,
        opacity: 1
      }).addTo(map);*/

      L.geoJSON(data[0].geojson, {
        color: "green",
        weight: 14,
        opacity: 1,
        fillOpacity: 0.0 
      }).addTo(map);
    });
}
#map {
        width: 100%;
        height: 480px;
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<div id="map"></div>
...