Cesium Wall 动态扩散墙效果实现
实现原理 结合turf等比例缩放分析的值 利用Cesium的回调函数不断改变wall的Positions实现
关键函数:
new Cesium.CallbackProperty(function () {}, false),//按比例缩放
利用turf的transformscale函数求不同比例下的positons
贴一下代码:
// 代码
viewer.entities.add({
name: "扩散",
wall: {
show: true,
positions: new Cesium.CallbackProperty(function () {
scale -= _this.config.speed;
if (scale < 0) {
scale = 1;
}
var poly = turf.polygon(_this.config.positions);
var scaledPoly = turf.transformScale(poly, scale);
var newPositions = [];
for (let i = 0; i < scaledPoly.geometry.coordinates[0].length; i++) {
scaledPoly.geometry.coordinates[0][i].forEach(function (element) {
newPositions.push(element);
})
newPositions.push(_this.config.height);
}
return Cesium.Cartesian3.fromDegreesArrayHeights(newPositions);
}, false),//按比例缩放
material: _this.config.material
}
});
效果图片: