Cesium中的primitive流光轨迹

最新推荐文章于 2024-08-29 16:24:41 发布

Darren~52HZ

最新推荐文章于 2024-08-29 16:24:41 发布

阅读量4.1k

点赞数 3

分类专栏： Cesium 文章标签： js 前端

本文链接：https://blog.csdn.net/qq_35984445/article/details/115622634

版权

Cesium 专栏收录该内容

15 篇文章 14 订阅

订阅专栏

这篇博客介绍了如何利用WebGL的着色器功能生成动态纹理，并结合Cesium的Material()方法，创建出流动的轨迹效果。通过封装的方法，可以方便地实例化、创建、获取和移除流光轨迹。文中提供了具体的代码示例和脚本下载链接，适用于地图动画和可视化场景。

摘要由CSDN通过智能技术生成

展示图：

在这里插入图片描述

功能思路：

使用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获取流光轨迹