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

最新推荐文章于 2024-05-11 15:47:37 发布

HerryDong

最新推荐文章于 2024-05-11 15:47:37 发布

阅读量3.1k

点赞数 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>

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

5、结语

现在的前端框架诸如jQuery UI、Vue——ElementUI、LayUI等都包含树控件，有兴趣的同志也可以尝试利用上述前端框架实现一个属于自己的图层列表控件。

HerryDong

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
OpenLayers基础教程——图层列表控件

1、前言很多时候我们需要在一个地图容器中加载多个地图服务，这时候为了方便视图的管理和切换，我们通常会使用图层列表控件。但遗憾的是OpenLayers自带的控件中并不包含图层列表控件，因此我们需要自行实现。下面就来介绍一下如何做一个图层列表控件。2、将要用到的一些函数// 获取当前地图中所有的图层var layers = map.getLayers();// 获取图层个数var length = layers.getLength();// 获取集合中第i个图层var layer = lay
复制链接

扫一扫