OpenLayers：将 map 锁定到向量的范围

Question

我正在学习如何使用 OpenLayers 在 JavaScript 中创建一个库。 通常我使用下面的代码将我的 map 锁定在手动传递的矢量范围上。

var minX= 3.0025038498794938;
var minY= 47.7706339888675302;
var maxX= 5.1702255722362533;
var maxY= 49.5690401585264695;
var maxExtent = [minX, minY, maxX, maxY];
var boundary = ol.proj.transformExtent(maxExtent, 'EPSG:4326', 'EPSG:3857');
var center = ol.proj.transform([4.0863647111, 48.6698370737], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({
  extent: boundary,
  center: center,
  zoom: 9,
  maxZoom: 18,
  minZoom: 8,
});
map.setView(view);

我的目标是使用相同的哲学，但使用特定 function 内的矢量范围。我能够在矢量扩展的缩放上加载 map：

function getPolygonsExtent() {
  vectorsLayer.getSource().once('change', function(evt) {
    if (vectorsLayer.getSource().getState() === 'ready') {
      if (vectorsLayer.getSource().getFeatures().length > 0) {
        extent = vectorsLayer.getSource().getExtent();
        options = {
          size: map.getSize(),
          padding: [0, 0, 0, 0],
        }
        map.getView().fit(extent, options);
      }
    }
  });
};

但我不知道如何才能实现我的目标。 我以为有一个 function 像map.getView().setExtent(extent); ，但事实并非如此。 有什么建议么？

Answer 1

没有setExtent()方法，因此您需要创建一个新视图

  map.getView().fit(extent, options);
  var newView = new ol.View({
    extent: extent,
    showFullExtent: true,
    center: map.getView().getCenter(),
    zoom: map.getView().getZoom(),
    maxZoom: 18,
    minZoom: 8,
 });
 map.setView(newView);

fit()方法适合 map 内的范围，但默认情况下，范围选项将 map 限制在范围内，使用showFullExtent以获得与fit()类似的行为。 如果您的适合选项包括一个duration ，您还需要一个callback来更新视图，当它在内联代码中完成时。