cesium加载图层覆盖其他图层,设置图层加载顺序问题

一、问题描述

        在cesium加载图层服务时,普通贴地层是存在层级关系的,后面加的图层会覆盖掉之前加载的图层,需求是我们想为图层设置一个层级顺序,这样不论加载先后图层会按照我们设置的图层顺序来进行排序。

二、应用cesium知识点

        Cesium.ImageryLayerCollection 中的方法

        1.raise(layer)

        向上移一层

        2.raiseToTop(layer)

        将图层移到最上层

        3.lowerToBottom(layer)

        将图层移到最下层

        4.contains(layer)        

        是否包含此图层

三、解决思路

        问题:在图层控制列表中点击图层时,图层会根据设置好的图层顺序加载至对应的层级位置。

        1.首先,大球会默认加载三个基础图层,cesium底图、天地图、标注层(要求随时置顶),我们需要设置底图与天地图默认为底部两层。选中图层初始化为第三层,如图所示:

       代码中layer存在window中,可以全局控制获取,每次点击方法开始时,raisetotop置顶标注层,选中图层lowertobottom置底,然后raise上移两层,使选中图层位于上图所示位置。

var imageryLayers = window["viewer"].imageryLayers;//获取所有layers
imageryLayers.raiseToTop(window[store.markID]);//标注层置顶
imageryLayers.lowerToBottom(window[serviceId]);//选中图层置底
imageryLayers.raise(window[serviceId]);//选中图层上移两层
imageryLayers.raise(window[serviceId]);

        

2.在数据库图层表添加ordernum字段,该字段表示图层的层级位置,数字越大代表位置越靠上。

        遍历获取的所有图层 --> 遍历图层  --> 判断是否存在ordernum --> 判断地图是否加载了当前遍历的图层 --> 存在则判断选中图层与遍历图层的ordernum大小 --> 如果选中图层大,则上移一层,直至遍历完成

this.inittree.forEach(res => {//inittree为所有图层列表
					if (res.ordernum) {//判断是否存在ordernum
						let startid = res.ordernum//遍历图层的ordernum
						let strid = data.ordernum//当前选中图层的ordernum
						if (imageryLayers.contains(window[res.id])) {//判断地图是否加载了当前遍历图层
							if (startid < strid) {//判断选中图层与遍历图层的ordernum,如果大于遍历图层,则选中图层上移一层
								imageryLayers.raise(window[serviceId])
							} else {//遍历完成
								return
							}
						}
					}
				})

猜你喜欢

转载自blog.csdn.net/dai556688/article/details/129819838
今日推荐