带有自动居中和缩放到地理服务器的 wms 功能的传单，添加了

Question

我已经从 Geoserver 添加了 WMS 层以显示在 Leaflet 上。但是，我想将地图自动缩放并居中到特定要素或多边形。有人对此有任何想法吗？所附图片是我想做的。

\n\n

这是我的代码：

\n\n

  <div style="width:400px; height:400px" id="map"></div>\n  <script>\n  var osm = new L.TileLayer(\'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\',\n  { attribution: \'Map data \xc2\xa9 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors\' }\n  );\n  // Mapquest layer\n  var mapquest = new L.TileLayer(\'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png\', {\n  maxZoom: 18,\n  minZoom: 5,\n  attribution: "\xc2\xa9<a href=\'http://openstreetmap.org/\' target=\'_blank\'>OpenStreetMap</a> contributors, Tiles Courtesy of <a href=\'http://open.mapquest.com\' target=\'_blank\'>MapQuest</a>",\n  subdomains: [\'1\',\'2\',\'3\',\'4\']\n  });\n  //create map object\n  var map = new L.Map(\'map\', {\n      center: [12.565679, 104.990963],\n      zoom: 8,\n      layers: [mapquest]\n  });\n\n  var myLayer = new L.GeoJSON().addTo(map); \n\n  function loadGeoJson(data) {myLayer.addData(data); }\n\n  var rootUrl = \'http://localhost:8181/geoserver/Land_Natural_Resources/wms\';\n  var layer_name = \'Land_Natural_Resources:elc_government_data_complete\'; \n  var map_layer = L.tileLayer.wms(rootUrl, {\n  layers: layer_name,\n  format: \'image/png\',\n  version: \'1.1.0\',\n  transparent: true,\n  attribution: "",\n  tiled:true,\n  featureID:\'elc_government_data_complete.1\'\n  }).addTo(map);  \n\n  </script> \n

\n

Answer 1

如果您像这样修改 loadGeoJson 函数：

function loadGeoJson(data) {
      myLayer.addData(data); 
      map.fitBounds(myLayer.getBounds()); 

}

这行：

map.fitBounds(myLayer.getBounds()); 

将使用该多边形的最大可能缩放级别将地图平移到 GeoJSON 要素的边界。