<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>效果</el-breadcrumb-item>
<el-breadcrumb-item>动态扩散点</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;
//关闭深度检测
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);
}
},
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>
核心代码
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);
}