Cesium 添加边界墙边界线

May_Xu_

已于 2022-08-01 13:51:26 修改

阅读量3.9k

点赞数 5

文章标签：前端 GIS cesium

于 2022-06-30 15:10:34 首次发布

本文链接：https://blog.csdn.net/May_Xu_/article/details/125540608

版权

加入边界墙前：

加入边界墙后：

本身影像数据是属于二维的，只是叠到了三维框架上面，现在有个需求：因为当前的影像没有高度，所以给人的感觉不那么立体，需要给它手动加个厚度。因此想到的是添加一个边界墙，实现地图有厚度的感觉。

// 多维数组转一维数组
flatten(arr) {
    return [].concat(...arr.map(x => Array.isArray(x) ? this.flatten(x) : x))
},
addBoundaryWall() {
    // 绘制墙体的数据，将多维数组转成一维数组
    let coordinates = this.flatten(geojson.features[0].geometry.coordinates[0])
    // 因为地图影像数据是贴地的，所以给个墙的高度设为负数则会有厚度的感觉
    // 墙体最高为0
    let maximumHeights = new Array(coordinates.length).fill(0)
    // 墙体最低为-1600
    let minimumHeights = new Array(coordinates.length).fill(-1600)
    let position = Cesium.Cartesian3.fromDegreesArray(coordinates)
    window.viewer.entities.add({
        id: 'wall',
        wall: {
            positions: position,
            maximumHeights: maximumHeights,
            minimumHeights: minimumHeights,
            material: Cesium.Color.fromCssColorString("rgba(0,255,255,0.3)")
        }
    })
}

代码中的 geojson 数据是一般的边界数据，格式都是一样的。