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

最新推荐文章于 2024-03-07 19:24:30 发布

ReBeX

最新推荐文章于 2024-03-07 19:24:30 发布

阅读量1.5k

点赞数 3

分类专栏：【WebGIS初学到入职】文章标签：前端 javascript

本文链接：https://blog.csdn.net/ReBeX/article/details/120896191

版权

【WebGIS初学到入职】专栏收录该内容

21 篇文章 78 订阅

订阅专栏

一、前言

目前能达到的功能：

自动识别已加载的图层到图层列表中
可以开启或关闭图层

参考书籍：《WebGIS之OpenLayers全面解析第二版》

二、开始

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图层管理</title>
    <link rel="stylesheet" href="/css/ol.css">
    <link rel="stylesheet" href="layercontrol.css">
    <script src="/js/ol.js"></script>
    <script src="layercontrol.js"></script>      
    <script type="text/javascript">
        window.onload = function () {map();}
    </script>  
    <style>

    </style>
</head>
<body>
    <div id="map"></div>   
    <div id="layerControl">
        <div class="title"><label>图层列表</label></div>
        <ul id="layerTree" class="layerTree"></ul>
    </div>
</body>
</html>

然后是js部分：

/*  
*   layercontrol.js
*/
var map1;
function map(){
map1 = new ol.Map({
    target: 'map', //地图容器div的id
    loadTilesWhileInteracting: true,
    layers: [],
    view: new ol.View({
        center: [12622513, 2636878], //地图初始中心点
        zoom: 9,  //地图初始显示级别
    }),
    controls: ol.control.defaults({}).extend([])
});

var osm = new ol.layer.Tile({
    title: "开放街道地图",
    source: new ol.source.OSM(),
    opacity: 0.5,
});
var stamen = new ol.layer.Tile({
    title: "Stamen地图",
    source: new ol.source.Stamen({ layer: 'watercolor' }),
});
map1.addLayer(stamen);
map1.addLayer(osm);

var layersContent = document.getElementById('layerTree');              //图层目录容器
var layers = map1.getLayers();    //获取地图中所有图层
var layer = [];                   //map中的图层数组
var layerName = [];               //图层名称数组
var layerVisibility = [];         //图层可见属性数组

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

    let eleLi = document.createElement('li');           //新增li元素，用来承载图层项
    var eleInput = document.createElement('input');     //创建复选框元素，用来控制图层开启关闭
    eleInput.type = "checkbox";
    eleInput.name = "layers"; 
     eleLi.appendChild(eleInput);                        //将复选框添加到li元素中

    // layersContent.appendChild(eleLi);                   //将li元素作为子节点放入到图层目录中
    layersContent.insertBefore(eleLi,layersContent.childNodes[0]); //将li元素作为子节点放入到图层目录中（按图层加载倒序）
    var eleLable = document.createElement('label');     //创建label元素
    // eleLable.className = "layer";
    // eleLable.htmlFor = "layer";
    setInnerText(eleLable, layerName[i]);                //在label中设置图层名称
    eleLi.appendChild(eleLable);                         //将label加入到li中

     if (layerVisibility[i]) {                            //设置图层默认显示状态
        eleInput.checked = true;
    }
    addChangeEvent(eleInput, layer[i]);              //为checkbox添加变更事件
};
}


/*
* 动态设置元素文本内容（兼容）
*/
function setInnerText(element, text) {
    if (typeof element.textContent == "string") {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}
    
    /*
  * 为checkbox元素绑定变更事件
  */
function addChangeEvent(element, layer) {
    element.onclick = function () {
        if (element.checked) {
            //显示图层
            layer.setVisible(true);
        }
        else {
            //不显示图层
            layer.setVisible(false);
        }
    };
}

接着是css部分：（其实这部分无所谓的，就是个样式罢了）

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
#map{
    position: absolute;
    width: 100%;
    height: 100%;
}
#layerControl {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 300px;
    background-color: rgba(78, 70, 109, 0.596);
    right: 50px;
    top: 50px;
    padding: 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#layerControl .title {
    color: ivory;
    text-align: center;
    font-size: 20px;
    margin: 10px 0px;
}

#layerControl li {
    color: ivory;
}

#layerControl input {
    margin-right: 10px;
}

#layerlistbtn {
    position: fixed;
    right: 15px;
    top: 50px;
}

三、说明

要想你的图层能自动显示到图层列表中，就一定要记得在新建图层时，给图层添加一个title，如上示：title: "Stamen地图",
然后就是关于这个图层管理功能，后续还能添加很多新功能，比如：

透明度设置、
图层层级设置
图层信息查询功能等等，

后续慢慢完善吧。

对了，这篇博客上的代码，基本上都是参考《WebGIS之OpenLayers全面解析第二版》所给的实例来完成的，真的很感谢这本书的作者。

ReBeX

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【WebGIS初学到入职】（九）用OpenLayers实现图层管理功能

一、前言目前能达到的功能：自动识别已加载的图层到图层列表中可以开启或关闭图层参考书籍：《WebGIS之OpenLayers全面解析第二版》二、开始<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt
复制链接

扫一扫