web-dev-qa-db-ja.com

openlayers3を組み合わせた範囲にズーム

私はopenlayers3を使用して、上部にベクトルフィーチャを含むマップを作成しています。ここまでは順調ですね。

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


            ]
})

ここで、どういうわけか、プロジェクト変数をループし、そのレイヤーを1つずつループし、各フィーチャレイヤーの範囲を取得し、最後のレイヤーに到達したときに停止したいと思います。次に、この組み合わせた範囲にズームしたいと思います。

これは私の基本的な設定です（私は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());

これを機能させる方法について何かアイデアはありますか？

layeropenlayers-3
13
user1697335

あなたはこれを行うことができるはずです：

_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へのアップグレードの詳細については、 .5.0リリースノート を参照してください。

24
Tim Schaub