当前位置：网站首页>Cesium dynamic diffusion point effect
Cesium dynamic diffusion point effect
2022-07-02 02:10:00 【Sun batian】
cesium- Dynamic diffusion point effect
Introduce
Sometimes we need to mark some important points and events , For example, an earthquake happened somewhere , We need to be in real time cesium Highlight in , Real time messages can be used websocket Push from the background to the front desk （ I won't start here for the time being ）
Realization effect
The effect is as follows ：
Complete code
Use here vue Realization
<template>
<div class="home">
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<el-breadcrumb separator="/">
<el-breadcrumb-item>cesium</el-breadcrumb-item>
<el-breadcrumb-item> effect </el-breadcrumb-item>
<el-breadcrumb-item> Dynamic diffusion point </el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-col>
</el-row>
<el-row type="flex" :gutter="20">
<el-col :span="24">
<div class="grid-content bg-purple">
<cesiumComponent id="cesium" ref="refCesium"/>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import cesiumComponent from '../cesium.vue'
export default {
name: "dynamic_diffusion_point",
data() {
return {
_viewer: undefined,
_camera: undefined,
};
},
components: {
cesiumComponent
},
mounted() {
this.init();
this.addPoint();
},
methods: {
init() {
let that = this;
that.$refs.refCesium.initMap();
that._viewer = that.$refs.refCesium._viewer;
that._camera = that._viewer.camera;
that._viewer.scene.globe.depthTestAgainstTerrain = true;
},
addPoint() {
let that = this;
let viewer = that._viewer;
// Turn off depth detection
viewer.scene.globe.depthTestAgainstTerrain = true;
// Cancel double click event
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// Set up homebutton The location of
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)
// Set the initial position
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
});
/*
Flow texture line
color Color
duration The duration of the millisecond
*/
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);
}
},
created() {
},
}
</script>
<style scoped>
.home {
height: 100%;
margin: 0;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
.el-breadcrumb {
margin: 10px;
font-size: 15px;
}
#cesium {
max-height: 700px;
}
</style>
Core code
addPoint() {
let that = this;
let viewer = that._viewer;
// Turn off depth detection
viewer.scene.globe.depthTestAgainstTerrain = true;
// Cancel double click event
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// Set up homebutton The location of
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)
// Set the initial position
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
});
/* Flow texture line color Color duration The duration of the millisecond */
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);
}
Online example
边栏推荐
- Bash bounce shell encoding
- JMeter (I) - download, installation and plug-in management
- * and & symbols in C language
- 【毕业季】研究生学长分享怎样让本科更有意义
- MySQL约束与多表查询实例分析
- With the innovation and upgrading of development tools, Kunpeng promotes the "bamboo forest" growth of the computing industry
- Ubuntu20.04 PostgreSQL 14 installation configuration record
- Post infiltration flow encryption
- 如何远程、在线调试app？
- Number of palindromes in C language (leetcode)
猜你喜欢
leetcode2312. 卖木头块（困难，周赛）
A quick understanding of analog electricity
How to execute an SQL in MySQL
The concepts and differences between MySQL stored procedures and stored functions, as well as how to create them, the role of delimiter, the viewing, modification, deletion of stored procedures and fu
PR second training
大厂裁员潮不断，双非本科出身的我却逆风翻盘挺进阿里
医药管理系统（大一下C语言课设）
mysql列转行函数指的是什么
Number of palindromes in C language (leetcode)
WebGPU（一）：基本概念
随机推荐
* and & symbols in C language
Open那啥的搭建文档
Construction and maintenance of business websites [10]
Decipher the AI black technology behind sports: figure skating action recognition, multi-mode video classification and wonderful clip editing
MySQL view concept, create view, view, modify view, delete view
附加：信息脱敏；
How to build and use redis environment
The concepts and differences between MySQL stored procedures and stored functions, as well as how to create them, the role of delimiter, the viewing, modification, deletion of stored procedures and fu
Data analysis on the disaster of Titanic
【视频】马尔可夫链蒙特卡罗方法MCMC原理与R语言实现|数据分享
Opengauss database backup and recovery guide
How does MySQL solve the problem of not releasing space after deleting a large amount of data
MySQL如何解决delete大量数据后空间不释放的问题
Email picture attachment
Volume compression, decompression
Design and implementation of key value storage engine based on LSM tree
With the innovation and upgrading of development tools, Kunpeng promotes the "bamboo forest" growth of the computing industry
Webgpu (I): basic concepts
Five skills of adding audio codec to embedded system
How to batch add background and transition effects to videos?