Openlayers案例5——动态添加图层列表

最新推荐文章于 2022-09-02 07:45:00 发布

最强大佬

最新推荐文章于 2022-09-02 07:45:00 发布

阅读量1.4k

点赞数 2

分类专栏： WebGIS 文章标签： arcgis

本文链接：https://blog.csdn.net/peanut2/article/details/113359506

版权

WebGIS 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

1. 代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态添加图层列表</title>
  <link rel="stylesheet" href="openlayers/css/ol.css">
  <script src="openlayers/build/ol.js"></script>
  <style>
    body,
    html,
    div,
    ul,
    li {
      border: none;
      padding: 0;
      margin: 0;
      font-size: 14px;
      font-family: 'Microsoft YaHei';
    }

    #map {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .layerControl {
      position: absolute;
      bottom: 5px;
      min-width: 200px;
      max-height: 200px;
      right: 0px;
      top: 5px;
      z-index: 100;
      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;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div id="layerControl" class="layerControl">
    <div class="title"><label for="">地图列表</label></div>
    <ul id="layerTree" class="layerTree"></ul>
  </div>

  <script>
    // 1.创建列表数组
    var layer = new Array(); // map的图层数组
    var layerName = new Array(); // 图层名数组
    var layerVisibility = new Array(); // 可见图层数组

    // 2.创建加载图层列表中的数据函数
    function loadLayersControl(map, id) {
      var treeContent = document.getElementById(id); //获取图层列表容器对象ul
      var layers = map.getLayers(); // 获取地图中所以图层；
      // 2.1 遍历layers，获取图层、名字、可见性，创建li列表
      for (var i = 0; i < layers.getLength(); i++) { // getLength()获取图层个数
        layer[i] = layers.item(i); // 获取集合中第i个图层，循环为layer数组赋值
        layerName[i] = layer[i].get('name'); // 获取图层名字
        layerVisibility[i] = layer[i].getVisible(); // 获取图层可见性，返回布尔值
        var elementLi = document.createElement('li');  // 创建li子节点
        treeContent.appendChild(elementLi); // 添加li子节点到ul
        // 2.2 创建复选框
        var elementInput = document.createElement('input');
        elementInput.type = 'checkbox';
        elementInput.name = 'layers' // name属性值一致才能实现复选
        elementLi.appendChild(elementInput);
        // 2.3 创建label元素
        var elementLabel = document.createElement('label');
        elementLabel.className = 'layer'; // 设置label类名，修改样式
        // 2.3 设置图层名称
        elementLabel.innerHTML = layerName[i]; // 把图层名添加到label
        // 2.4 把label追加到li
        elementLi.appendChild(elementLabel);
        // 2.5 设置图层默认显示
        if (layerVisibility[i]) {
          elementInput.checked = true; // 如果图层可见，勾选复选框
        };
        // 2.6 为checkbox添加变更事件监听函数
        addChangeEvent(elementInput, layer[i]);
      }
    };

    // 3.为checkbox绑定点击事件
    function addChangeEvent(element, layer) {
      element.addEventListener('click', function () {
        if (element.checked) {
          layer.setVisible(true);
        } else {
          layer.setVisible(false);
        }
      });
    }

    // 4.加载地图
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM({
            wrapX: false,
          }),
          name: '世界地图OSM瓦片',
          preload: Infinity,
        }),
        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/MasterArea.kml',
            format: new ol.format.KML({
              extractStyles: false // 不显示kml默认样式
            })
          }),
          name: '点（KML格式矢量图）'
        })
      ],
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });

    // 5.加载图层列表中的数据
    loadLayersControl(map, 'layerTree');

  </script>
</body>

</html>