Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/431.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript OpenLayers-基于多个多边形设置中心和缩放_Javascript_Openlayers - Fatal编程技术网

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

Javascript OpenLayers-基于多个多边形设置中心和缩放,javascript,openlayers,Javascript,Openlayers,我正在使用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({

我正在使用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 ***/

基于我所拥有的代码的一些帮助?

您可以在添加功能时构建一个组合范围,然后使视图适合该范围

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