openlayer 图层上下_OpenLayers实现图层切换控件
OpenLayers并沒有封裝圖層切換的控件，所以我們需要自己來實現圖層控件。
自定義圖層切換控件的原理很簡單：顯示某個圖層時，將其他圖層隱藏。
完整代碼：
layerSwitch.html:
圖層切換控件OpenStreetMap
Bing Map
Stamen Map
let map = new ol.Map({
target: 'map', // 關聯到對應的div容器
layers: [
new ol.layer.Tile({ // OpenStreetMap圖層
source: new ol.source.OSM()
}),
new ol.layer.Tile({ // Bing Map圖層
source: new ol.source.BingMaps({
key: '略', // 可以自行到Bing Map官網申請key
imagerySet: 'Aerial'
}),
visible: false // 先隱藏該圖層
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
}),
visible: false // 先隱藏該圖層
})
],
view: new ol.View({ // 地圖視圖
projection: 'EPSG:3857',
center: [0, 0],
zoom: 0
})
});
let controls = document.getElementById('controls');
// 事件委托
controls.addEventListener('click', (event) => {
if(event.target.checked){ // 如果選中某一復選框
// 通過DOM元素的id值來判斷應該對哪個圖層進行顯示
switch(event.target.id){
case "osm":
map.getLayers().item(0).setVisible(true);
break;
case "bingmap":
map.getLayers().item(1).setVisible(true);
break;
case "stamen":
map.getLayers().item(2).setVisible(true);
break;
default: break;
}
}else{ // 如果取消某一復選框
// 通過DOM元素的id值來判斷應該對哪個圖層進行隱藏
switch(event.target.id){
case "osm":
map.getLayers().item(0).setVisible(false);
break;
case "bingmap":
map.getLayers().item(1).setVisible(false);
case "stamen":
map.getLayers().item(2).setVisible(false);
default: break;
}
}
});
實現效果：
代碼整體邏輯是很簡單的，其中使用了事件委托這一機制來綁定事件，事件委托可以減少事件綁定導致的內存消耗，所以平時開發時推薦多使用事件委托。
另外，map.getLayers()返回一個ol.Collection類的對象，該對象中包含了地圖中的三個圖層對象(ol.layer.Tile)，可以為item()方法傳入對應索引來取出對應圖層對象。
最后，ol.layer.Tile類的setVisible()方法可以設置圖層的顯示與隱藏。
怎么樣，自己實現一個圖層切換控件是不是很簡單呢？
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的openlayer 图层上下_OpenLayers实现图层切换控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 黄文俊：Serverless小程序后端技
- 下一篇： 14.安全