web-dev-qa-db-ja.com

OpenLayers 3ベクターレイヤーのすべての機能の範囲？

OpenLayers 3マップにベースレイヤーとベクターレイヤーがあります。

this.topoLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: style
});

var baseLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://[…]/{z}/{x}/{y}.png',
        crossOrigin: 'null'
    })
});

this.map = new ol.Map({
    target: 'map',
    layers: [baseLayer, this.topoLayer],
    view: new ol.View2D({
        center: ol.proj.transform([11.38,  48.54], this.options.markerEPSG, this.options.mapEPSG),
        zoom: 5,
    }),
});

ユーザーの操作に応じて、ベクターレイヤーにいくつかの機能を追加および削除します。新しい機能を追加する関数は次のとおりです。

  var feature = new ol.Feature({
        topo: topo,
        selected: false,
        geometry: new ol.geom.Point(ol.proj.transform(location, this.options.markerEPSG, this.options.mapEPSG)),
  });

  this.topoLayer.getSource().addFeatures([feature]);

新しい機能を追加または削除した後、機能に合わせてマップを自動的にズームおよび画面移動します。古いOpenLayers APIでは、ベクターレイヤーにgetDataExtent関数があり、表示されているすべてのフィーチャの周囲の「境界ボックス」を取得していました。しかし、私はこれを新しいAPIでどのように行うのか疑問に思います。

javascriptopenlayersopenlayers-3
19
SomeBdyElse

バージョン3.7では、ol.View.fitExtent()およびol.View.fitGeometry()が単一の関数fitに統合されました。

したがって、コードは次のとおりです。

 var extent = myLayer.getSource().getExtent();
 map.getView().fit(extent, map.getSize());
23
Mister Smith

タイラー・デウィットの答えに基づいて、次のようなことができるはずです：

var view = yourmap.getView();
var view2D = view.getView2D();
var extent = yourlayer.getSource().getExtent();

view2D.fitExtent(extent, yourmap.getSize());

編集：ティムとスチュアートのように、上記はもう機能しないと言いました。代わりに次のようにしてください。

 var extent = yourlayer.getSource().getExtent();
 map.getView().fitExtent(extent, map.getSize());
8
Danny Hoek
var source = layer.getSource();
goog.events.listen(source, ol.source.VectorEventType.ADD, function(evt) {
     // taken from ol/source/vectorsource.js
     var extent = ol.extent.createEmpty();
     var geometry = null;
     var feature;
     var features = source.getFeatures().getArray();
     for (var i = 0, ii = features.length; i < ii; ++i) {
         feature = features[i];
         geometry = feature.getGeometry();
         if (!goog.isNull(geometry)) {
               ol.extent.extend(extent, geometry.getExtent());
     }
     // here you should have your extent
    }
}, false, this);

未テスト。

もっと洗練された方法があるはずですが、今どこにあるかわかりません。

3
Jachym

まだコメントできないので、別の回答を投稿する必要があります。DannyHoekの回答はもう正しくありません。更新は次のとおりです。

var view = yourmap.getView();
var extent = yourlayer.getSource().getExtent();

view.fitExtent(extent, yourmap.getSize());

基本的に、その2Dプロップはなくなっているようです。

2
Stuart Allen

_ol.source_にgetExtent()関数があるので、<layer>.getSource().getExtent()を呼び出すことができます。ただし、マップをそのレベルにズームする方法がわかりません。 <map>.zoomToExtent(extent)は存在しません。

0
Tyler DeWitt