mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 01:04:17 +00:00
118 lines
4.3 KiB
HTML
118 lines
4.3 KiB
HTML
<!--********************************************************************
|
||
* by jiawanlong
|
||
*********************************************************************-->
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css" />
|
||
<script type="text/javascript" src="./../../libs/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.eyJqdGkiOiIwNDljNWFmZC03MzRlLTRiMDMtYWIwMi00Yjk4YWQ4NzQwZGEiLCJpZCI6MjU5LCJpYXQiOjE3NTEzNzkyMzR9.OTqPNs3UGNnT1LYkPTavV80wN8Es_YphpJgQcpdnqWc";
|
||
const viewer = new Cesium.Viewer("map", {
|
||
contextOptions: {
|
||
requestWebgl1: true,
|
||
},
|
||
});
|
||
viewer.scene.debugShowFramesPerSecond = true;
|
||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||
|
||
|
||
let EllipsoidFadeMaterialProperty = function (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, {
|
||
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;
|
||
}
|
||
EllipsoidFadeMaterialProperty.prototype.equals = function (other) {
|
||
return this === other ||
|
||
(other instanceof EllipsoidFadeMaterialProperty &&
|
||
Property.equals(this._color, other._color))
|
||
}
|
||
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: 1
|
||
},
|
||
source: Cesium.Material.EllipsoidFadeSource
|
||
},
|
||
translucent: function (material) {
|
||
return true;
|
||
}
|
||
});
|
||
|
||
var entity = new Cesium.Entity({
|
||
ellipse: {
|
||
height: 100,
|
||
semiMinorAxis: 3000.0,
|
||
semiMajorAxis: 3000.0,
|
||
// 3000为毫秒，控制速度
|
||
material: new EllipsoidFadeMaterialProperty(Cesium.Color.RED, 3000)
|
||
},
|
||
id: "temporary",
|
||
position: Cesium.Cartesian3.fromDegrees(121.466139, 31.257341, 0)
|
||
})
|
||
viewer.entities.add(entity)
|
||
viewer.zoomTo(viewer.entities);
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |