Cesium实现动态绘制轨迹线

这篇具有很好参考价值的文章主要介绍了Cesium实现动态绘制轨迹线。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求就是一个飞机动画,飞机飞到哪里,轨迹线就画到哪里。

我的轨迹线非常长,从我国出发一直到欧洲那边,光是经过的点就有7000多个。

刚开始的时候想要使用的是entity的画线方法进行轨迹线的绘制,如果数据量不大,应该是可以实现的。

整体思路就是:先创建一个PolyLine对象,然后监听时间,每一帧都对实体线对象进行position的更换。伪代码如下:

// 定义折线实体
var polylineEntity = viewer.entities.add({
    polyline: {
        positions: positions,
        width: 5,
        material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.1,
            color: Cesium.Color.YELLOW
        })
    }
});

viewer.clock.onTick.addEventListener(function() {
    ...
    // 其它操作
    positions进行更新操作
    polylineEntity.polyline.positions = positions;
});

但是我使用这种方法的话,虽然代码层面并不会报错,但是不要说轨迹线的绘制了,整个模型的动画都会卡死。

于是开始转变使用primitive对轨迹线进行绘制,总体思路跟entity保持不变,唯一改变的就是我暂时还没找到像polylineEntity.polyline.positions = positions;这样的一句代码,能够直接改变线的位置和经过的点。

所以我采取了比较笨的方法:每一次添加线之前先将前面一条删去,然后再添加一条。听起来似乎对性能要求更高了,但由于primitive使用更底层的方法进行绘制,就算这样进行绘制,对性能的要求也要远远低于之前使用entity的那种方法。至少我现在可以让我的轨迹线正常绘制,只是在距离比较长后还是有一点点的卡帧,不过也还处在可接受的范围内。

代码如下:

// 动态绘制飞机的轨迹线
updatePolyLine(positions, viewer) {
    // 最开始的时候没有线,后面点肯定就不止2个,所以也可以正常移除。
  if (positions.length>=2) {
    viewer.scene.primitives.remove(window.line);
  }
  if (positions.length < 2) {
    // 这个地方我是为了在刚开始的时候不要报错,因为primitive绘制线要求至少有两个点
    positions = [
      new Cesium.Cartesian3.fromDegrees(
        108.89080568,
        34.22720682,
        9997.06879914
      ),
      new Cesium.Cartesian3.fromDegrees(
        108.86996023,
        34.22265071,
        9994.60869058
      ),
    ];
  }
  let LineInstanceArr = [];
  //定义折线几何
  let polyline = new Cesium.PolylineGeometry({
    positions: positions,
    width: 5.0,
    vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT,
  });
  var LineInstance = new Cesium.GeometryInstance({
    geometry: polyline,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.RED
      ),
    },
  });
  LineInstanceArr.push(LineInstance);
   
  // 这里使用window.line的原因是我不想让vue组件对我的cesium绘制的任何实体进行监控,以免出现效率问题,这在我的另外一篇博客中有提到
  window.line = new Cesium.Primitive({
    geometryInstances: LineInstanceArr,
    //折线外观
    appearance: new Cesium.PolylineColorAppearance({
      translucent: false,
    }),
    asynchronous: false,
  });

  viewer.scene.primitives.add(line);
},

positions就是跟之前entity的positions一个意思,也就是一个列表,里面存放了所有的点的经纬度。

下面演示一下绘制效果:文章来源地址https://www.toymoban.com/news/detail-504027.html

Cesium实现动态绘制轨迹线

