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一个意思,也就是一个列表,里面存放了所有的点的经纬度。
下面演示一下绘制效果:
Cesium实现动态绘制轨迹线相关推荐
- VUE+Cesium 初始化地球,加载三维模型(.glb),绘制轨迹线,homebutton 按键重写(默认定位位置的设置)
Cesium是什么 我们打开Cesium官网,能够很清晰的看到官方赋予Cesium的使命,即构建世界一流的3D地理空间应用程序.那Cesium到底是个什么东东呢? Cesium是一个跨平台.跨浏览器的 ...
- OpenGL中绘制轨迹线
在加载进模型后,有时候需要根据模型的移动来绘制轨迹线,假设该轨迹由机器人模型的某个关节,通过机器人关节的移动绘制出,思路如下: 获取机器人模型该关节在世界坐标系中的模型矩阵 根据模型矩阵及起点坐标的值 ...
- Cesium|xt3d动态轨迹线
Cesium|xt3d动态轨迹线 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head& ...
- 使用Cesium动态绘制点、线、面、圆、矩形
将以下代码复制到https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Drawing%20on%20Terrain.html查看Demo. va ...
- cesium动态绘制圆,矩形,自定义区域
cesium动态绘制圆,矩形,自定义区域 自己封装了一个类,可以放在js文件中引入项目,具体使用和代码如下 class Draw {constructor(viewer, config) {/**ce ...
- Cesium 点击绘制线/折线(动态绘制线/折线)
思路和之前做 Cesium 点击绘制多边形(动态绘制多边形) 一样的,点击查看 这里重点说一下: CallbackProperty是一个类,其值由回调函数延迟计算.也就是说它在不断地自我调用,每当其返 ...
- Cesium实现卫星在轨绕行
Cesium实现卫星在轨绕行 这个效果其实网上很多案例了,本来不打算写了,但是做都做了,稍微来说一下吧,代码实测可用! 最后的效果就是这个样子的啦! 就是很简单的一个卫星,放射信号,然后围着轨道转圈圈 ...
- 百度地图api实现渐变色轨迹线
使用百度地图api实现的渐变色轨迹线,效果如下: 实现方法: 1.百度地图api使用 首先引入百度地图api的依赖文件 <script type="text/javascript&qu ...
- Windows HTML本地快速渲染轨迹线
有时候需要排查原始数据是否有问题,最直接的就是可视化看效果. Windows渲染有多种方法,可以用mapbox.echarts.也可以用minedata等: echarts渲染轨迹线 minedata ...
最新文章
- 更好的内存管理-jemalloc (redis 默认使用的)
- 基于 OSGi 的面向服务的组件编程
- 15_多子图-Subplot、Subplot: 使用多个figures和 axes、替代解决方案:
- mysql oa数据库设计_OA项目1:环境搭建之数据库创建与环境添加
- C++静态成员函数小结(转)
- 计算机应用技术爱岗敬业,高职专业人才培养方案(计算机应用技术).doc
- data Mining with Weka: Trailer More Data Mining with Weka 用weka 进行数据挖掘 Weka 用weka 进行更多数据挖掘...
- 【滑动窗口】leetcode1456:定长子串中元音的最大数目
- 并发学习之CyclicBarrier循环栅栏
- UINavigationBar颜色设置 用色码设置有误差
- VxWorks的漏洞分析与解决方案
- 做市商交易策略-期货
- MySQL 性能优化参数分析
- 8、16、32-BIT系列单片机区别与特点
- 二维数组在c语言中的作用,C语言中的二维数组
- 游戏数学: 计算屏幕点中的平面上的点(上帝视角)
- 立体视觉入门指南:相机标定之Zhang式标定法
- 转载:BP(反向传播算法)公式推导及例题解析
- open-falcon分布式安装
- 加速Eclipse使其成为超快的IDE