当前位置：首页 > news >正文

OpenLayers 图层叠加控制

news 来源：原创 2025/6/14 12:07:30

注：当前使用的是 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>