OpenLayers3實現圖層控制元件功能
本文例項為大家分享了OpenLayers3實現圖層控制元件的具體程式碼,供大家參考,具體內容如下
1. 前言
在實際應用中,我們將載入到地圖容器中的圖層通過圖層顯示的控制元件功能,來顯示載入的圖層,便於使用者檢視與操作,OpenLayers 3 中並沒有提供類似的圖層控制元件,但是他的 API 卻提供了該功能的相關介面,我們可以通過呼叫相關的介面,實現該功能。
2. 實現思路
(1)新建一個網頁,參考前面的文章載入OSM瓦片圖層的方法,載入OSM瓦片、MapQuest 影像、JSON 與KML 格式的向量圖。
(2)在地圖容器中新建一個div 層,用於顯示圖層列表,在圖層列表div 中,新增一個列表頭部div 、圖層列表 ul ,並通過 css 控制他的樣式。
3. 實現圖層列表功能的程式碼如下:
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>載入圖層控制元件</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/ol.css" rel="external nofollow" > <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="css/ZoomSlider.css" rel="external nofollow" > <script src="js/ol.js"></script> <script src="js/loadLayersControl.js"></script> <style> body,html,div,ul,li,iframe,p,img { border: none; padding: 0; margin: 0; font-size: 14px; font-family: "微軟雅黑"; } #map { width: 100%; height: 100%; position: absolute; } /* 圖層控制元件層樣式設定 */ .layerControl { position: absolute; bottom: 5px; min-width: 200px; max-height: 200px; right: 0px; top: 5px; z-index: 2001; /*在地圖容器中的層,要設定z-index的值讓其顯示在地圖上層*/ color: #ffffff; background-color: #4c4e5a; border-width: 10px; /*邊緣的寬度*/ border-radius: 10px; /*圓角的大小 */ border-color: #000 #000 #000 #000; /*邊框顏色*/ } .layerControl .title { font-weight: bold; font-size: 15px; margin: 10px; } .layerTree li { list-style: none; margin: 5px 10px; } /* 滑鼠位置控制元件層樣式設定 */ #mouse-position { float: left; position: absolute; bottom: 5px; width: 200px; height: 20px; z-index: 2000; /*在地圖容器中的層,要設定z-index的值讓其顯示在地圖上層*/ } </style> </head> <body onload="init()"> <div id="map"> <div id="layerControl" class="layerControl"> <div class="title"><label>圖層列表</label></div> <ul id="layerTree" class="layerTree"></ul> </div> </div> </body> </html>
程式碼解析:
建立一個id為 layerControl 的 div 作為顯示圖層列表,通過設定 z-index 讓其顯示到地圖的上方,以及通過圖層列表容器中新建一個列表(id為layerTree的ul)來承載地圖容器中的圖層。列表中的 li 是通過程式碼動態建立的,在html中只建立ul。
js程式碼 :
var layer = new Array(); //map中的圖層陣列 var layerName = new Array(); //圖層名稱陣列 var layerVisibility = new Array(); //圖層可見屬性陣列 /** * 載入圖層列表資料 * @param {ol.Map} map 地圖物件 * @param {string} id 圖層列表容器ID */ function loadLayersControl(map,id) { var treeContent = document.getElementById(id); //圖層目錄容器 var layers = map.getLayers(); //獲取地圖中所有圖層 for (var i = 0; i < layers.getLength(); i++) { //獲取每個圖層的名稱、是否可見屬性 layer[i] = layers.item(i); layerName[i] = layer[i].get('name'); layerVisibility[i] = layer[i].getVisible(); //新增li元素,用來承載圖層項 var elementLi = document.createElement('li'); treeContent.appendChild(elementLi); // 新增子節點 //建立複選框元素 var elementInput = document.createElement('input'); elementInput.type = "checkbox"; elementInput.name = "layers"; elementLi.appendChild(elementInput); //建立label元素 var elementLable = document.createElement('label'); elementLable.className = "layer"; //設定圖層名稱 setInnerText(elementLable,layerName[i]); elementLi.appendChild(elementLable); //設定圖層預設顯示狀態 if (layerVisibility[i]) { elementInput.checked = true; } addChangeEvent(elementInput,layer[i]); //為checkbox新增變更事件 } } /** * 為checkbox元素繫結變更事件 * @param {input} element checkbox元素 * @param {ol.layer.Layer} layer 圖層物件 */ function addChangeEvent(element,layer) { element.onclick = function() { if (element.checked) { layer.setVisible(true); //顯示圖層 } else { layer.setVisible(false); //不顯示圖層 } }; } /** * 動態設定元素文字內容(相容) */ function setInnerText(element,text) { if (typeof element.textContent == "string") { element.textContent = text; } else { element.innerText = text; } } function init() { //例項化Map物件載入地圖 var map = new ol.Map({ target: 'map',//地圖容器div的ID //地圖容器中載入的圖層 layers: [ //載入瓦片圖層資料 new ol.layer.Tile({ source: new ol.source.OSM(),name: '世界地圖(OSM瓦片)' }),new ol.layer.Vector({ source: new ol.source.Vector({ url: 'data/geojson/countries.geojson',format: new ol.format.GeoJSON() }),name: '國界(Json格式向量圖)' }),new ol.layer.Vector({ source: new ol.source.Vector({ url: 'data/kml/2012-02-10.kml',format: new ol.format.KML({ extractStyles: false }) }),name: '點(KML格式向量圖)' }) ],//地圖檢視設定 view: new ol.View({ center: [0,0],//地圖初始中心點 zoom: 2 //地圖初始顯示級別 }) }); //例項化ZoomSlider控制元件並載入到地圖容器中 var zoomslider = new ol.control.ZoomSlider(); map.addControl(zoomslider); //例項化zoomToExent控制元件並載入到地圖容器中 var zoomToExent = new ol.control.ZoomToExtent({ extend: [13100000,4290000,13200000,5210000 ] }); map.addControl(zoomToExent); //載入圖層列表資料 loadLayersControl(map,"layerTree"); }
程式碼解析:
(1)首先建立一個地圖容器,分別載入 OSM 瓦片圖層、JSON 與 KML 格式的向量圖,並在初始化這些圖層時,新增一個 name 屬性,用於說明當前圖層的名稱。
(2)封裝了一個功能函式 loadLayersControl ,用於載入圖層了列表,需要傳入兩個引數,map 與 id 分別為地圖容器物件、圖層列表 id ,實現思路:
①呼叫 Map 物件的 getLayers 方法獲取當前地圖容器中載入的所有圖層,存入圖層陣列layer中。
②遍歷這些圖層,通過圖層物件呼叫 get(‘name') 得到圖層名,並存入圖層名稱陣列 layerName 中,呼叫 getVisible() 得到圖層的可見屬性,並存入到圖層可見性陣列中(layerVisibility)
③分別新增 li 元素,用來承載圖層項,在 li 中建立複選框元素(checkbox)控制圖層顯示,建立 label 元素顯示圖層名稱。其中,通過 addChangeEvent 方法為checkbox 元素繫結變更事件,在事件中實現通過 Layer 的 setVisible 方法控制圖層的顯示。
(3)在 head 標籤中,通過 script 標籤引入 loadLayersControl.js,實現動態載入圖層列表。
4. 實現效果如下:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。