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

最新推荐文章于 2024-08-04 16:08:17 发布

摇曳甜梨

最新推荐文章于 2024-08-04 16:08:17 发布

阅读量427

点赞数 1

分类专栏： WebGIS JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/dingsiww/article/details/134199257

版权

WebGIS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Cesium地图应用中，通过CSDN文章的参考，实现在点击时添加高亮显示功能，包括处理有孔洞的多边形，使用CustomDataSource和ScreenSpaceEventHandler进行事件监听。

摘要由CSDN通过智能技术生成

参考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);