openlayers 3 缩放到组合范围

Question

我正在使用 openlayers 3 创建一个顶部带有矢量特征的地图。到目前为止，一切都很好。

我有几个矢量图层，分组在一个名为 projecten 的变量中。

var projecten = new ol.layer.Group({

            title: 'Projecten',
            layers: [

                new ol.layer.Vector({
                title: 'EVZ Den Dungen',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */ ({
                              object: EVZDenDungen,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'EVZ Croy',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */ ({
                              object: EVZCroy,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'Natuurcompensatie Gasselsbroek',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */ ({
                              object: NatuurcompensatieGasselsbroek,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'Ebben',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */ ({
                              object: Ebben,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                }),

                new ol.layer.Vector({
                title: 'Zionsburg',
                source: new ol.source.GeoJSON(
                            /** @type {olx.source.GeoJSONOptions} */ ({
                              object: Zionsburg,
                              projection: 'EPSG:3857'
                        })),
                style: function(feature, resolution) {
                    return lookup[feature.get('landschapselement')];
                }
                })


            ]
})

现在我想以某种方式循环遍历 projecten 变量，逐层循环，获取每个要素层的范围，并在到达最后一层时停止。然后我想缩放到这个组合范围。

这是我的基本设置（我不擅长 javascript 和循环）：

projecten.getLayers()
     for (var i = 0, ii = layers.length; i < ii; ++i) {
         layer = layers[i];
         ol.extent.boundingExtend(extent, layer.getBounds());
     }
    map.getView().fitExtent(extent,map.getSize());

关于如何让它工作的任何想法？

Answer 1

你应该可以做到这一点：

var extent = ol.extent.createEmpty();
projecten.getLayers().forEach(function(layer) {
  ol.extent.extend(extent, layer.getSource().getExtent());
});
map.getView().fitExtent(extent, map.getSize());

使用 ol.extent.createEmpty() function to initialize your extent. Then loop through the collection of layers and use ol.extent.extend() 生成包含所有矢量源中所有要素的范围。最后把地图视图适配到这个程度。

这里有几点需要注意。 group.getLayers() method returns an ol.Collection of layers. This is similar to a regular JavaScript Array except that it is observable. You can use the collection.forEach() 方法遍历集合中的每一层。

另请注意，您应该调用 source.getExtent() 以获取源中所有当前加载的要素的范围。

最后，上面的链接与 3.5.0 及更高版本相关。您需要调整代码以使用 ol.source.Vector 对象而不是实验性（现已删除）ol.source.GeoJSON 对象。有关升级到新向量 API 的详细信息，请参阅 3.5.0 release notes。

openlayers 3 缩放到组合范围

openlayers 3 zoom to combined extent

layer

openlayers-3