OpenLayers

Question

我正在使用 openlayers 6.5，我想设置地图的中心并适合绘制的所有多边形。

这是我的资料：

/*** Set the map ***/
var map = new ol.Map({
    target: map_element,
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([
            '24.6859325',
            '45.9852429',
        ]),
        zoom: 6
    })
});

/*** Set counties polygon on the map ***/
for(var county_id in map_json_data)
{
    map_json_data[county_id]['google_map_county_polygon'] = new ol.Feature({
        geometry: new ol.geom.Polygon([map_json_data[county_id]['county_polygon_coordinates']])
    });
    
    map_json_data[county_id]['google_map_county_polygon'].getGeometry().transform('EPSG:4326', 'EPSG:3857');
    
    map.addLayer(
        new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [ map_json_data[county_id]['google_map_county_polygon'] ]
            })
        })
    );
}

/*** Here I want to set all polygons to be centered on the map and to fill the maximum zoom ***/

一些基于我的代码的帮助？

Answer 1

您可以在添加要素时建立组合范围，然后使视图适合该范围

var extent = ol.extent.createEmpty();

/*** Set counties polygon on the map ***/
for(var county_id in map_json_data)
{
    map_json_data[county_id]['google_map_county_polygon'] = new ol.Feature({
        geometry: new ol.geom.Polygon([map_json_data[county_id]['county_polygon_coordinates']])
    });
    
    map_json_data[county_id]['google_map_county_polygon'].getGeometry().transform('EPSG:4326', 'EPSG:3857');
    ol.extent.extend(extent, map_json_data[county_id]['google_map_county_polygon'].getGeometry().getExtent());
    
    map.addLayer(
        new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [ map_json_data[county_id]['google_map_county_polygon'] ]
            })
        })
    );
}

map.getView().fit(extent);

如果您能够将所有多边形都放在一个矢量图层中，它会变得更简单

var vectorSource = new ol.source.Vector();
map.addLayer(
    new ol.layer.Vector({
        source: vectorSource
    })
);

/*** Set counties polygon on the map ***/
for(var county_id in map_json_data)
{
    map_json_data[county_id]['google_map_county_polygon'] = new ol.Feature({
        geometry: new ol.geom.Polygon([map_json_data[county_id]['county_polygon_coordinates']])
    });
    
    map_json_data[county_id]['google_map_county_polygon'].getGeometry().transform('EPSG:4326', 'EPSG:3857');

    vectorSource.addFeature( map_json_data[county_id]['google_map_county_polygon']);
}

map.getView().fit(vectorSource.getExtent());

OpenLayers - 基于多个多边形设置中心和缩放

OpenLayers - Set center and zoom based on multiple polygons

javascript