福州 网站建设 快搜网络,创意网站,网站建设是网络工程师吗,wordpress教程创建网页注#xff1a;当前使用的是 ol 9.2.4 版本#xff0c;天地图使用的key请到天地图官网申请#xff0c;并替换为自己的key 对于添加到地图中的图层存在一个显示层级问题#xff0c;最先添加的图层默认显示在最下层#xff0c;越往后添加的图层越靠近用户。与CSS中z-index属性… 注当前使用的是 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
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title图层顺序/titlemeta charsetutf-8 /script src../../libs/js/jquery-2.1.1.min.js/scriptscript src../../libs/proj4.js/scriptscript src../../js/ol9.2.4.js/scriptscript src../../libs/layui/layui.js/scriptlink relstylesheet href../../css/ol9.2.4.csslink relstylesheet href../../libs/layui/css/layui.cssstyle* {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
/headbodydiv idtop-contentspan图层叠加顺序/span/divdiv idmap title地图显示/divdiv idlayer-containerh2 classlayer-head图层设置/h2div classlayer-formdiv classlayui-form-itemlabel classlayui-form-label矩形/labeldiv classlayui-input-blockinput typenumber lay-affixnumber step1 min-10 max10 placeholder请输入显示层级autocompleteoff classlayui-input rectangle-layer/div/divdiv classlayui-form-itemlabel classlayui-form-label三角形/labeldiv classlayui-input-blockinput typenumber lay-affixnumber step1 min-10 max10 placeholder请输入显示层级autocompleteoff classlayui-input triangle-layer/div/divdiv classlayui-form-itemlabel classlayui-form-label天地图影像/labeldiv classlayui-input-blockinput typenumber lay-affixnumber step1 min-10 max10 placeholder请输入显示层级autocompleteoff classlayui-input img-layer/div/divdiv classlayui-form-itemlabel classlayui-form-label天地图注记/labeldiv classlayui-input-blockinput typenumber lay-affixnumber step1 min-10 max10 placeholder请输入显示层级autocompleteoff classlayui-input cva-layer/div/divdiv classlayui-form-itemlabel classlayui-form-label天地图矢量/labeldiv classlayui-input-blockinput typenumber lay-affixnumber step1 min-10 max10 placeholder请输入显示层级autocompleteoff classlayui-input vec-layer/div/div/div/div
/body/htmlscript//地图投影坐标系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?Timg_wx{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?Tcia_wx{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?Tvec_wx{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)})/scriptOpenLayers示例数据下载请回复关键字ol数据 全国信息化工程师GIS 应用水平考试资料请回复关键字GIS考试 【GIS之路】 已经接入了智能助手欢迎关注欢迎提问。 欢迎访问我的博客网站-长谈GIShttp://shanhaitalk.com 都看到这了不要忘记点赞、收藏 关注 哦
本号不定时更新有关 GIS开发 相关内容欢迎关注 !
