ceisum实现绘制线段实现动画效果

最新推荐文章于 2024-01-27 09:14:40 发布

菜鸟养成心法

最新推荐文章于 2024-01-27 09:14:40 发布

阅读量1.4k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/baidu_35105539/article/details/127276826

版权

需求:

在cesium中,要实现类似于风场动画的效果.由于数据的问题,以及要避开三维建筑等因素,我们退而求其次,根据绘制区域,由数据分析出风向流动发方向,我们负责绘制,
1.绘制两点.

    geometryInstances: new GeometryInstance({
        geometry: new PolylineGeometry({
          positions: positions,
          width: 2,
          vertexFormat: PolylineMaterialAppearance.VERTEX_FORMAT, //可以不设置，一般会根据 appearance的类型自动默认对应的类型
        }),
        attributes: {
          
        },
      }),

2 appearance

 appearance: new PolylineMaterialAppearance({
        material: Material.fromType(Material.FadeType, {
          repeat: false,
          fadeInColor: Color.fromCssColorString('#00ffff').withAlpha(0.85),
          fadeOutColor: Color.fromCssColorString('#00ffff').withAlpha(0),
          time: new Cartesian2(100.0, 1.0),
          maximumDistance: 0.75 / 2.5,
          fadeDirection: {
            x: true,
            y: false,
          },
        }),
      }),

3.加载
cesiumview.scene.primitives.add(primitive);
4.设置动画

    let max = 30;
    let min = 20;
    let zhengshu = Math.floor(Math.random() * (max - min + 1) + min);
    let step = zhengshu / 1000;
    console.log('step', step);
    //0.01-0.5
    var timex = 0;
    function render() {
      timex += step;
      if (timex >= 1) {
        timex = 0; // 控制在0.0到1.0之间
      }

      primitive.appearance.material.uniforms.time.x = timex - 0.003;
      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);

总结:整体代码

  var primitive = new Primitive({
      geometryInstances: new GeometryInstance({
        geometry: new PolylineGeometry({
          positions: positions,
          width: 2,
          vertexFormat: PolylineMaterialAppearance.VERTEX_FORMAT, //可以不设置，一般会根据 appearance的类型自动默认对应的类型
        }),
        attributes: {
          
        },
      }),
      appearance: new PolylineMaterialAppearance({
        material: Material.fromType(Material.FadeType, {
          repeat: false,
          fadeInColor: Color.fromCssColorString('#00ffff').withAlpha(0.85),
          fadeOutColor: Color.fromCssColorString('#00ffff').withAlpha(0),
          time: new Cartesian2(100.0, 1.0),
          maximumDistance: 0.75 / 2.5,
          fadeDirection: {
            x: true,
            y: false,
          },
        }),
      }),
    });
    cesiumview.scene.primitives.add(primitive);
    let max = 30;
    let min = 20;
    let zhengshu = Math.floor(Math.random() * (max - min + 1) + min);
    let step = zhengshu / 1000;
    console.log('step', step);
    //0.01-0.5
    var timex = 0;
    function render() {
      timex += step;
      if (timex >= 1) {
        timex = 0; // 控制在0.0到1.0之间
      }

      primitive.appearance.material.uniforms.time.x = timex - 0.003;
      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);