OpenLayers 加载图层控件

OpenLayers | 作者： |
阅读 23

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

 

地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。

OpenLayers具有大部分常用的控件，如缩放、导航、鹰眼、比例尺、旋转、鼠标位置等。这些控件都是基于 ol.control.Control基类进行封装的，可以通过Map对象的controls属性或者调用addControl方法添加到地图中。

地图控件通过HTML插入到Map页面，可以利用CSS调整地图控件样式。

OpenLayers初始化地图时利用ol.control.default默认加载了缩放控件（ol.control.Zoom）

 

本节主要介绍图层控件。

1. 图层控件

在实际项目中，通常需要将地图加载资源以图层资源目录树的形式进行展示，便于用户查看。所以需要实现一个图层列表功能，对数据资源进行管理操作。

1.1. 创建图层列表函数

图层列表函数需要传入Map对象和图层树ID，用来显示加载图层，图层列表函数可以控制图层的显隐。

function loadLayersControl(map,id) {
    // 图层列表容器
    const treeContent = document.getElementById(id)
    // 获取地图中所有图层，通过map的getLayers方法获取的是一个集合，
  	// 还需要调用getArray方法取到图层数组
    const layers = map.getLayers().getArray()
    
    for (let i = 0; i < layers.length; i++) {
        // 获取每个图层名称，是否可见属性
        const layer = layers[i]
        // 新增li元素，用来保存图层项
        const elementLi = document.createElement("li")       
        // 创建复选框元素
        const elementInput = document.createElement('input')
        elementInput.type = "checkbox"
        elementInput.name = "layers"

        // 添加子节点
        elementLi.appendChild(elementInput) 
        treeContent.appendChild(elementLi)

        // 创建label元素
        const elementLabel = document.createElement('label')
        elementLabel.className = "layer"
        // 设置图层名称，图层get方法获取键值
        setInnerText(elementLabel,layer.get("title"))
        elementLi.appendChild(elementLabel)
        // 设置图层默认显示状态
        elementInput.checked = true
        // 为checkbox添加变更事件
        addChangeEvent(elementInput, layer)
    }
}

1.2. 创建复选框事件

在图层名前通过是否勾选复选框控制图层显示状态。

// 为checkbox 元素绑定变更事件
function addChangeEvent(element, layer) {
    element.onclick = evt=> {
        //==========================================================================================//
        //==========================================================================================//
        //==========================================================================================//
        //=====================这里有个bug，通过layer方法setVisible设置图层显隐不生效=================//
        //==========================================================================================//
        //==========================================================================================//
        //==========================================================================================//
        layer.set('visible', element.checked)
    }
}

1.3. 创建地图对象

添加天地图矢量、影像以及注记图层。

可以在Map属性layers中添加图层，也可以使用addLayer方法添加图层。

// _c表示经纬度，_w表示投影
const tdtLayer = new ol.layer.Tile({
    title: "天地图矢量图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
        crossOrigin: "anoymous",
        wrapX: false
    })
})
const tdtzjLayer = new ol.layer.Tile({
    title: "天地图矢量注记图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
        attibutions: "天地图注记描述",
        crossOrigin: "anoymous",
        wrapX: false
    })
})
const tdtImageLayer = new ol.layer.Tile({
    title: "天地图影像图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
        attibutions: "天地图注记描述",
        crossOrigin: "anoymous",
        wrapX: false
    })
})
const tdtImagezjLayer = new ol.layer.Tile({
    title: "天地图影像注记图层",
    source: new ol.source.XYZ({
        url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
        attibutions: "天地图注记描述",
        crossOrigin: "anoymous",
        wrapX: false
    })
})
const map = new ol.Map({
    target: "map",
    // layers:[tdtLayer,tdtzjLayer,tdtImageLayer,tdtImagezjLayer],
    loadTilesWhileInteracting: true,
    view: new ol.View({
        center: [11444274, 12707441],
        zoom: 5,
        worldsWrap: true,
        minZoom: 1,
        maxZoom: 20,
        //rotation:Math.PI // 设置旋转角度
    }),
    controls: ol.control.defaults().extend([
        new ol.control.MousePosition({
            target:document.getElementById('mouse-position')
        })
    ])
})
    
