mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 09:14:17 +00:00
169 lines
6.8 KiB
HTML
169 lines
6.8 KiB
HTML
|
<!--********************************************************************
|
||
|
|
* by jiawanlong
|
||
|
|
*********************************************************************-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css" />
|
||
|
|
<script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="
|
||
|
|
margin: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #fff;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
">
|
||
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
Cesium.Ion.defaultAccessToken =
|
||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
|
||
|
|
const viewer = new Cesium.Viewer("map", {
|
||
|
|
|
||
|
|
});
|
||
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
||
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
|
|
|
||
|
|
viewer.camera.setView({
|
||
|
|
destination: Cesium.Cartesian3.fromDegrees(116.36485552299206, 39.99754814959118, 5000.0)
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 水波纹扩散材质
|
||
|
|
* @param {*} options
|
||
|
|
* @param {String} options.color 颜色
|
||
|
|
* @param {Number} options.duration 持续时间 毫秒
|
||
|
|
* @param {Number} options.count 波浪数量
|
||
|
|
* @param {Number} options.gradient 渐变曲率
|
||
|
|
*/
|
||
|
|
function CircleWaveMaterialProperty(options) {
|
||
|
|
this._definitionChanged = new Cesium.Event();
|
||
|
|
this.color = Cesium.defaultValue(options.color && new Cesium.Color.fromCssColorString(options.color), Cesium.Color.RED);
|
||
|
|
this.duration = Cesium.defaultValue(options.duration, 1000);
|
||
|
|
this.count = Cesium.defaultValue(options.count, 2);
|
||
|
|
if (this.count <= 0) {
|
||
|
|
this.count = 1;
|
||
|
|
}
|
||
|
|
this.gradient = Cesium.defaultValue(options.gradient, 0.1);
|
||
|
|
if (this.gradient > 1) {
|
||
|
|
this.gradient = 1;
|
||
|
|
}
|
||
|
|
this.time = new Date().getTime();
|
||
|
|
}
|
||
|
|
Object.defineProperties(CircleWaveMaterialProperty.prototype, {
|
||
|
|
isConstant: {
|
||
|
|
get: function () {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
definitionChanged: {
|
||
|
|
get: function () {
|
||
|
|
return this._definitionChanged;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: Cesium.createPropertyDescriptor('color'),
|
||
|
|
gradient: Cesium.createPropertyDescriptor('gradient'),
|
||
|
|
duration: Cesium.createPropertyDescriptor('duration'),
|
||
|
|
count: Cesium.createPropertyDescriptor('count'),
|
||
|
|
});
|
||
|
|
CircleWaveMaterialProperty.prototype.getType = function () {
|
||
|
|
return Cesium.Material.CircleWaveMaterialType;
|
||
|
|
};
|
||
|
|
CircleWaveMaterialProperty.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;
|
||
|
|
result.count = this.count;
|
||
|
|
result.gradient = 1 + 10 * (1 - this.gradient);
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
CircleWaveMaterialProperty.prototype.equals = function (other) {
|
||
|
|
const reData =
|
||
|
|
this === other ||
|
||
|
|
(other instanceof CircleWaveMaterialProperty
|
||
|
|
&& Cesium.Property.equals(this.color, other.color)
|
||
|
|
&& Cesium.Property.equals(this.duration, other.duration)
|
||
|
|
&& Cesium.Property.equals(this.count, other.count)
|
||
|
|
&& Cesium.Property.equals(this.gradient, other.gradient));
|
||
|
|
return reData;
|
||
|
|
};
|
||
|
|
Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;
|
||
|
|
Cesium.Material.CircleWaveMaterialType = 'CircleWaveMaterial';
|
||
|
|
Cesium.Material.CircleWaveSource = `
|
||
|
|
czm_material czm_getMaterial(czm_materialInput materialInput) {
|
||
|
|
czm_material material = czm_getDefaultMaterial(materialInput);
|
||
|
|
material.diffuse = 1.5 * color.rgb;
|
||
|
|
vec2 st = materialInput.st;
|
||
|
|
vec3 str = materialInput.str;
|
||
|
|
float dis = distance(st, vec2(0.5, 0.5));
|
||
|
|
float per = fract(time);
|
||
|
|
if (abs(str.z) > 0.001) {
|
||
|
|
discard;
|
||
|
|
}
|
||
|
|
if (dis > 0.5) {
|
||
|
|
discard;
|
||
|
|
} else {
|
||
|
|
float perDis = 0.5 / count;
|
||
|
|
float disNum;
|
||
|
|
float bl = .0;
|
||
|
|
for (int i = 0; i <= 9; i++) {
|
||
|
|
if (float(i) <= count) {
|
||
|
|
disNum = perDis *float(i) - dis + per / count;
|
||
|
|
if (disNum > 0.0) {
|
||
|
|
if (disNum < perDis) {
|
||
|
|
bl = 1.0 - disNum / perDis;
|
||
|
|
} else if(disNum - perDis < perDis) {
|
||
|
|
bl = 1.0 - abs(1.0 - disNum / perDis);
|
||
|
|
}
|
||
|
|
material.alpha = pow(bl, gradient);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return material;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleWaveMaterialType, {
|
||
|
|
fabric: {
|
||
|
|
type: Cesium.Material.CircleWaveMaterialType,
|
||
|
|
uniforms: {
|
||
|
|
color: new Cesium.Color(181, 241, 254, 1),
|
||
|
|
time: 1,
|
||
|
|
count: 1,
|
||
|
|
gradient: 0.1,
|
||
|
|
},
|
||
|
|
source: Cesium.Material.CircleWaveSource,
|
||
|
|
},
|
||
|
|
translucent: function () {
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
viewer.entities.add({
|
||
|
|
position: Cesium.Cartesian3.fromDegrees(116.36485552299206, 39.99754814959118, 100),
|
||
|
|
ellipse: {
|
||
|
|
semiMinorAxis: 1000,
|
||
|
|
semiMajorAxis: 1000,
|
||
|
|
height: 10,
|
||
|
|
material: new Cesium.CircleWaveMaterialProperty({
|
||
|
|
color: '#FFCB33',
|
||
|
|
duration: 3000,
|
||
|
|
gradient: 0,
|
||
|
|
count: 4,
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|