当前位置：首页 > news >正文

前端~三维地图（cesium）动态材质飞线

news 来源：原创 2025/5/15 9:48:45

自定义飞线材质 FlyLineMaterial.ts

import * as Cesium from "cesium";// 修改：新增流动区域颜色和速率参数
const FlyLineShaderSource = `
uniform vec4 color;
uniform vec4 flowColor; 
uniform float percent;
uniform float speed;czm_material czm_getMaterial(czm_materialInput materialInput) {vec4 outColor = color;czm_material material = czm_getDefaultMaterial(materialInput);vec2 st = materialInput.st;float time = fract(czm_frameNumber * speed / 144.0);float startPosition = time;if(st.s > startPosition - percent && st.s < startPosition) {float value = (st.s - (startPosition - percent)) / percent;outColor.rgb = mix(color.rgb, flowColor.rgb, value);}material.diffuse = czm_gammaCorrect(outColor.rgb);material.alpha = outColor.a;return material;
}`;type FlyLineOptions = {color: Cesium.Color; // 线主体颜色flowColor: Cesium.Color; // 流动线颜色percent: number; //流动区域占整个线段的比例（0~1）speed: number; //流动速度
};export class FlyLineMaterial extends Cesium.Material {constructor(options: FlyLineOptions) {const { color, flowColor, percent, speed } = options; // 解构参数super({translucent: false,fabric: {type: "FlyLine",uniforms: {color,flowColor, // 新增：流动区域颜色percent,speed, // 新增：流动速度},source: FlyLineShaderSource, // 使用抽离的着色器代码},});}
}

使用飞线材质

 const positions = Cesium.Cartesian3.fromDegreesArray([125.321753, 43.810582, 126.554969, 43.834361,]);// 创建几何const geometry = new Cesium.PolylineGeometry({positions: positions,width: 1,});const instance = new Cesium.GeometryInstance({geometry: geometry,});const appearance = new Cesium.PolylineMaterialAppearance({material: new FlyLineMaterial({color: Cesium.Color.fromCssColorString("#2d7367"),flowColor: Cesium.Color.fromCssColorString("#2ddcab"),percent: 0.1,speed: 0.5,}),});const primitive = new Cesium.Primitive({geometryInstances: instance,appearance: appearance,});viewer.scene.primitives.add(primitive);