добавить панель (pane) (или полигон) на карте Leaflet

103

16 марта 2022, 11:50

есть карта сделанная на leaflet, выглядит она вот так
Задача состоит в том, чтобы выделить определенную область на карте, например, всю Россию, под "выделить", имеется ввиду наложить слой (Pane) какого-то определенного цвета на всю страну (или регион, не суть важно). Вот пример, того что надо сделать
Как сделать выделение региона на карте leafletjs?
P.S. Не обращайте внимания, что темы карт разные, пример приведен чтобы показать, как должно выглядеть выделение.

Хочу дополнить, пускай это и не вопрос. Но самый легки способ получить полигон в geoJSON, на мой взгляд, оказался вот такой:
https://nominatim.openstreetmap.org/search.php?q={COUNTRY}&polygon_geojson=1&format={FORMAT}
Вместо {COUNTRY} подставить название региона или страны, а вместо {FORMAT} подставить формат данных. В моем случает ссылка была такой: https://nominatim.openstreetmap.org/search.php?q=Russia&polygon_geojson=1&format=geojson

Answer 1

Воспользуйтесь возможностью отображать GeoJson:

let map = new L.Map('map', { 
  center: new L.LatLng(60, 110), 
  zoom: 2, 
  layers: new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') 
}); 
 
let settings = { 
  fillColor: "#e00", 
  color: "#f00", 
  opacity: 1, 
  fillOpacity: 0.2 
} 
 
fetch("https://raw.githack.com/mapbox/tile-cover/master/test/fixtures/russia.geojson") 
  .then(function(response) { 
    return response.json(); 
  }).then(function(json) { 
    L.geoJSON(json, settings).addTo(map); 
  });

body { 
  margin: 0; 
  overflow: hidden; 
} 
 
#map { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
}

<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>