map.addLayer(tdtLayer)
map.addLayer(tdtzjLayer)
map.addLayer(tdtImageLayer)
map.addLayer(tdtImagezjLayer)

1.4. 调用图层树方法

最后，在加载完图层后调用图层树方法。

loadLayersControl(map,"layer-tree")

2. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>加载图层控件</title>
    <meta charset="utf-8" />
    <script src="../libs/js/ol-5.3.3.js"></script>
    <script src="../libs/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../libs/css//ol.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size:14px;
            font-family:'微软雅黑'
        }
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        /*图层控件的样式设置*/
        .layer-control {
            position: absolute;
            z-index: 999;
            right: 10px;
            top: 5px;
            bottom: 5px;
            min-width: 200px;
            max-height: 200px;
            color: #ddd;
            background-color: #0c0c0c96;
            border: 1px #f2f2f2 solid;
            border-radius: 5px
        }
        .layer-control .title {
            margin:10px;
            font-weight:bold;
            font-size:15px; 
        }
        .layer-tree li {
            margin:5px 10px;
            list-style:none; 
        }    
    </style>
</head>
<body>
    <div id="map" title="地图显示">
        <div class="layer-control" id="layer-control">
            <div class="title"><label for="">图层列表</label></div>
            <ul id="layer-tree" class="layer-tree"></ul>
        </div>
    </div>
</body>
</html>
<script>
    function loadLayersControl(map,id) {
        // 图层列表容器
        const treeContent = document.getElementById(id)
        // 获取地图中所有图层，通过map的getLayers方法获取的是一个集合，
        // 还需要调用getArray方法取到图层数组
        const layers = map.getLayers().getArray()
        
        for (let i = 0; i < layers.length; i++) {
            // 获取每个图层名称，是否可见属性
            const layer = layers[i]
            // 新增li元素，用来保存图层项
            const elementLi = document.createElement("li")       
            // 创建复选框元素
            const elementInput = document.createElement('input')
            elementInput.type = "checkbox"
            elementInput.name = "layers"

            // 添加子节点
            elementLi.appendChild(elementInput) 
            treeContent.appendChild(elementLi)

            // 创建label元素
            const elementLabel = document.createElement('label')
            elementLabel.className = "layer"
            // 设置图层名称，图层get方法获取键值
            setInnerText(elementLabel,layer.get("title"))
            elementLi.appendChild(elementLabel)
            // 设置图层默认显示状态
            elementInput.checked = true
            // 为checkbox添加变更事件
            addChangeEvent(elementInput, layer)
        }
    }
    // 为checkbox 元素绑定变更事件
    function addChangeEvent(element, layer) {
        element.onclick = evt=> {
            // 这里有个bug，通过layer方法setVisible设置图层显隐不生效
            layer.set('visible', element.checked)
        }
    }
    // 动态设置元素文本内容
    function setInnerText(element, text) {
        if (typeof element.textContent === "string") {
            element.textContent = text
        } else {
            element.innerText = text
        }
    }
    // _c表示经纬度，_w表示投影
    const tdtLayer = new ol.layer.Tile({
        title: "天地图矢量图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const tdtzjLayer = new ol.layer.Tile({
        title: "天地图矢量注记图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const tdtImageLayer = new ol.layer.Tile({
        title: "天地图影像图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const tdtImagezjLayer = new ol.layer.Tile({
        title: "天地图影像注记图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=请替换为自己的key",
            attibutions: "天地图注记描述",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const map = new ol.Map({
        target: "map",
        // layers:[tdtLayer,tdtzjLayer,tdtImageLayer,tdtImagezjLayer],
        loadTilesWhileInteracting: true,
        view: new ol.View({
            center: [102.59789, 30.62588],
            zoom: 5,
            worldsWrap: true,
            minZoom: 1,
            maxZoom: 20,
            //rotation:Math.PI // 设置旋转角度
        }),
        // 鼠标控件：鼠标在地图上移动时显示坐标信息。
        controls: ol.control.defaults().extend([
            new ol.control.MousePosition({
                target:document.getElementById('mouse-position')
            })
        ])
    })
    
    map.addLayer(tdtLayer)
    map.addLayer(tdtzjLayer)
    map.addLayer(tdtImageLayer)
    map.addLayer(tdtImagezjLayer)

    loadLayersControl(map,"layer-tree")
</script>

相关文章

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部