单张自动居中和缩放到添加了geoserver的wms功能

Question

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

这是我的代码：

  <div style="width:400px; height:400px" id="map"></div>
  <script>
  var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }
  );
  // Mapquest layer
  var mapquest = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
  maxZoom: 18,
  minZoom: 5,
  attribution: "©<a href='http://openstreetmap.org/' target='_blank'>OpenStreetMap</a> contributors, Tiles Courtesy of <a href='http://open.mapquest.com' target='_blank'>MapQuest</a>",
  subdomains: ['1','2','3','4']
  });
  //create map object
  var map = new L.Map('map', {
      center: [12.565679, 104.990963],
      zoom: 8,
      layers: [mapquest]
  });

  var myLayer = new L.GeoJSON().addTo(map); 

  function loadGeoJson(data) {myLayer.addData(data); }

  var rootUrl = 'http://localhost:8181/geoserver/Land_Natural_Resources/wms';
  var layer_name = 'Land_Natural_Resources:elc_government_data_complete'; 
  var map_layer = L.tileLayer.wms(rootUrl, {
  layers: layer_name,
  format: 'image/png',
  version: '1.1.0',
  transparent: true,
  attribution: "",
  tiled:true,
  featureID:'elc_government_data_complete.1'
  }).addTo(map);  

  </script> 

Answer 1

如果您修改loadGeoJson函数，如下所示：

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

}

这一行：

map.fitBounds(myLayer.getBounds()); 

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