[Ej] JSTS zoom features seleccionados

by deivil79

HTML

<script src="http://mapea4-sigc.juntadeandalucia.es/js/mapea.ol.min.js"></script>
<script src="http://mapea4-sigc.juntadeandalucia.es/js/configuration.js"></script>
<link rel="stylesheet" href="http://mapea4-sigc.juntadeandalucia.es/assets/css/mapea.ol.min.css">
<button onclick="zoomFeatures()">
Zoom selección
</button>
<div id="map"></div>

CSS

html,
body,
#map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var elementosSeleccionados = [];
 
let layerOSM = new M.layer.OSM();
 
var mapajs = new M.map({
  container: "map",
  layers: [layerOSM],
  bbox: [-776714, 4336091, -200909, 4619579],
  resolutions: [611.50,305.75,152.87,76.437,38.219,19.109,9.5546,4.7773,2.3887,1.1943,0.5972,0.2986,0.1493],
  controls: ["layerswitcher", "mouse"],
  projection: "EPSG:3857*m"
});


 //GeoJSON servido
let rutas = new M.layer.WFS({
  url: "https://www.iaph.es/ide/rutas/wfs?",
  name: "rutas:rutas",
  legend: "Rutas Culturales",
  geometry: 'MLINE',
  extract: true
});
 
// Ajustamos estilo de la capa de rutas culturales
let estiloLinea = new M.style.Line({
  // borde de la linea
  'stroke': {
    // color del borde
    color: '#ff8000',
    // grosor del borde en pixeles
    width: 3,
  },
  // Relleno de la linea
  'fill': {
    color: '#ff8000',
    width: 3,
    opacity: 0,
  },
});

// Aplicamos el estilo definido
rutas.setStyle(estiloLinea);
mapajs.addLayers(rutas);


 // 1.- Cuando se ha cargado la capa WFS, hacemos zoom a la misma
 rutas.on(M.evt.LOAD, function() {
   mapajs.setBbox(rutas.getFeaturesExtent());
 });

 // Cuando se selecciona un feature hacemos zoom
 rutas.on(M.evt.SELECT_FEATURES, function(features) {
 		// Cambiamos el color de los seleccionados
    features.forEach(function(f){
    	f.setStyle(seleccionado);
      elementosSeleccionados.push(f);
    });
    
		
 });

 mapajs.addLayers([rutas]);
 
 // 2.- Cuando queremos hacer zoom a los seleccionados
 function zoomFeatures(features) {
   let extent = M.impl.utils.getFeaturesExtent(elementosSeleccionados);
		mapajs.setBbox(extent);
 }