Leaflet OSM:多边形的中心mapview

ale*_*lex 4 html javascript openstreetmap leaflet

我想生成一个包含Leaflet库的html文件来显示OpenStreetMap带有多边形的视图.地图上的多边形应居中.为此我跟着这个讨论,但我仍然不清楚如何将任意多边形居中并自动缩放它.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);
    }
Run Code Online (Sandbox Code Playgroud)

特别是如果有" Leaflet我可以使用的"板载方法,它会很棒.如何计算多边形的中心是明确的(例如这里),但也许已经实现了我可以使用的方法.

解:

// 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
Run Code Online (Sandbox Code Playgroud)

rob*_*lep 11

不完全居中,但如果您希望地图适合多边形:

map.fitBounds(poly.getBounds());
Run Code Online (Sandbox Code Playgroud)

(doc).