javascript - examples - OpenLayers 3 ¿Extensión de todas las características en una capa vectorial?

openlayers marker example

Question

Tengo un mapa de OpenLayers 3 con una capa base y una capa vectorial.

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,
    }),
});

Tras la interacción del usuario, agrego y elimino varias características de la capa vectorial. Aquí está la función que agrega una nueva característica:

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

Después de agregar / eliminar una nueva función, me gustaría ampliar y desplazar el mapa automáticamente para que se ajuste a mis funciones. En la antigua API de OpenLayers, estaba la función getDataExtent en capas vectoriales para recuperar un "cuadro delimitador" alrededor de todas las funciones mostradas. Pero me pregunto cómo hacer esto con la nueva API.

Answer 1

Como todavía no puedo comentar, tendré que publicar otra respuesta: la respuesta de Danny Hoek ya no es correcta, aquí está la actualización:

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

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

Básicamente ese soporte 2D parece haberse ido.

Answer 2

En la versión 3.7, ol.View.fitExtent() y ol.View.fitGeometry() se han unificado en una sola función: fit .

Así que ahora el código es:

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

Answer 3

Hay una función getExtent() en ol.source ahora, así que puedo llamar a <layer>.getSource().getExtent() . Sin embargo, no puedo averiguar cómo hacer que mi mapa se acerque a ese nivel. <map>.zoomToExtent(extent) ya no existe.

Answer 4

Según la respuesta de Tyler DeWitt, deberías poder hacer algo como esto:

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

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

Edit: Como Tim y Stuart dijeron que lo anterior ya no funciona. Lo siguiente debería hacer el truco en su lugar:

 var extent = yourlayer.getSource().getExtent();
 map.getView().fitExtent(extent, map.getSize());

Answer 5

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);

No probado

Debería haber una forma más elegante, pero no estoy seguro en este momento, dónde encontrarlo.