主要是Primitive,然后自定义Material;
const primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.EllipseGeometry({
center: Cesium.Cartesian3.fromDegrees(120.09777, 30.03883),
semiMajorAxis: 100000.0,
semiMinorAxis: 100000.0,
}),
}),
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: new Cesium.Material({
fabric: {
type: 'mym',
uniforms: {
color: new Cesium.Color(0.1804, 0.9725, 0.0745, 0.5), // 颜色
radians: 0, // 旋转
width: 0.01 // 线条宽度
},
source: `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
float rx = st.x - 0.5;
float ry = st.y - 0.5;
float current_radians = atan(ry, rx);
float radius = sqrt(rx * rx + ry * ry);
current_radians = current_radians - radians;
st = vec2(cos(current_radians) * radius, sin(current_radians) * radius);
st = vec2(st.x + 0.5, st.y + 0.5);
float time = czm_frameNumber / 60.0;
float dis = distance(st, vec2(0.5));
vec3 diffuse = color.rgb;
float alpha = 1.0;
if(abs(st.y - st.x) < width && st.x > 0.5){ // 动线
alpha = 1.0;
} else if (st.y-st.x < 0.0 && st.y-st.x < 0.32 && st.x > 0.5 && st.y > 0.5) { // 动线后面的渐变区
alpha = 1.0 - fract(abs(st.y-st.x)* 1.2) - 0.4 ;
} else {
alpha = 0.0;
}
// 根据到圆心到距离画圆
if(dis < 0.1 - width){
// alpha = 0.0;
} else if(dis < 0.1){
alpha = 1.0;
} else if(dis < 0.3 - width){
// alpha = 0.0;
} else if(dis < 0.3){
alpha = 1.0;
} else if(dis < 0.5 - width){
// alpha = 0.0;
} else if(dis < 0.5){
alpha = 1.0;
}
material.diffuse = diffuse;
material.alpha = alpha;
return material;
}
`,
},
}),
}),
});
this.viewer.scene.primitives.add(primitive);
// 持续旋转
let radians = 0;
viewer.scene.preUpdate.addEventListener(() => {
radians += Math.PI / 90;
primitive.appearance.material.uniforms.radians = radians;
});
旋转部分参考:https://blog.csdn.net/qq_32685139/article/details/103354213