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

缩放扩展到多个KML的多层边界

1 个答案: