我已经从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>
答案 0 :(得分:1)
如果您修改loadGeoJson函数,如下所示:
function loadGeoJson(data) {
myLayer.addData(data);
map.fitBounds(myLayer.getBounds());
}
这一行:
map.fitBounds(myLayer.getBounds());
将使用该Polygon的最大缩放级别将地图平移到GeoJSON要素的边界。