-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path管线流动效果-polylinematerials实现.html
133 lines (119 loc) · 4.18 KB
/
管线流动效果-polylinematerials实现.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
<link
href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
/>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script>
const { Color, defined, Event, Material, Property } = Cesium;
const PolylineTrailLinkType = "PolylineTrailLink";
const PolylineTrailLinkSource = /* glsl */ `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec4 sampledColor = texture(image, vec2(fract(st.s - time), st.t));
material.alpha = sampledColor.a * color.a;
material.diffuse = (sampledColor.rgb + color.rgb) / 2.0;
return material;
}
`;
class PolylineTrailLinkMaterialProperty {
/**
* 构造方法
* @param {String} image 图片路径，确保为程序能访问到的正常 URL
* @param {Cesium.Color} [color] 颜色，默认白色
* @param {Number} [duration] 持续时间（毫秒），默认1000
*/
constructor(image, color = Color.WHITE, duration = 1000) {
this._definitionChanged = new Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = color;
this.duration = duration;
this._time = new Date().getTime();
this.image = image;
debugger
Material._materialCache.addMaterial(PolylineTrailLinkType, {
fabric: {
type: PolylineTrailLinkType,
uniforms: {
color: new Color(0.0, 0.0, 0.0, 0.5), // 设为半透明
image: image,
time: 0,
},
source: PolylineTrailLinkSource,
},
translucent: () => true,
});
}
get isConstant() {
return false;
}
get definitionChanged() {
return this._definitionChanged;
}
getType(_) {
return PolylineTrailLinkType;
}
getValue(time, result) {
if (!defined(result)) {
result = {};
}
result.color = Property.getValueOrClonedDefault(
this._color,
time,
Color.WHITE,
result.color
);
result.image = this.image;
result.time =
((new Date().getTime() - this._time) % this.duration) /
this.duration;
return result;
}
equals(other) {
return (
this === other ||
(other instanceof PolylineTrailLinkMaterialProperty &&
Property.equals(this._color, other._color))
);
}
}
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
</script>
<script>
// Get your token from https://cesium.com/ion/tokens
// Cesium.Ion.defaultAccessToken =
// "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
const viewer = new Cesium.Viewer("cesiumContainer", {
});
let data = [
[104.04790878295898, 30.665822980309592],
[104.02791023254393, 30.641600497335878],
[104.02336120605469, 30.683534290222845],
];
positions = [];
for (i = 0; i < 40; ++i) {
positions.push(Cesium.Cartesian3.fromDegrees(-100.0 + i, 15.0));
}
const datasouce = viewer.entities.add({
polyline: {
positions: positions,
width: 16,
material: new Cesium.PolylineTrailLinkMaterialProperty(
"https://pic4.58cdn.com.cn/nowater/webim/big/n_v26fb71d8d71e74f09ac03a734b5c223fa.png",
Cesium.Color.CYAN,
3000
),
},
});
viewer.flyTo(datasouce);
</script>
</body>
</html>