cesium区域反选遮罩+凸起效果+飞线

长毛的好朋友

已于 2022-10-11 22:19:55 修改

阅读量3.4k

点赞数 6

文章标签： javascript vue

于 2022-07-28 23:49:08 首次发布

本文链接：https://blog.csdn.net/weixin_37507461/article/details/126046405

版权

![在这里插入图片描述](https://img-blog.csdnimg.cn/2b98aae806f54470971ae039d07f77e7.gif#pic_center
这个用于做大屏展示还是不错的，还可以结合echarts图表实现更多炫酷效果。

在这里插入图片描述

3DAREA

this.handleFocus(Cmap, 30000)

handleFocus(map, extrudedHeight) {
    const surfaceHeight = 10
    let flyTargetId
    //加载某省和省内各市的geojson数据
    let req1 = axios.get("/mapRes/china.json")
    let req2 = axios.get("/mapRes/shannxiDetail.json")
    let areaGeometry, borderGeometry = []
    Promise.all([req1, req2]).then(res => {
        if (res[0].data) {
            for (let area of res[0].data.features) {
                if (area.properties.name === '陕西省') {
                    areaGeometry = area.geometry
                    break
                }
            }
        }
        if (res[1].data) {
            for (let area of res[1].data.features) {
                borderGeometry.push(area.geometry)
            }
        }
        let index1 = 0,
            index2 = 0
        let areaPolygonData = [],
            areaPolylineData = []
        if (areaGeometry.type === "MultiPolygon") {
            for (let data of areaGeometry.coordinates) {
                areaPolygonData[index1] = []
                data[0].forEach(item => {
                    areaPolygonData[index1].splice(areaPolygonData[index1].length, 3, ...item)
                })
                index1 += 1
            }
        } else if (areaGeometry.type === "Polygon") {
            areaPolygonData[0] = []
            areaGeometry.coordinates[0].forEach(item => {
                areaPolygonData[0].splice(areaPolygonData[0].length, 3, ...item)
            })
        }
        for (let bg of borderGeometry) {
            if (bg.type === "MultiPolygon") {
                for (let data of bg.coordinates) {
                    areaPolylineData[index2] = []
                    data[0].forEach(item => {
                        areaPolylineData[index2].splice(areaPolylineData[index2].length, 3, item[0], item[1], extrudedHeight + surfaceHeight)
                    })
                    index2 += 1
                }
            } else if (bg.type === "Polygon") {
                areaPolylineData[index2] = []
                bg.coordinates[0].forEach(item => {
                    areaPolylineData[index2].splice(areaPolylineData[index2].length, 3, item[0], item[1], extrudedHeight + surfaceHeight)
                })
                index2 += 1
            }
        }
        for (let index in areaPolygonData) {
            let surfaceMaterial = new Cesium.Color(19 / 255.0, 25 / 255.0, 41 / 255.0, 1)
            areaEntities.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray(areaPolygonData[index]),
                    material: new Cesium.Color(68 / 255.0, 222 / 255.0, 255 / 255.0, 1),
                    extrudedHeight: extrudedHeight
                }
            })
            if (index == 0) {
                surfaceMaterial = new Cesium.ImageMaterialProperty({
                    image: require("../../assets/img/map/night_area.png"),    //随便找一张地型贴图
                    repeat: new Cesium.Cartesian2(1, 1)
                })
            }
            let temp = areaEntities.entities.add({
                polygon: {
                    hierarchy: Cesium.Cartesian3.fromDegreesArray(areaPolygonData[index]),
                    material: surfaceMaterial,
                    height: extrudedHeight + surfaceHeight,
                }
            })
            if (index == 0) {
                flyTargetId = temp._id
            }
        }
        for (let border of areaPolylineData) {
            areaEntities.entities.add({
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights(border),
                    width: 2,
                    material: new Cesium.Color(2 / 255.0, 197 / 255.0, 249 / 255.0, 1)
                }
            })
        }
        this.setMask(map, flyTargetId)
    })
}

// 设置遮罩效果
setMask (map, flyTargetId) {
    areaEntities.entities.add({
        polygon: {
            hierarchy: Cesium.Cartesian3.fromDegreesArray([60, 0, 60, 90, 160, 90, 160, 0]),
            material: new Cesium.Color(15 / 255.0, 38 / 255.0, 84 / 255.0, 0.7)
        },
    })
    map.dataSources.add(areaEntities)
    for (let e of areaEntities.entities.values) {
        if (e._id === flyTargetId) {
            map.flyTo(e)
            break
        }
    }
}