cesium着色器编写流光四溢轨迹线

上一节我们学习了:cesium着色器实现实现上升流光飞线效果今天我们要学习的是cesium着色器实现实现上升流光飞线效果。

动态效果

获取geoJson数据

在绘制轨迹线之前，我们需要先生成轨迹，获取方式与地铁线路图geoJson数据获取类似，只不过是获取道路的轨迹线。

着色器编写

这里的着色器的编写方法和cesium着色器实现实现上升流光飞线效果的着色器方法是一样的，这里就不再重复。

给道路设置着色器材质

// 导入Cesium库的所有模块
import * as Cesium from "cesium";

// 导入路线数据，这是一个JSON文件
import roadLineData from "./roadline.json";

// 导入自定义的PolylineTrailMaterialProperty类，用于设置线的材质属性
import PolylineTrailMaterialProperty from "./PolylineTrailMaterialProperty";

export default class RoadLightLine {
  // 构造函数接收一个viewer对象作为参数
  constructor(viewer) {
    // 使用Cesium的GeoJsonDataSource.load方法加载roadLineData，并返回一个Promise
    let geoJsonPromise = Cesium.GeoJsonDataSource.load(
        roadLineData
    );
    
    // 当Promise解析成功后执行以下逻辑
    geoJsonPromise.then((dataSource) => {
      // 将解析后的数据源添加到viewer
      viewer.dataSources.add(dataSource);

      // 获取数据源中所有的实体对象
      let entities = dataSource.entities.values;
      
      // 定义一个Cesium颜色对象
      let color = new Cesium.Color(0.7, 1.0, 0.7, 1.0);

      // 创建一个PolylineTrailMaterialProperty对象，并传入定义好的颜色
      let polylineTrailMaterialProperty = new PolylineTrailMaterialProperty(
        color
      );
      
      // 遍历所有的实体对象
      entities.forEach((item) => {
        // 获取当前实体的polyline属性
        let polyline = item.polyline;

        // 将polyline的材质设置为我们定义的polylineTrailMaterialProperty
        polyline.material = polylineTrailMaterialProperty;
      });
    });
  }
}

读取一个包含道路线路数据的GeoJSON文件，并在Cesium的3D地图上绘制这些线路。它使用了自定义的PolylineTrailMaterialProperty类来设置线的材质和颜色。这样就能得到一条动态效果的光照道路线。

实例演示地址

cesium着色器编写流光四溢轨迹线

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesium着色器编写流光四溢轨迹线-实践的学习笔记

当前学习笔记实例代码下载

代码运行环境：vue3 + vite + js nodejs 14