Получить geoJSON полигоны напрямую онлайн

24 марта 2022, 11:30

Я использую карты leaflet, и мне нужно выделить определенные регионы. Я делаю выделение с помощью полигонов geoJSON. На данный момент использую такую ссылку https://nominatim.openstreetmap.org/search.php?q=Russia&polygon_geojson=1&format=geojson т.е. с этой страницы получаю координаты (geoJSON), и вставляю на карту. Но проблема этой страницы в том, что вместе с координатами он дает мне еще и метки, а на карте мне они не нужны. И такой вопрос, есть ли еще такие сервисы, предоставляющие напрямую страницы с geoJSON?
вот на всякий код с codepen

Answer 1

Можно просто отфильтровать GeoJson по типу геометрии:

let map = new L.Map('map', { 
  layers: new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'), 
  center: new L.LatLng(60, 110), 
  zoom: 2, 
  minZoom: 2, 
  maxZoom: 3 
}); 
 
function doFetch(url, settings){ 
  fetch(url) 
  .then(function(response) { 
    return response.json(); 
  }) 
  .then(function(json) { 
    json.features = json.features.filter(f => f.geometry.type !== "Point") 
    L.geoJSON(json, settings).addTo(map); 
  }); 
} 
 
function LowCoV(geoJsonData) { 
  let polygonSettings = { 
    fillColor: "#e00", 
    color: "#f00", 
    opacity: 1, 
    weight: 0.5, 
    fillOpacity: 0.2 
  } 
doFetch(geoJsonData, polygonSettings) 
 
} 
function MiddleCoV(geoJsonData) { 
  let polygonSettings = { 
    fillColor: "#e00", 
    color: "#f00", 
    opacity: 1, 
    weight: 0.5, 
    fillOpacity: 0.5 
  } 
 
  doFetch(geoJsonData, polygonSettings) 
} 
function HightCoV(geoJsonData) { 
  let polygonSettings = { 
    fillColor: "#e00", 
    color: "#f00", 
    opacity: 1, 
    weight: 0.5, 
    fillOpacity: 0.8 
  } 
 
  doFetch(geoJsonData, polygonSettings) 
} 
 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=Russia&polygon_geojson=1&format=geojson'); 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=USA&polygon_geojson=1&format=geojson'); 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=Canada&polygon_geojson=1&format=geojson'); 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=Spain&polygon_geojson=1&format=geojson'); 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=Russia&polygon_geojson=1&format=geojson'); 
 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=France&polygon_geojson=1&format=geojson'); 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=Italy&polygon_geojson=1&format=geojson'); 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=India&polygon_geojson=1&format=geojson'); 
LowCoV('https://nominatim.openstreetmap.org/search.php?q=Germany&polygon_geojson=1&format=geojson'); 
MiddleCoV('https://nominatim.openstreetmap.org/search.php?q=Japan&polygon_geojson=1&format=geojson') 
MiddleCoV('https://nominatim.openstreetmap.org/search.php?q=Australia&polygon_geojson=1&format=geojson'); // Russia polygons 
HightCoV('https://nominatim.openstreetmap.org/search.php?q=China&polygon_geojson=1&format=json'); // China polygons

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

<link rel="stylesheet" href="stylesheet.css"> 
<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> 
<script src="main.js"></script>