Cesium+Vue3学习系列（5）---置顶地图注记图层、设置图层显示顺序

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。请关注微信公众号 “webgis学习”或扫描下方二维码，关注后，在公众号里输入“Cesium学习系列源码”，即可看到全部代码。

上篇文章中忽略了注记压盖问题，即当用户先选中注记，然后再切换地图时，导致注记被底图压盖，比较影响用户体验。以下提供解决方法。

1、在上篇文章的LayerManager类里增加SetAnnotationLayerTop方法，主要借助raiseToTop实现。如下

// 置顶标注图层
    SetAnnotationLayerTop() {
       let annotationHandle =  this.layersIdMap.get(LayerIdFlag.TDT_ANNOTATION_WMTS)?.handle
       if(annotationHandle){
           this.viewer.imageryLayers.raiseToTop(annotationHandle)
       }
    }

2、前端EarthDataLayers.vue中，在加载其他影像图层后。判断是否选中注记，如果选中，直接将注记图层放到顶层即可。


const changeImageData = (val: string | number | boolean | undefined) => {
    imageDataRadio.value = val as string   
   
    switch (val) {
        case 'bingImage':
            mLayerManager?.Remove(LayerIdFlag.TDT_IMAGERY_WMTS)
            mLayerManager?.Remove(LayerIdFlag.TDT_VECTOR_WMTS)
            break
        case 'tdtImage':
            mLayerManager?.Remove(LayerIdFlag.TDT_VECTOR_WMTS)
            mLayerManager?.Add(tdtImageLayerInfo)
            break
        case 'tdtVec':
            mLayerManager?.Remove(LayerIdFlag.TDT_IMAGERY_WMTS)
            mLayerManager?.Add(tdtVecLayerInfo)
            break
        default:
            break
    }
    // 置顶标注图层
    if (tdtAnnotationChecked.value) {
        mLayerManager?.SetAnnotationLayerTop()
    }
}

3、也可将指定图层显示索引，实现如下

/**设置影像数据的叠加顺序 */
    SetImageryLayerIndex(layer: Cesium.ImageryLayer, targetIndex: number) {
        const imageryLayers = this.viewer.imageryLayers
        const curIndex = imageryLayers.indexOf(layer)
        if (curIndex === targetIndex) return
        if (targetIndex === 0) {
            imageryLayers.lowerToBottom(layer)          // 直接到底
        } else if (targetIndex === imageryLayers.length - 1) {
            imageryLayers.raiseToTop(layer)            // 直接到顶
        } else {
            // 逐层移动，直到索引匹配
            while (imageryLayers.indexOf(layer) > targetIndex) imageryLayers.lower(layer)
            while (imageryLayers.indexOf(layer) < targetIndex) imageryLayers.raise(layer)
        }
    }

效果如下