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发行说明.