适合地图内的边界

Question

我使用 OSM 来显示县的边界。它在大多数情况下工作得很好，但在某些情况下，县更大，不适合地图。

如何在开始渲染前调整缩放级别？

var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);
        
map.attributionControl.setPrefix();
        
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
     attribution: \'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors\'
}).addTo(map);

function drawCountyBoundary(county, state) {
    url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
          fetch(url).then(function(response) {
              return response.json();
          })
          .then(function(json) {
          map.flyTo([json[0].lat, json[0].lon], 9);
          setTimeout(function(){
              geojsonFeature = json[0].geojson;
              L.geoJSON(geojsonFeature).addTo(map);
          }, 1900);
     });
 }
        
 drawCountyBoundary("Cibola", "NM");

Answer 1

缩放级别可以通过_getBoundsCenterZoom()

计算

<html>
<head>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
</head>
<body>
 <div id="mapCnty" style="width:500px;height:500px;"></div>
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
<script>
var map = L.map("mapCnty").setView([31.2506372, -102.3385429], 5);

map.attributionControl.setPrefix();

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function drawCountyBoundary(county, state) {
    url = "https://nominatim.openstreetmap.org/search.php?county=" + county + "&state=" + state + "&polygon_geojson=1&format=jsonv2";
      fetch(url).then(function(response) {
          return response.json();
      })
      .then(function(json) {
          let geojsonFeature = json[0].geojson;
          let layer = L.geoJSON(geojsonFeature);
          // calc the zoom level
          let z = map._getBoundsCenterZoom(layer.getBounds());
          // fly duration, unit: second
          let flyDuration = 1.5;
          map.flyTo([json[0].lat, json[0].lon], z.zoom, {duration:flyDuration});
          setTimeout(function(){
              layer.addTo(map);
          }, flyDuration*1000);
     });
 }

 drawCountyBoundary("Cibola", "NM");
</script>
</body>
</html>

适合地图内的边界

Fit boundaries within map

javascript

openstreetmap