单张OSM：多边形上的中心mapview [英] Leaflet OSM: Center mapview on polygon

问题描述

我想生成一个包含 Leaflet 库的html文件，以显示带有多边形的 OpenStreetMap 视图。地图上的多边形应居中。为此，我遵循），但也许已经有了可用的实现方法。

  //在特定点开始地图
 // map.setView（new L.LatLng（纬度，经度），15） ; <  - 删除此行
 map.addLayer（osm）; 
 poly.addTo（map）; 
 map.fitBounds（poly.getBounds（））; //<  -  Add this line 
  

解决方案

，但是如果你想让地图适合多边形：

  map.fitBounds（poly.getBounds（））; 
  

（ doc ）。

I want generate a html file including Leaflet library to show an OpenStreetMap view with a polygon. The polygon on the map should be centered. To do so i followed this discussion, but its still unclear to me, how to center an arbitrary polygon and autozoom it. Autozoom means to me, that the polygon is completly in the visible map excerpt and fills it.

As example this would be the desired result:

This is my code so far:

    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);
    }

Especially it would be great, if there are "onboard" methods of Leaflet that i can use. How to calculate the center of a polygon is clear to (e.g. here) but maybe there are already implemnented methods i can use.

Solution:

// 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

解决方案

Not exactly centering, but if you want the map to be fitted to the polygon:

map.fitBounds(poly.getBounds());

(doc).

这篇关于单张OSM：多边形上的中心mapview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！