在openlayers官网示例Constrained Extent的官网实例中,演示了如何实现设置地图的拖动范围。
new View的时候设置extent为设置一个范围。缩小的时候就会发现不能拖到extent以外的地区。
在view上设置Extent
我们以给view设置中心点是北京,范围是中国边界。
在第一段代码中zoom设置为0,extent不设置,地图展示整个世界范围地图。
在第二段代码中zoom设置为0,extent设置为中国边界,地图中显示中国边界,拖动地图无法显示中国边界之外的部分。
const view = new View({
projection: "EPSG:4326",
center: [116.389, 39.903],
zoom: 0,
});
const view = new View({
projection: "EPSG:4326",
center: [116.389, 39.903],
zoom: 0,
extent: [73.66, 3.86, 135.05, 53.55], //中国边界
});
在下面的一段代码中zoom设置为9,在这缩放比例下extent设置的范围不能全部显示出来,只能加载以北京为中心的部分地图。这是拖动地图,可以加载中国境内的其他部分。但是当拖动范围超过extent的值,地图可能短暂地显示出这个范围之外的图层,立刻有刷新到extent限定的范围。
const view = new View({
projection: "EPSG:4326",
center: [116.389, 39.903],
zoom: 9,
extent: [73.66, 3.86, 135.05, 53.55], //中国边界
});
在layer上设置extent
在如下代码中表示overlay这个layer上设置extent位印度的一部分。则overlay只能展示extent部分。可以参加例子layer-extent.html
const overlay = new TileLayer({
extent: transform([68.17665, 7.96553, 97.40256, 35.49401]),
source: obj2?.xyzSource
});