Vue3+Cesium流动管线效果核心源码免费分享(第60篇)-夜雨聆风

Vue3+Cesium流动管线效果核心源码免费分享(第60篇)

欢迎关注webgis学习，一起探索Cesium高级应用，持续更新中……

流动管线效果常常广泛应用于智慧城市管理平台，实时展示供水、燃气、石油等管网介质的流动状态与方向。通过动态纹理模拟流体运动，结合传感器数据，可直观监测管道压力、流量异常，助力运维人员快速定位泄漏点，提升城市基础设施数字化监管效率。本文通过Vue3+Cesium实现流动管线效果，且核心源码免费分享给大家，先看效果：

具体实现

1、创建geometry，包括管线路径端点坐标，以及管线圆的坐标。

let geometry = new PolylineVolumeGeometry({        polylinePositions: positions,        vertexFormat: VertexFormat.POSITION_NORMAL_AND_ST,        shapePositions: computeCirclePositions(100.0),        cornerType: CornerType.MITERED,    })

2、创建管线Primitive,并添加动态材质。这里将颜色、百分比等参数固定写死了，感兴趣的童鞋可以参考之前的文章分离颜色、百分比等属性以达到动态调整流动效果的目的。

pipelinePrimitive = viewer?.scene.primitives.add(        new Primitive({            geometryInstances: new GeometryInstance({                geometry: geometry,            }),            appearance: new MaterialAppearance({                material: new Material({                    fabric: {                        uniforms: {                            color: Color.fromCssColorString('#22ffff'),                            percentage: 0.085,                            offset: 0.0,                        },                        source: `            uniform vec4 color;            uniform float percentage;            uniform float offset;            czm_material czm_getMaterial(czm_materialInput materialInput)            {                czm_material material = czm_getDefaultMaterial(materialInput);                vec2 st = materialInput.st;                material.diffuse = color.rgb;                material.alpha = 1.0-mod((1.0-st.s)+offset,percentage)*(1.0/percentage);                return material;            }`,                    },                })            }),        })    )

3、监听场景每帧渲染事件（preUpdate），持续更新材质中的纹理偏移量（offset），使贴图沿管线方向循环移动，从而模拟水流、电流等介质的定向流动动画。偏移量每次递增0.001，达到1.0后归零循环，数值大小直接控制流速快慢

 viewer?.scene.preUpdate.addEventListener(function () {        var offset = pipelinePrimitive?.appearance.material.uniforms.offset        offset += 0.001        if (offset > 1.0) {            offset = 0.0        }        pipelinePrimitive!.appearance.material.uniforms.offset = offset;    })

4、实现效果

5、本系列教程代码采用Vue3+Cesium+Typescript封装编写，后续持续更新，基本会涵盖 Cesium 从基础配置到高阶实战的全链路技术体系，敬请期待。读者朋友如需源码的话，欢迎在公众号输入栏私信咨询作者。

欢迎关注本公众号，如需其他合作，欢迎私信。