到了这里,关于Cesium实现动态绘制轨迹线的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • MATLAB绘制根轨迹超简单!

    在分析系统性能时,根轨迹可以更直观地表现系统时间响应的全部信息。 工具:MATLAB R2020b  打开MATLAB在命令行窗口输入函数 num=[ ]% 开环传递函数的分子(numerator)系数 中间用空格隔开即可 den=[ ] %开环传递函数的分母(denominator)系数 中间用空格隔开即可 sys=tf(num,den)%tf建立

    2024年02月09日
    浏览(43)
  • 【SLAM学习】基于Pangolin绘制运动轨迹

    Pangolin库 是一个轻量级的跨平台视图控制库,主要用于可视化、交互和调试三维数据。该库提供了一系列图形界面工具,包括窗口、OpenGL渲染器、3D相机、图像显示等,可以方便地进行三维数据可视化和交互。 Pangolin库 的主要特点如下: 轻量级:Pangolin库的代码量很少,只依

    2024年02月03日
    浏览(43)
  • 【业务功能篇20】Springboot java逻辑实现动态行转列需求

    在此前,我也写过一个行转列的文章,是用存储过程sql处理的一个动态的逻辑 Mysql 存储过程Mybatis框架call调用 实现动态行转列 那么后面我们同样又接收了业务的一个新需求,针对的是不同的业务数据,做的同样的一个展示数据报表,同样还是产品归属信息表头,拼接查询年

    2024年02月09日
    浏览(46)
  • [lammps教程]OVITO绘制原子运动轨迹线

    一区Script Materialia期刊:多主元素合金中的短程有序域扩散一文,研究了CrCoNi合金和MoNbTa合金中原子的扩散过程,文中有出现如下图所示的原子运动轨迹线。这种原子运动轨迹线我们在研究扩散过程中常常会用到。 图参考自:Bin Xing, Xinyi Wang, William J. Short-range order loc

    2024年02月09日
    浏览(40)
  • 用html实现一个静态登陆页面-可根据需求更改样式

    一、创建html文件,vscode下载相关插件 我们先选择一个文件夹创建login.html,.之前的文件命无所谓,.之后就必须为html或者htm。 在编辑改文件输入!且出现提示后按回车或按tab快捷生成基础代码。 然后我们下载一个可以方便我们开发的插件。 搜索之后点击一下然后下载即可。

    2024年02月04日
    浏览(64)
  • cesium绘制点、线、面

    点 线 面 在点云模型上绘制点线面与地形上类似 区别在于 取点坐标时需取模型上点的坐标 点 线 面 使用CZML进行模型的绘制和加载 线

    2024年02月11日
    浏览(36)
  • Cesium教程(八):绘制几何形体

    目录 1、点要素 2、线要素 2.1 折线要素 2.2 轮廓线 3、面要素 4、体要素

    2024年02月08日
    浏览(41)
  • 【MATLAB】根轨迹的绘制及rltool工具的使用

    在绘制系统的根轨迹之前,需要知道传递函数在matlab中如何表示。 在matlab中,通常用向量表示一个多项式。例如P=[1 2 3 ]表示 F(s)=s 2 +2s+3。而对于传递函数的表示,通常利用一个向量num表示其分子多项式,den表示分母多项式。例如表示 F ( s ) = 3 s 2 + s s 3 + 5 s + 8 F(s)=frac{3s^2+s

    2024年02月08日
    浏览(38)
  • uniapp结合Canvas+renderjs根据经纬度绘制轨迹(二)

    ​ 根据官方建议要想在 app-vue 流畅使用 Canvas 动画,需要使用 renderjs 技术,把操作 canvas 的js逻辑放到视图层运行,避免逻辑层和视图层频繁通信。 这里呢结合 renderjs 技术实现绘制轨迹图形。 你可能需要先了解 renderjs 如何数据通讯:renderjs 与 app-vue之间数据交互 html中使用

    2024年02月11日
    浏览(43)
  • cesium 绘制工具 鼠标提示tips工具组件

    本专题主要是针对学习cesium小伙伴,在项目中实践总结的一些工具,以及会详细介绍,知识和封装的原理,废话不多说,此文介绍的是,鼠标提示tips工具组件,在项目中使用会优化交互效果,对客户友好,例如标绘工具,地图操作。 之前在网上看到的都是,通过动态创建,

    2024年03月21日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包