Cesium有孔洞多边形实现高亮效果

参考CSDN其他文章，新增一个图层，将所点击的多边形的坐标点复制到新图层中，即可实现高亮显示。

如果有孔洞多边形需要特殊处理，否则无法显示孔洞。

有孔洞多边形需要增加holes这一属性。

HighlightPolygonEntity (entityID, layerName) {
    // 如果非空，先移除全部entity
    if (highLightEntityList.length) {
        for(let i = 0; i< highLightEntityList.length; i++) {
            layerName.entities.remove(highLightEntityList[i])
        }
    }
    // 取消高亮
    if (!entityID) {
        return;
    }
    // 获取孔洞列表
    let holeList = []
    if(entityID.polygon.hierarchy.getValue().holes) {
        holeList = entityID.polygon.hierarchy.getValue().holes
    }
    highLightEntityList[0] = layerName.entities.add({
        id: 'highlight-0',
        polygon: {
            hierarchy: {
                positions: entityID.polygon.hierarchy.getValue().positions,
                holes: holeList    // 挖除孔洞
            },
            material: Cesium.Color.WHITE.withAlpha(0.5),
            zIndex: 100
        },
        polyline: {
            positions: entityID.polygon.hierarchy.getValue().positions,
            width: 1
        }
    })
    // 孔洞边界线
    for(let i = 1; i <= holeList.length; i++) {
        highLightEntityList[i] = layerName.entities.add({
            id: 'highlight-' + i.toString(),
            polyline: {
                positions: entityID.polygon.hierarchy.getValue().holes[i - 1].positions,
                width: 1
            }
        })
    }
    viewer.dataSources.raiseToTop(layerName); //设置defaultLayer置顶
}

let highLightShowHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

const defaultLayer = new Cesium.CustomDataSource("defaultLayer")

viewer.dataSources.add(defaultLayer)

highLightShowHandler.setInputAction((e) => {
    let pick = viewer.scene.pick(e.position)
    if(Cesium.defined(pick)) {
        this.HighlightPolygonEntity(pick.id, defaultLayer)
    } else {
        this.HighlightPolygonEntity(null, defaultLayer)
    }
},Cesium.ScreenSpaceEventType.LEFT_CLICK);