cesium-动态扩散点效果

cesium-动态扩散点效果

介绍

有些时候我们需要标记一些重要的点和事件，比如某地发生了地震，我们需要实时在cesium中高亮显示，实时消息可以使用websocket从后台推送到前台（这里暂时就不展开说了）

实现效果

效果如下：

完整代码

这里使用vue实现

核心代码

addPoint() {let that = this;let viewer = that._viewer;//关闭深度检测viewer.scene.globe.depthTestAgainstTerrain = false;//取消双击事件viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);//设置homebutton的位置Cesium.Camera.DEFAULT_VIEW_RECTANGLE =Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)//设置初始位置viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)});/*流动纹理线color 颜色duration 持续时间 毫秒*/function EllipsoidFadeMaterialProperty(color, duration) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined;this.color = color;this.duration = duration;this._time = (new Date()).getTime();}Object.defineProperties(EllipsoidFadeMaterialProperty.prototype, {isConstant: {get: function () {return false;}},definitionChanged: {get: function () {return this._definitionChanged;}},color: Cesium.createPropertyDescriptor('color')});EllipsoidFadeMaterialProperty.prototype.getType = function (time) {return 'EllipsoidFade';}EllipsoidFadeMaterialProperty.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;return result;// return Cesium.defined(result) || (result = {}),//     result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color),//     void 0 === this._time && (this._time = time.secondsOfDay),//     result.time = time.secondsOfDay - this._time,//     result}EllipsoidFadeMaterialProperty.prototype.equals = function (other) {return this === other ||(other instanceof EllipsoidFadeMaterialProperty &&Property.equals(this._color, other._color))}Cesium.EllipsoidFadeMaterialProperty = EllipsoidFadeMaterialProperty;Cesium.Material.EllipsoidFadeType = 'EllipsoidFade';Cesium.Material.EllipsoidFadeSource ="czm_material czm_getMaterial(czm_materialInput materialInput)\n" +"{\n" +"czm_material material = czm_getDefaultMaterial(materialInput);\n" +"material.diffuse = 1.5 * color.rgb;\n" +"vec2 st = materialInput.st;\n" +"float dis = distance(st, vec2(0.5, 0.5));\n" +"float per = fract(time);\n" +"if(dis > per * 0.5){\n" +"material.alpha = 0.0;\n" +"discard;\n" +"}else {\n" +"material.alpha = color.a  * dis / per / 1.0;\n" +"}\n" +"return material;\n" +"}";Cesium.Material._materialCache.addMaterial(Cesium.Material.EllipsoidFadeType, {fabric: {type: Cesium.Material.EllipsoidFadeType,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 1),time: 0},source: Cesium.Material.EllipsoidFadeSource},translucent: function (material) {return true;}});viewer.entities.add({name: 'EllipsoidFade',position: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 100.0),ellipse: {height: 0,semiMinorAxis: 3000.0,semiMajorAxis: 3000.0,material: new Cesium.EllipsoidFadeMaterialProperty(Cesium.Color.ORANGE, 2000)},point:{show: true,pixelSize: 30,// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,color: Cesium.Color.RED,outlineColor: Cesium.Color.YELLOW,outlineWidth: 10,scaleByDistance: new Cesium.NearFarScalar(1500, 1, 20000, 0.3),translucencyByDistance: new Cesium.NearFarScalar(1500, 1, 20000, 0.2),distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)}});viewer.zoomTo(viewer.entities);}