在openlayers官網(wǎng)示例Constrained Extent的官網(wǎng)實(shí)例中，演示了如何實(shí)現(xiàn)設(shè)置地圖的拖動(dòng)范圍诫尽。
new View的時(shí)候設(shè)置extent為設(shè)置一個(gè)范圍禀酱。縮小的時(shí)候就會(huì)發(fā)現(xiàn)不能拖到extent以外的地區(qū)牧嫉。
在view上設(shè)置Extent
我們以給view設(shè)置中心點(diǎn)是北京剂跟，范圍是中國(guó)邊界。
在第一段代碼中zoom設(shè)置為0酣藻，extent不設(shè)置曹洽，地圖展示整個(gè)世界范圍地圖。
在第二段代碼中zoom設(shè)置為0辽剧，extent設(shè)置為中國(guó)邊界送淆，地圖中顯示中國(guó)邊界，拖動(dòng)地圖無(wú)法顯示中國(guó)邊界之外的部分怕轿。
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], //中國(guó)邊界
});
在下面的一段代碼中zoom設(shè)置為9偷崩，在這縮放比例下extent設(shè)置的范圍不能全部顯示出來(lái)，只能加載以北京為中心的部分地圖撞羽。這是拖動(dòng)地圖阐斜，可以加載中國(guó)境內(nèi)的其他部分。但是當(dāng)拖動(dòng)范圍超過(guò)extent的值诀紊，地圖可能短暫地顯示出這個(gè)范圍之外的圖層谒出，立刻有刷新到extent限定的范圍。
const view = new View({
projection: "EPSG:4326",
center: [116.389, 39.903],
zoom: 9,
extent: [73.66, 3.86, 135.05, 53.55], //中國(guó)邊界
});
在layer上設(shè)置extent
在如下代碼中表示overlay這個(gè)layer上設(shè)置extent位印度的一部分邻奠。則overlay只能展示extent部分到推。可以參加例子layer-extent.html
const overlay = new TileLayer({
extent: transform([68.17665, 7.96553, 97.40256, 35.49401])惕澎，
source: obj2?.xyzSource
});
