缩放扩展至多个 KML 的多图层边界

Question

我有一个使用 openlayers 5 的网页，并且有几个层，每个层都提取一个 kml 的数据。如何放大并在屏幕上显示所有 kmls

 var vector1 = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'vector1.kml',
      format: new ol.format.KML({
        extractStyles: true
      })
    }),
    style: styleFunction
  });
  var vector2 = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'vector2.kml',
      format: new ol.format.KML({
        extractStyles: true
      })
    }),
    style: styleFunction
  });

var raster = new ol.layer.Tile({ // TileLayer
    source: new ol.source.Stamen({
      layer: 'toner'
    })
  });
  var view = new ol.View({
    center: [0, 0],
    zoom: 1  // 14
  });

  var Layers =  [raster,vector1,vector2,vector3,vector4];
  var map = new ol.Map({
    layers: Layers,
    target: 'map',
    view: view
  });

我有一个使用 openlayers 5 的网页，它有几个层，每个层都提取一个 kml 的数据。如何放大并在屏幕上显示所有 kmls

Answer 1

它不会非常有效，因为源将以随机顺序异步加载，并且没有事件指示所有要素都已添加，每个要素都会触发一个事件，但在加载时构建和拟合范围最终会到达那里

var Layers = [raster,vector1,vector2,vector3,vector4];
var extent = ol.extent.createEmpty();
Layers.slice(1).forEach(function(layer){
  layer.getSource().on('addfeature',function(){
    ol.extent.extend(extent, layer.getSource().getExtent());
    map.getView().fit(extent, { size: map.getSize() });
  });
});