OpenLayers實現圖層切換控制元件
阿新 • • 發佈：2020-09-27
OpenLayers並沒有封裝圖層切換的控制元件，所以我們需要自己來實現圖層控制元件。
自定義圖層切換控制元件的原理很簡單：顯示某個圖層時，將其他圖層隱藏。
完整程式碼：
layerSwitch.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圖層切換控制元件</title>
<link rel="stylesheet" href="../v5.3.0/css/ol.css" />
<script src="../v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="controls">
<input type="checkbox" id="osm" checked />OpenStreetMap
<input type="checkbox" id="bingmap" />Bing Map
<input type="checkbox" id="stamen" />Stamen Map
</div>
<div id="map"></div>
<script>
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;
}
}
});
</script>
</body>
</html>實現效果：
程式碼整體邏輯是很簡單的，其中使用了事件委託這一機制來繫結事件，事件委託可以減少事件繫結導致的記憶體消耗，所以平時開發時推薦多使用事件委託。
另外，map.getLayers()返回一個ol.Collection類的物件，該物件中包含了地圖中的三個圖層物件（ol.layer.Tile），可以為item()方法傳入對應索引來取出對應圖層物件。
最後，ol.layer.Tile類的setVisible()方法可以設定圖層的顯示與隱藏。
怎麼樣，自己實現一個圖層切換控制元件是不是很簡單呢？
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。