一、问题描述
在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
}
}
}
})