Cesium中的primitive流光轨迹

展示图:

在这里插入图片描述

功能思路:

使用WebGL的着色器功能,生成动态的动画纹理
接着利用Cesium的 Material()方法对应的fabric.source属性将动画纹理赋值上去
最后创建线实体,在线的材质属性中赋值,就成功了

封装好的方法调用

1、实例化方法

var path = new Streamerpath();

2、创建流动轨线

var positions = [
            [
                112.5535107330670854, 37.8612394690389991,
                112.5538984750296407, 37.8641210799073491,
                112.5548608906540977, 37.8727717334314775,
                112.5554135315933593, 37.8753251873433427,
                112.5555353064015094, 37.8773057395881594,
                112.5555974196704341, 37.8815753240675477
            ],
            [
                112.5282013702352373, 37.8808761261214144,
                112.5275305518636770, 37.8730571421732520,
                112.5264227060055191, 37.8609562994944753
            ],
            [
                112.5220237760754713, 37.8643118141969666,
                112.5201885781767999, 37.8726141616944716
            ]
        ]
var obj = {
            positions: positions,//positions 经纬度二维数组,没有高度 position 经纬度数组,没有高度
           //position:[112.5220237760754713, 37.8643118141969666,112.5201885781767999, 37.8726141616944716]
            lineColor: "#0033FF",//线的颜色
            lineAlpha: 1.0,//线的透明度
            linewidth: 5.0,//线的宽度
            pointColor: "#FFFFFF",//移动点的颜色
            pointAlpha: 1.0,//移动点的透明度
            id:"line",//
            speed:0.5//移动速度
        }
        path.create(obj);

3、根据id获取流光轨迹

path.getprimitivebyid("line");

4、根据id移除流光轨迹

path.removeprimitive("line");

5、移除所有流光轨迹

path.removeprimitiveList()

脚本下载
https://download.csdn.net/download/qq_35984445/16633314

  • 3
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Darren~52HZ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值