OpenLayers基础教程——图层列表控件

最新推荐文章于 2024-08-17 09:00:00 发布

HerryDong

最新推荐文章于 2024-08-17 09:00:00 发布

阅读量3.2k

点赞数 3

文章标签： openlayers

本文链接：https://blog.csdn.net/HerryDong/article/details/108742995

版权

1、前言

很多时候我们需要在一个地图容器中加载多个地图服务，这时候为了方便视图的管理和切换，我们通常会使用图层列表控件。但遗憾的是OpenLayers自带的控件中并不包含图层列表控件，因此我们需要自行实现。下面就来介绍一下如何做一个图层列表控件。

2、将要用到的一些函数

// 获取当前地图中所有的图层
var layers = map.getLayers();

// 获取图层个数
var length = layers.getLength();

// 获取集合中第i个图层
var layer = layers.item(i);

// 图层名称
var name = layer.get('name');

// 图层可见性
var visible = layer.getVisible();

// 设置图层可见性
layer.setVisible(true);

3、一个简易的图层列表

既然是简易版的图层列表，那我们就不需要做的太复杂，只用checkbox实现即可，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:400px;height:400px"></div>
    <div>
        <label for="osm">OSM地图</label>
        <input id="osm" type="checkbox" checked value="OSM地图" onclick="setLayerVisible(this)" />
        <label for="stamen">Stamen地图</label>
        <input id="stamen" type="checkbox" checked value="Stamen地图" onclick="setLayerVisible(this)" />
    </div>
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'
                    }),
                    name: 'Stamen地图'
                }),
                new ol.layer.Tile({
                    source: new ol.source.OSM(),
                    name: 'OSM地图'
                }),
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        })

        function setLayerVisible(obj) {
            var layers = map.getLayers();
            var layer = obj.value == 'OSM地图' ? layers.item(1) : layers.item(0);
            layer.setVisible(obj.checked);
        }
    </script>
</body>
</html>

运行结果如下图所示：
在这里插入图片描述

4、利用树控件实现图层列表

树控件比较便于展示图层列表，下面我就利用EasyUI来实现一个图层列表控件，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OpenLayers</title>
    <!-- openlayers -->
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
    <!-- easyui -->
    <link href="lib/easyui/themes/metro/easyui.css" rel="stylesheet" />
    <script src="lib/easyui/jquery.min.js"></script>
    <script src="lib/easyui/jquery.easyui.min.js"></script>
    <script src="lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north'" style="height:80px;background-color:#2D3E50;">
        <h1 style="color:white;margin-left:20px;margin-top:23px;">OpenLayers图层列表实例</h1>
    </div>
    <div data-options="region:'south'" style="height:30px;">

    </div>
    <div data-options="region:'west'" style="width:200px;">
        <ul id="tree" class="easyui-tree"></ul>
    </div>
    <div data-options="region:'center'" id="map">

    </div>

    <script>
        // 第一步：加载地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'
                    }),
                    name: 'Stamen地图'
                }),
                new ol.layer.Tile({
                    source: new ol.source.OSM(),
                    name: 'OSM地图'
                }),
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        })

        // 第二步：获取图层集合
        var layers = map.getLayers();
        var length = layers.getLength();

        // 第三步：循环生成子节点集合
        var nodes = [];
        for (let i = 0; i < length; i++) {
            var node = {
                "id": i,
                "text": layers.item(i).get('name'),
                "checked": layers.item(i).getVisible()
            }
            nodes.push(node)
        }
        var data = [{
            "id": -1,
            "text": '图层列表',
            "state": "open",
            "children": nodes
        }]

        // 第四步：定义树控件属性
        $('#tree').tree({
            data: data,
            animate: true,
            checkbox: true,
            lines: true,
            onCheck: function (node, checked) {
                if (node.id == -1) {
                    for (var i = 0; i < length; i++) {
                        layers.item(i).setVisible(checked);
                    }
                }
                else {
                    var layer = layers.item(node.id);
                    layer.setVisible(node.checked);
                }
            }
        });
    </script>
</body>
</html>