OpenLayers3實(shí)現(xiàn)圖層控件功能

更新時(shí)間：2020年09月25日 16:31:23 作者：jiegsier

這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)圖層控件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了OpenLayers3實(shí)現(xiàn)圖層控件的具體代碼，供大家參考，具體內(nèi)容如下

1. 前言

在實(shí)際應(yīng)用中，我們將加載到地圖容器中的圖層通過(guò)圖層顯示的控件功能，來(lái)顯示加載的圖層，便于用戶查看與操作，OpenLayers 3 中并沒(méi)有提供類似的圖層控件，但是他的 API 卻提供了該功能的相關(guān)接口，我們可以通過(guò)調(diào)用相關(guān)的接口，實(shí)現(xiàn)該功能。

2. 實(shí)現(xiàn)思路

（1）新建一個(gè)網(wǎng)頁(yè)，參考前面的文章加載OSM瓦片圖層的方法，加載OSM瓦片、MapQuest 影像、JSON 與KML 格式的矢量圖。
（2）在地圖容器中新建一個(gè)div 層，用于顯示圖層列表，在圖層列表div 中，添加一個(gè)列表頭部div 、圖層列表 ul ，并通過(guò) css 控制他的樣式。
（3）編寫加載圖層列表的功能函數(shù)，在地圖加載后，調(diào)用該方法，實(shí)現(xiàn)圖層列表的展示。

3. 實(shí)現(xiàn)圖層列表功能的代碼如下：

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" >
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <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;
 }
 /* 圖層控件層樣式設(shè)置 */

 .layerControl {
  position: absolute;
  bottom: 5px;
  min-width: 200px;
  max-height: 200px;
  right: 0px;
  top: 5px;
  z-index: 2001;
  /*在地圖容器中的層，要設(shè)置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;
 }
 /* 鼠標(biāo)位置控件層樣式設(shè)置 */

 #mouse-position {
  float: left;
  position: absolute;
  bottom: 5px;
  width: 200px;
  height: 20px;
  z-index: 2000;
  /*在地圖容器中的層，要設(shè)置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>

代碼解析：

創(chuàng)建一個(gè)id為 layerControl 的 div 作為顯示圖層列表，通過(guò)設(shè)置 z-index 讓其顯示到地圖的上方，以及通過(guò)圖層列表容器中新建一個(gè)列表（id為layerTree的ul）來(lái)承載地圖容器中的圖層。列表中的 li 是通過(guò)代碼動(dòng)態(tài)創(chuàng)建的，在html中只創(chuàng)建ul。

js代碼：

var layer = new Array(); //map中的圖層數(shù)組
var layerName = new Array(); //圖層名稱數(shù)組
var layerVisibility = new Array(); //圖層可見(jiàn)屬性數(shù)組

/**
 * 加載圖層列表數(shù)據(jù)
 * @param {ol.Map} map 地圖對(duì)象
 * @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++) {
 //獲取每個(gè)圖層的名稱、是否可見(jiàn)屬性
 layer[i] = layers.item(i);
 layerName[i] = layer[i].get('name');
 layerVisibility[i] = layer[i].getVisible();

 //新增li元素，用來(lái)承載圖層項(xiàng)
 var elementLi = document.createElement('li');
 treeContent.appendChild(elementLi); // 添加子節(jié)點(diǎn)
 //創(chuàng)建復(fù)選框元素
 var elementInput = document.createElement('input');
 elementInput.type = "checkbox";
 elementInput.name = "layers";
 elementLi.appendChild(elementInput);
 //創(chuàng)建label元素
 var elementLable = document.createElement('label');
 elementLable.className = "layer";
 //設(shè)置圖層名稱
 setInnerText(elementLable, layerName[i]);
 elementLi.appendChild(elementLable);

 //設(shè)置圖層默認(rèn)顯示狀態(tài)
 if (layerVisibility[i]) {
  elementInput.checked = true;
 }
 addChangeEvent(elementInput, layer[i]); //為checkbox添加變更事件      
 }
}
/**
 * 為checkbox元素綁定變更事件
 * @param {input} element checkbox元素
 * @param {ol.layer.Layer} layer 圖層對(duì)象
 */
function addChangeEvent(element, layer) {
 element.onclick = function() {
 if (element.checked) {
  layer.setVisible(true); //顯示圖層
 } else {
  layer.setVisible(false); //不顯示圖層
 }
 };
}
/**
 * 動(dòng)態(tài)設(shè)置元素文本內(nèi)容（兼容）
 */
function setInnerText(element, text) {
 if (typeof element.textContent == "string") {
 element.textContent = text;
 } else {
 element.innerText = text;
 }
}

function init() {
 //實(shí)例化Map對(duì)象加載地圖
 var map = new ol.Map({
 target: 'map', //地圖容器div的ID
 //地圖容器中加載的圖層
 layers: [
  //加載瓦片圖層數(shù)據(jù)
  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: '國(guó)界(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: '點(diǎn)(KML格式矢量圖)'
  })
 ],
 //地圖視圖設(shè)置
 view: new ol.View({
  center: [0, 0], //地圖初始中心點(diǎn)
  zoom: 2 //地圖初始顯示級(jí)別
 })
 });
 //實(shí)例化ZoomSlider控件并加載到地圖容器中
 var zoomslider = new ol.control.ZoomSlider();
 map.addControl(zoomslider);
 //實(shí)例化zoomToExent控件并加載到地圖容器中
 var zoomToExent = new ol.control.ZoomToExtent({
 extend: [13100000, 4290000,
  13200000, 5210000
 ]
 });
 map.addControl(zoomToExent);
 //加載圖層列表數(shù)據(jù)
 loadLayersControl(map, "layerTree");
}

代碼解析：

（1）首先創(chuàng)建一個(gè)地圖容器，分別加載 OSM 瓦片圖層、JSON 與 KML 格式的矢量圖，并在初始化這些圖層時(shí)，新增一個(gè) name 屬性，用于說(shuō)明當(dāng)前圖層的名稱。
（2）封裝了一個(gè)功能函數(shù) loadLayersControl ，用于加載圖層了列表，需要傳入兩個(gè)參數(shù)，map 與 id 分別為地圖容器對(duì)象、圖層列表 id ，實(shí)現(xiàn)思路：

①調(diào)用 Map 對(duì)象的 getLayers 方法獲取當(dāng)前地圖容器中加載的所有圖層，存入圖層數(shù)組layer中。
②遍歷這些圖層，通過(guò)圖層對(duì)象調(diào)用 get（‘name'）得到圖層名，并存入圖層名稱數(shù)組 layerName 中，調(diào)用 getVisible（）得到圖層的可見(jiàn)屬性，并存入到圖層可見(jiàn)性數(shù)組中（layerVisibility）
③分別新增 li 元素，用來(lái)承載圖層項(xiàng)，在 li 中創(chuàng)建復(fù)選框元素（checkbox）控制圖層顯示，創(chuàng)建 label 元素顯示圖層名稱。其中，通過(guò) addChangeEvent 方法為checkbox 元素綁定變更事件，在事件中實(shí)現(xiàn)通過(guò) Layer 的 setVisible 方法控制圖層的顯示。
（3）在 head 標(biāo)簽中，通過(guò) script 標(biāo)簽引入 loadLayersControl.js,實(shí)現(xiàn)動(dòng)態(tài)加載圖層列表。

4. 實(shí)現(xiàn)效果如下：