【WebGIS初学到入职】（十一）用OpenLayers实现图层管理功能——图层级数修改

一、前言

前置：【WebGIS初学到入职】（九）用OpenLayers实现图层管理功能

然后本篇在上篇的基础上，修改了读取图层的代码（用模板字面量来做），然后添加了图层级数修改功能。

二、代码

主要的JavaScript部分：

  let layer = [];                   //map中的图层数组
  let layerZIndex = [];             //图层级数数组
  let layerName = [];               //图层名称数组
  let layerVisibility = [];         //图层可见属性数组
  let eleInput = [];
  
  let indexContent = document.getElementById('layerzindexul'); //layerzindexul是一个DIV的id，作为存放图层目录的容器
  let layers = map1.getLayers();    //获取地图中所有图层

  for (let i = 0; i < layers.getLength() ; i++) {
    layer[i] = layers.item(i);
    layerName[i] = layer[i].get('title');
    layerZIndex[i] = layer[i].getZIndex();
    layerVisibility[i] = layer[i].getVisible();

    indexContent.innerHTML += 
    `
      <li>
        <input type="checkbox" id="layer${i}" name="layers"></input>
        <label for="layer${i}">${layerName[i]}</label>
        <br>
        <label>图层级数：</label>
        <input type="number" name="" id="zindexbtn${i}" value="${layerZIndex[i]}" style="width:50px">
      </li>
      <br>
    `;
  }
  for (let i = 0; i < layers.getLength() ; i++) {
    eleInput = document.getElementById('layer'+i); 
    if (layerVisibility[i]) {eleInput.checked = true;}
    addChangeEvent(eleInput, layer[i]);              //为checkbox添加变更事件
    bindInputs(i,layer[i]);
  }
}

/*
* 为checkbox元素绑定变更事件
*/
function addChangeEvent(element, layer) {
  element.onclick = function () {
      if (element.checked) {
          //显示图层
          layer.setVisible(true);
          console.log(1);
      }
      else {
          //不显示图层
          layer.setVisible(false);
          console.log(2);
      }
  };
}

/*
* 为number元素绑定变更事件
*/
function bindInputs(id, layer) {
  var idxInput = document.getElementById('zindexbtn'+id);
  idxInput.onchange = function () {
      //设置图层显示级数
      layer.setZIndex(parseInt(this.value, 10) || 0);
  };
  //input标签图层显示级数
  idxInput.value = String(layer.getZIndex());
}