cesium实现动态扩散墙效果（基于turf）

Cesium实战系列文章总目录： 传送门

1.实现效果

2.实现方法

通过查询Cesium文档，发现并没有提供缩放要素的功能，这里使用第三方库turf来实现。

2.1 turf库

turf做为前端地理空间分析库，在前端开发中广泛应用，网址为：turf中文网

turf中提供了按比例缩放要素的方法transformScale，传送门

2.2具体代码

这里将缩放代码整合到函数wallDiffuse中，可以实现墙的放大和缩小，缩放比例应该大于0,0-1之前为缩小，大于1为放大。

2.2.1核心函数

/**
 * @description: 扩散墙效果（基于turf实现，可以放到或缩小）
 * @param {*} _positions：底部坐标，单个面坐标的格式为[[[lon,lat]]]
 * @param {*} _scale：最大缩放比例
 * @param {*} _height：墙高度
 * @param {*} _material：墙材质
 * @return {*}
 */
function wallDiffuse(_positions, _scale, _height, _material) {
    let scale = 1;
    this.viewer.entities.add({
        name: "扩散墙",
        wall: {
            positions: new Cesium.CallbackProperty(() => {
                // 判断是放大还是缩小
                if (_scale >= 1) {
                    scale += _scale / 200.0;
                    if (scale >= _scale) {
                        scale = 1.0;
                    }
                } else {
                    scale -= _scale / 200.0;
                    if (scale <= _scale) {
                        scale = 1;
                    }
                }

                let polygon = turf.polygon(_positions);
                let scaledPolygon = turf.transformScale(polygon, scale);
                let newPositions = [];
                // 遍历多边形
                for (let i = 0; i < scaledPolygon.geometry.coordinates[0].length; i++) {
                    // 遍历节点
                    scaledPolygon.geometry.coordinates[0][i].forEach((item) => {
                        newPositions.push(item);
                    })
                    newPositions.push(_height);
                }
                return Cesium.Cartesian3.fromDegreesArrayHeights(newPositions);
            }, false),
            material: _material
        }
    });
}

2.2.2代码调用

// 扩散墙
let wallPositions = [
   [
       [113.8236839, 22.528061],
       [113.9236839, 22.628061],
       [114.0236839, 22.528061],
       [113.9236839, 22.428061],
       [113.8236839, 22.528061],
   ]
];
wallDiffuse(wallPositions, 3.0, 5000.0, new Cesium.Color(1.0, 1.0, 0.0, 0.7));