开放图层：将地图锁定到矢量的范围

Question

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

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

但我不知道怎样才能达到目标。我以为有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()方法适用于地图内的范围，但默认情况下，范围选项将地图约束在范围内，使用showFullExtent执行与fit()类似的行为。如果您的适合选项包括duration，那么当视图在内联代码中完成时，您还需要callback来更新视图。