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


            ]
})

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

这是我的基本设置（我不擅长 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() 函数初始化您的范围。然后遍历图层集合并使用ol.extent.extend() 生成包含所有矢量源中所有特征的范围。最后，将地图视图调整到这个程度。

这里有几点需要注意。 group.getLayers() 方法返回层的ol.Collection。这类似于常规的 JavaScript Array，只是它是可观察的。您可以使用collection.forEach() 方法遍历集合中的每一层。

还请注意，您应该调用source.getExtent() 来获取源中所有当前加载的功能的范围。

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