Cesium实战功能教程之图片轨迹线

最新推荐文章于 2025-04-12 22:49:59 发布

coderzyq

最新推荐文章于 2025-04-12 22:49:59 发布

阅读量799

点赞数 5

分类专栏： A_qiang_Cesium实战功能集文章标签： webgl 前端 3d

本文链接：https://blog.csdn.net/coderzyq/article/details/140742077

版权

highlight: qtcreator_dark
theme: github

Cesium保姆教程之图片轨迹线

本教程主要将工作中用的cesium功能特点本着简洁的原则进行总结，尽量对每一步代码进行注释，以此来达到通透理解。本篇是本教程的第二个功能，主要实现图片轨迹线材质的实现和对象展示效果，可将轨迹绘制成一条流动的轨迹线并将轨迹赋予图片纹理，以此来实现图片在流动的效果。

实现效果

图形轨迹动态线.gif

实现原理

图片轨迹线的实现原理是通过自定义对应的图像轨迹材质ImageTrailMaterial,借助于Cesium的entity类的polyline对象对轨迹进行绘制，再将材质按照纹理对象附到轨迹线上。

实现过程

材质对象

材质绘制（WebGL）

fragementShader（参考网上教程）

uniform sampler2D image; 
      uniform float speed;
      uniform vec4 color;
      uniform vec2 repeat;
      
      czm_material czm_getMaterial(czm_materialInput materialInput){
        czm_material material=czm_getDefaultMaterial(materialInput);
        vec2 st=repeat * materialInput.st;
        float time=fract(czm_frameNumber*speed/1000.);
        //st.s是横轴方向运动,st.t是纵轴，
        //vec2(fract(st.s-time),st.t)是横轴按照时间变化而变化，纵轴保持正常不变化
        vec4 colorImage=texture2D(image,vec2(fract(st.s-time),st.t));
        if(color.a==0.){
          material.alpha=colorImage.a;
          material.diffuse=colorImage.rgb;
        }else{
          material.alpha=colorImage.a*color.a;
          material.diffuse=max(color.rgb*material.alpha*3.,color.rgb);
        }
        return material;
      }

完整代码

import * as Cesium from "cesium"
/**
 * 定义Cesium材质对象
 */
class ImageTrailMaterial {
   
  constructor(options = {
    }) {
   
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this._speed = undefiend;
    this._speedSubscription = undefined;
    this._image = undefined;
    this._imageSubscription = undefined;
    this._repeat = undefined;
    this._repeatSubscription = undefined;
    this.color = options.color || Cesium.Color.fromBytes(0, 0, 255,