Как я могу раскрасить город на открытой карте улиц, основываясь на долготе и широте? - PullRequest
Новая
       13

Как я могу раскрасить город на открытой карте улиц, основываясь на долготе и широте?

1 голос
/ 04 апреля 2020

Я использую открытую карту улиц, чтобы показать карту в своем приложении. Следующий код используется для отображения открытой карты улиц. 

 <div id="map" style="width: 90%; height: 420px"></div>

Я использую библиотеку листовок, чтобы показать карту. 

         function drawMap() {
            var mapOptions = {
                center: [23.8103, 90.4125],
                zoom: 7
            };
            var map = new L.map('map', mapOptions);
            var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
            map.addLayer(layer);
        }

Однако карта показана, но я хочу раскрасить город на этой карте, основываясь на долготе и широте. Я много искал и нашел несколько ссылок. Геозона Бит У меня нет никакой подсказки для реализации этого. Как я могу раскрасить город на карте, основываясь на широте и долготе?

Я использую flask в качестве бэкэнда.

1 Ответ

1 голос
/ 04 апреля 2020

Используйте https://nominatim.openstreetmap.org/, чтобы получить координаты многоугольника, однако этот API принимает название города, поэтому вам нужно использовать обратное кодирование для преобразования координат в название города. Вы можете сделать это с помощью esri-leaflet-geocoder. 

 const geocoder = L.Control.Geocoder.nominatim();

  const geocodeService = L.esri.Geocoding.geocodeService();
  const yourCoordinates = [23.8103, 90.4125];

  geocodeService
    .reverse()
    .latlng(yourCoordinates)
    .language("eng")
    .run(function(error, result) {
      if (error) {
        return;
      }

      if (result && result.address) {
        fetch(
          `https://nominatim.openstreetmap.org/search.php?q=${
            result.address.City
          }&polygon_geojson=1&format=json`
        )
          .then(res => res.json())
          .then(res => {
            console.log(res[1].geojson);
            L.geoJSON(res[1].geojson).addTo(map);
          });
      }
    });

Демо

...