我想生成一个包含Leaflet
库的html文件,以显示带有多边形的OpenStreetMap
视图。地图上的多边形应居中。为此,我按照this讨论,但我仍然不清楚如何将任意多边形居中并自动缩放它。 Autozoom对我来说意味着多边形完全在可见的地图摘录中并填充它。
例如,这将是期望的结果:
到目前为止,这是我的代码:
var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];
function initmap() {
// set up the map
map = new L.Map('map');
/* --- Replace for different URL for OSM tiles */
var url_base ='URL_TO_MY_OPENSTREETMAPS_SERVER';
var latitude = 50.2222;
var longtitude = 3.322343;
var poly = L.polygon([
[50.2222, 3.322343],
[50.2322, 3.323353],
[...]
]);
// create the tile layer with correct attribution
var osmUrl=url_base+'{z}/{x}/{y}.png';
var osmAttrib='Map data ɠOpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 4, maxZoom: 20, attribution: osmAttrib});
// start the map at specific point
map.setView(new L.LatLng(latitude, longtitude),15);
map.addLayer(osm);
poly.addTo(map);
}
特别是如果我有Leaflet
的“板载”方法可以使用它会很棒。如何计算多边形的中心是明确的(例如here),但可能已经实现了我可以使用的方法。
解决方案:
// start the map at specific point
// map.setView(new L.LatLng(latitude, longtitude),15); <- Remove this line
map.addLayer(osm);
poly.addTo(map);
map.fitBounds(poly.getBounds()); // <- Add this line
答案 0 :(得分:11)
答案 1 :(得分:1)
要使一个以上的多边形居中,知道.fitBounds
也接受数组作为参数是件好事,因此您可以这样做:
const poly = [polygonA,polygonB,polygonC];
const bounds = poly.map(p=>p.getBounds());
mymap.fitBounds(bounds);