Cesium扩散墙

Cesium扩散墙

Cesium扩散墙

• 前言
• 示例展示
• 代码
• 结束

前言

学习与共享！
这是个笨方法，新建一个wall，然后不断更新其位置。（菜鸟一枚，虽然努力把 “WebGL Progamming Guide”中大部分的代码敲了一遍，但是再回头看Cesium的着色器，怎么说呢，不能说是毫不相干，但真的就是两个东西，实在是做不到啊，所以只能采用笨方法了，期待大佬带飞，感谢！）

示例展示

不会上传视频，上个图片，就是一个扩张的围墙~~~

代码

全部代码

export const addExpandCylinder = (viewer: any) => {const centerPoint = [113.925, 22.525];let sigDeep = 0.0;let wall: any = null;let positions: any = [centerPoint[0] - sigDeep, centerPoint[1] - sigDeep,centerPoint[0] + sigDeep, centerPoint[1] - sigDeep,centerPoint[0] + sigDeep, centerPoint[1] + sigDeep,centerPoint[0] - sigDeep, centerPoint[1] + sigDeep,centerPoint[0] - sigDeep, centerPoint[1] - sigDeep,];setInterval(() => {updatePosition();}, 100);function updatePosition() {sigDeep = sigDeep > 0.07 ? 0.0 : sigDeep + 0.0005;if (!Cesium.defined(wall)) {wall = new WallPrimitive(positions);} else {positions[0] = centerPoint[0] - sigDeep;positions[1] = centerPoint[1] - sigDeep;positions[2] = centerPoint[0] + sigDeep;positions[3] = centerPoint[1] - sigDeep;positions[4] = centerPoint[0] + sigDeep;positions[5] = centerPoint[1] + sigDeep;positions[6] = centerPoint[0] - sigDeep;positions[7] = centerPoint[1] + sigDeep;positions[8] = centerPoint[0] - sigDeep;positions[9] = centerPoint[1] - sigDeep;}}const WallPrimitive: any = (function () {function _(this: any, positions: any) {const tmpId = moment().format('YYYY_MM_DD_HH_mm_ss_') + moment().get('milliseconds');this.options = {id: "expand_wall" + tmpId,name: '这是个墙',wall: {positions: [],minimumHeights: [10.0, 10.0, 10.0, 10.0, 10.0],maximumHeights: [1000.0, 1000.0, 1000.0, 1000.0, 1000.0],material: new Cesium.ImageMaterialProperty({image: "./Models/image/wall.png",transparent: true})}};this.positions = positions;this._init();}_.prototype._init = function () {var _self = this;var _update = function () {return _self.positions ? Cesium.Cartesian3.fromDegreesArray(_self.positions) : undefined;};// 更新positionsthis.options.wall.positions = new Cesium.CallbackProperty(_update, false);ities.add(this.options);};return _;})();
}

整个流程

1. 初始化各种变量
2. 设置一个定时函数，每隔一段时间，更新wall位置

结束

这个是从中心点计算 四边形的各个点，然后不断更新这些点的位置，假如是五边形、六边形、圆呢？就需要额外的计算了~~~