OpenLayers 图层叠加控制

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

对于添加到地图中的图层存在一个显示层级问题，最先添加的图层默认显示在最下层，越往后添加的图层越靠近用户。与CSS中z-index属性相同，在OpenLayers中，图层类具有也具一个属性zIndex可以用来设置图层的显示级别，从而调整图层显示顺序。

1. 获取显示级别

在OpenLayers中，通过layer.getZIndex()获取图层显示级别，若图层设置了zIndex值，则返回该数字值，否则返回undefined。

复制代码

const zIndex = layer.getZIndex()

2. 设置显示级别

在OpenLayers中，通过layer.setZIndex(number)设置图层显示级别，传入zIndex值即可。

复制代码

const zIndex = layer.setZIndex(10)

3. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。本示例引用了layui组件，请自行替换。构建好HTML页面后，在调整显示顺序时，只需要监听input事件即可。

复制代码

<!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/jquery-2.1.1.min.js"></script>
    <script src="../../libs/proj4.js"></script>
    <script src="../../js/ol9.2.4.js"></script>
    <script src="../../libs/layui/layui.js"></script>

    <link rel="stylesheet" href="../../css/ol9.2.4.css">
    <link rel="stylesheet" href="../../libs/layui/css/layui.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #map {
            position: absolute;
            top: 50px;
            bottom: 0;
            width: 100%;
        }

        #top-content {
            position: absolute;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);
            color: #fff;
            text-align: center;
            font-size: 32px;
        }

        #top-content span {
            font-size: 32px;
        }

        #layer-container {
            position: absolute;
            top: 15%;
            left: 20px;
            width: 20%;
            bottom: 5%;
            background: #fff;
            color: #fff;
            border: 1px solid #ddd;
            border-radius: 2.5px;
        }

        .layer-head {
            background: #16baaa;
            padding: 10px;
            margin-bottom: 15px;
        }

        .layui-form-label {
            color: #000;
        }

        .layer-form {
            padding: 0 10px;
        }

        .layui-form-label {
            width: 110px;
            padding: 8px 15px;
            height: 38px;
            line-height: 20px;
            border-width: 1px;
            border-style: solid;
            border-radius: 2px 0 0 2px;
            text-align: center;
            background-color: #fafafa;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            box-sizing: border-box;
            border-color: #eee;
            font-weight: 400;
        }
    </style>
</head>

<body>
    <div id="top-content">
        <span>图层叠加顺序</span>
    </div>
    <div id="map" title="地图显示"></div>
    <div id="layer-container">
        <h2 class="layer-head">图层设置</h2>
        <div class="layer-form">
            <div class="layui-form-item">
                <label class="layui-form-label">矩形</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" step="1" min="-10" max="10" placeholder="请输入显示层级"
                        autocomplete="off" class="layui-input rectangle-layer">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">三角形</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" step="1" min="-10" max="10" placeholder="请输入显示层级"
                        autocomplete="off" class="layui-input triangle-layer">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">天地图影像</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" step="1" min="-10" max="10" placeholder="请输入显示层级"
                        autocomplete="off" class="layui-input img-layer">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">天地图注记</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" step="1" min="-10" max="10" placeholder="请输入显示层级"
                        autocomplete="off" class="layui-input cva-layer">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">天地图矢量</label>
                <div class="layui-input-block">
                    <input type="number" lay-affix="number" step="1" min="-10" max="10" placeholder="请输入显示层级"
                        autocomplete="off" class="layui-input vec-layer">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

<script>

    //地图投影坐标系
    const projection = ol.proj.get('EPSG:3857');
    //==============================================================================//
    //============================天地图服务参数简单介绍==============================//
    //================================vec：矢量图层==================================//
    //================================img：影像图层==================================//
    //================================cva：注记图层==================================//
    //======================其中：_c表示经纬度投影，_w表示球面墨卡托投影================//
    //==============================================================================//
    const TDTImgLayer = new ol.layer.Tile({
        title: "天地图影像图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=",
            attibutions: "天地图影像",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const TDTCvaLayer = new ol.layer.Tile({
        title: "天地图注记图层",
        source: new ol.source.XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=",
            attibutions: "天地图注记",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const TDTVecLayer = 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=",
            attibutions: "天地图矢量",
            crossOrigin: "anoymous",
            wrapX: false
        })
    })
    const map = new ol.Map({
        target: "map",
        loadTilesWhileInteracting: true,
        view: new ol.View({
            center: [104.0635986160487, 30.660919181071225],
            zoom: 5,
            worldsWrap: false,
            minZoom: 1,
            maxZoom: 20,
            projection: "EPSG:4326"
        }),
        layers: [TDTImgLayer, TDTCvaLayer, TDTVecLayer],
        // 地图默认控件
        controls: ol.control.defaults.defaults({
            zoom: false,
            attribution: true,
            rotate: true
        })
    })
    map.on('click', evt => {
        console.log(evt.coordinate)
    })

    // 添加矩形
    const rectangle = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Polygon([
                        [
                            [95.0635986160487, 30.660919181071225],
                            [104.0935986160487, 30.660919181071225],
                            [104.0935986160487, 26.060919181071225],
                            [95.0635986160487, 26.060919181071225],
                            // [104.0635986160487, 30.660919181071225]
                        ]
                    ])
                })
            ]
        }),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: "#16baaab0"
            }),
            stroke: new ol.style.Stroke({
                color: "#1e9fff"
            })
        })
    })

    // 添加三角形
    const triangle = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Polygon([
                        [
                            [96.0635986160487, 33.760919181071225],
                            [104.0935986160487, 30.660919181071225],
                            [99.5785986160487, 23.660919181071225]
                        ]
                    ])
                })
            ]
        }),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: "#ff5722d6"
            }),
            stroke: new ol.style.Stroke({
                color: "#ffb800"
            })
        })
    })
    map.addLayer(triangle)
    map.addLayer(rectangle)

    document.querySelector('.rectangle-layer').addEventListener("input", evt => {
        rectangle.setZIndex(evt.target.value)
    })

    document.querySelector('.triangle-layer').addEventListener("input", evt => {
        triangle.setZIndex(evt.target.value)
    })

    document.querySelector('.img-layer').addEventListener("input", evt => {
        TDTImgLayer.setZIndex(evt.target.value)
    })

    document.querySelector('.cva-layer').addEventListener("input", evt => {
        TDTCvaLayer.setZIndex(evt.target.value)
    })

    document.querySelector('.vec-layer').addEventListener("input", evt => {
        TDTVecLayer.setZIndex(evt.target.value)
    })

</script>

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS ：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注哦！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !