javascript - Openlayers - 缩放至图层

Question

我创建了一张 map ，其中包含来自 OpenLayers、Openstreetmap 和 BingMaps 的不同图层。

现在我想添加功能，如果输入了新的搜索， map 应该缩放到 map 上输入的搜索结果。目前，搜索结果已输入到图层中，但不会缩放到结果。谢谢。

这是我的 main.js 中的代码。

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {fromLonLat, toLonLat} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// define the map
const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([16.37, 48.2]),
    zoom: 13
  })
});

sync(map);

//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(255,255,255,0.4)'
    }),
    stroke: new Stroke({
      color: '#3399CC',
      width: 1.25
    }),
    radius: 15
  })
}));
var element = document.getElementById('search');  
element.addEventListener('keydown', listenerFunction);

function listenerFunction(event) {
  console.log(event);
  console.log(event.keyCode);
  if (event.keyCode === 13) {

    const xhr = new XMLHttpRequest;
    xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
    xhr.onload = function() {
      const json = JSON.parse(xhr.responseText);
      const geoJsonReader = new GeoJSON({
        featureProjection: 'EPSG:3857'
      });  
      searchResultSource.clear(); 
      const features = geoJsonReader.readFeatures(json);
      console.log(features);
      searchResultSource.addFeatures(features);
    };
    xhr.send();
  }
}

var ZoomLayer = new ol.ZoomLayer({
  layer: searchResultLayer,
  colName: 'SearchLayer',
  zoom: 10,
  collapsed: true,
  map: Map
  zoomTo: layer(5,xy)
});

//OpenStreetMap
const OSMbaseLayer = new TileLayer({
    type: 'base',
    source: new OSM()
}); 

// Statellit
const satellitLayer = new TileLayer({
    source: new XYZ ({
    attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
    attributionsCollapsible: false,
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    maxZoom: 30
    })
});

//shape
const parkLayer = new VectorLayer({
    source: new Vector({ 
        url: 'data/park1.geojson',
        format: new GeoJSON()
    })
});

// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);   
map.addLayer(parkLayer);  


const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function(event) {
  //contr.style.color = 'ffffff';
  //Andere Layer entfernen
  map.removeLayer(satellitLayer);
  map.removeLayer(searchResultLayer);
   //OSM Layer hinzufügen
  map.addLayer(OSMbaseLayer);
  map.addLayer(searchResultLayer);
});

// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function(event) {
  //Andere Layer entfernen
  map.removeLayer(OSMbaseLayer);
  map.removeLayer(searchResultLayer);
  //Satelliten Layer hinzufügen
  map.addLayer(satellitLayer);
  map.addLayer(searchResultLayer);  
 });

Answer 1

当向源中添加要素时，您可以使 View 适合源范围

searchResultSource.on('addfeature', function() {
  map.getView().fit(searchResultSource.getExtent());
});