记录cesium移动模型绘制轨迹

之前开发过程中有这个需求，然后用czml发现效果并不是自己想要的，之后又用删除添加，发现这样太消耗性能，网上资料真的是太难找，我想做这个都是些高冷的大神。cesium这条学习之路真的让人心酸，做了有大半年了才开始对它有一个大概的了解，下面进入正题。大佬们发现问题还请指出，第一次写文章来之不易，转载请注明出处。本次文章查了几篇拖动与绘制轨迹线的博客，感谢大佬们的分享让我有了思路。
2022/04/19 奉献一下把，帮助一下初入门的童鞋，当初才学的时候看到一篇就想这人怎么不贴个完整的让我复制下来就能看到效果的。

设计过程

 思路：开始 --> 添加模型 --> 移动、旋转模型 --> 实时传入坐标绘制轨迹（动态轨迹）

代码

class DrawTransformCurve {constructor(arg) {//设置唯一id 备用this.viewer = arg.viewer;this.Cesium = arg.Cesium;this._poly = {};this._positionsd = {};this._polyLine = {};this._entitys = {};}// 添加模型addEntity(params) {var entiti = this.viewer.entities.add({position: this.Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.het),orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.het),new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(params.rotates && params.rotates.heading || 0), Cesium.Math.toRadians(params.rotates && params.rotates.pitch || 0), Cesium.Math.toRadians(params.rotates && params.rotates.roll || 0))),model: {uri: params.url || "./Apps/SampleData/models/CesiumAir/Cesium_Air.glb",minimumPixelSize: params.minSize || 128,//最小的模型像素maximumScale: params.MaxSize || 10000,//最大的模型像素}})this._entitys[params.id] = entiti;}// 绘制移动线addtransPolyLine(params) {var _this = thisvar Cesium = this.Cesium;var viewer = this.viewervar PolyLinePrimitive = (function () {function _(positions) {this.options = {polyline: {show: true,positions: [],material: params.color ? Cesium.Color.fromCssColorString(params.color) : Cesium.Color.RED,width: params.width || 5}};this.positions = positions;this._init();}_.prototype._init = function () {var _self = this;var _update = function () {return _self.positions;};//实时更新polyline.positionsthis.options.polyline.positions = new Cesium.CallbackProperty(_update, false);var pLine = viewer.entities.add(this.options);_this._polyLine[params.id] = pLine;};return _;})();var fromDegposition = Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.alt)if (_this._positionsd[params.id] || _this._positionsd[params.id] instanceof Array) {if (_this._positionsd[params.id].length >= 2) {if (!Cesium.defined(_this._poly[params.id])) {_this._poly[params.id] = new PolyLinePrimitive(_this._positionsd[params.id]);} else {_this._positionsd[params.id].push(fromDegposition);}} else {_this._positionsd[params.id].push(fromDegposition);}} else {_this._positionsd[params.id] = [];_this._positionsd[params.id].push(fromDegposition);}}// 开始绘制移动模型轨迹startTransfromEnt(params) {var _this = thisvar Cesium = this.Cesium;var viewer = this.viewerif (this._entitys[params.id]) {var fromDegposition = Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.alt)this._entitys[params.id]._position._value = fromDegposition;if (params.ifDrawLine)this.addtransPolyLine(params)if (params.rotates) this.rotateEnt(params)} else {this.addEntity(params)if (params.ifDrawLine)this.addtransPolyLine(params)}}// 旋转模型rotateEnt(params) {var _this = thisvar Cesium = this.Cesium;var viewer = this.viewerif (this._entitys[params.id]) {var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(params.rotates && params.rotates.heading || 0), Cesium.Math.toRadians(params.rotates && params.rotates.pitch || 0), Cesium.Math.toRadians(params.rotates && params.rotates.roll || 0));var orientation = Cesium.Transforms.headingPitchRollQuaternion(this._entitys[params.id]._position._value, hpr);this._entitys[params.id]._orientation._value = orientation}}///删/// 清空clear() {for (const key in this._entitys) {if (this._entitys.hasOwnProperty.call(this._entitys, key)) {const element = this._entitys[key];this.viewer.entities.remove(element)this.viewer.entities.remove(this._polyLine[key])this._poly[key] = undefined;this._positionsd[key] = undefined;this._polyLine[key] = undefined;this._entitys[key] = undefined;}}}
}

调用方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动轨迹绘制</title><!-- <script src="./static/Cesium.js"></script><link rel="stylesheet" href="./static/Widgets/widgets.css"> --><link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script><style>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.eventName {position: fixed;top: 100px;left: 200px;z-index: 9999;}</style>
</head><body><div id="cesiumContainer"></div><div class="eventName"><button onclick="event2()">启航</button></div><script>var viewer = new Cesium.Viewer("cesiumContainer", {animation: false,baseLayerPicker: false,fullscreenButton: false,geocoder: false,homeButton: false,infobox: false,sceneModePicker: false,selectionIndicator: false,timeline: false,scene3DOnly: true,navigationHelpButton: false,creditContainer: "cesiumContainer",fullscreenButton: false,vrButton: false,skyAtmosphere: false,shouldAnimate: true,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}),maximumScreenSpaceError: 16, //默认值16 用于提高细节细化级别的最大屏幕空间错误});viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(117.224, 31.819, 300.0),orientation: {// 指向heading: 0.0,// 视角pitch: Cesium.Math.toRadians(-90),roll: 0.0}})class DrawTransformCurve {constructor(arg) {//设置唯一id 备用this.viewer = arg.viewer;this.Cesium = arg.Cesium;this._poly = {};this._positionsd = {};this._polyLine = {};this._entitys = {};}// 添加模型addEntity(params) {var entiti = this.viewer.entities.add({id: params.id,position: this.Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.het),orientation: Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.het),new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(params.rotates && params.rotates.heading || 0), Cesium.Math.toRadians(params.rotates && params.rotates.pitch || 0), Cesium.Math.toRadians(params.rotates && params.rotates.roll || 0))),model: {uri: params.url || "./Apps/SampleData/models/CesiumAir/Cesium_Air.glb",minimumPixelSize: params.minSize || 128,//最小的模型像素maximumScale: params.MaxSize || 10000,//最大的模型像素}})this._entitys[params.id] = entiti;}// 绘制移动线addtransPolyLine(params) {var _this = thisvar Cesium = this.Cesium;var viewer = this.viewervar PolyLinePrimitive = (function () {function _(positions) {this.options = {polyline: {show: true,positions: [],material: params.color ? Cesium.Color.fromCssColorString(params.color) : Cesium.Color.RED,width: params.width || 5}};this.positions = positions;this._init();}_.prototype._init = function () {var _self = this;var _update = function () {return _self.positions;};//实时更新polyline.positionsthis.options.polyline.positions = new Cesium.CallbackProperty(_update, false);var pLine = viewer.entities.add(this.options);_this._polyLine[params.id] = pLine;};return _;})();var fromDegposition = Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.alt)if (_this._positionsd[params.id] || _this._positionsd[params.id] instanceof Array) {if (_this._positionsd[params.id].length >= 2) {if (!Cesium.defined(_this._poly[params.id])) {_this._poly[params.id] = new PolyLinePrimitive(_this._positionsd[params.id]);} else {_this._positionsd[params.id].push(fromDegposition);}} else {_this._positionsd[params.id].push(fromDegposition);}} else {_this._positionsd[params.id] = [];_this._positionsd[params.id].push(fromDegposition);}}// 开始绘制移动模型轨迹startTransfromEnt(params) {var _this = thisvar Cesium = this.Cesium;var viewer = this.viewerif (this._entitys[params.id]) {var fromDegposition = Cesium.Cartesian3.fromDegrees(params.position.lon, params.position.lat, params.position.alt)this._entitys[params.id]._position._value = fromDegposition;if (params.ifDrawLine)this.addtransPolyLine(params)if (params.rotates) this.rotateEnt(params)} else {this.addEntity(params)if (params.ifDrawLine)this.addtransPolyLine(params)}}// 旋转模型rotateEnt(params) {var _this = thisvar Cesium = this.Cesium;var viewer = this.viewerif (this._entitys[params.id]) {var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(params.rotates && params.rotates.heading || 0), Cesium.Math.toRadians(params.rotates && params.rotates.pitch || 0), Cesium.Math.toRadians(params.rotates && params.rotates.roll || 0));var orientation = Cesium.Transforms.headingPitchRollQuaternion(this._entitys[params.id]._position._value, hpr);this._entitys[params.id]._orientation._value = orientation}}///删/// 清空clear() {for (const key in this._entitys) {if (this._entitys.hasOwnProperty.call(this._entitys, key)) {const element = this._entitys[key];this.viewer.entities.remove(element)this.viewer.entities.remove(this._polyLine[key])this._poly[key] = undefined;this._positionsd[key] = undefined;this._polyLine[key] = undefined;this._entitys[key] = undefined;}}}// 销毁destroy() {}}var clickPont = new DrawTransformCurve({viewer,Cesium})var timer = nullvar timer2 = nullfunction event2() {var position = {lon: 117.224, lat: 31.819, alt: 0,}var rotates = {heading: 0,pitch: 0,roll: 0}var _this = thisvar fromDegposition = Cesium.Cartesian3.fromDegrees(position.lon, position.lat, position.alt)clearInterval(timer2)timer2 = setInterval(() => {clickPont.startTransfromEnt({id: 'a3-60',position,rotates,ifDrawLine: true,})position.lon += Math.random() * 0.0001;position.lat += Math.random() * 0.0001;position.alt += Math.random() * 1;rotates.heading += Math.random() * 10;rotates.pitch += Math.random() * 10;rotates.roll += Math.random() * 10;}, 100)}</script>
</body></html>

效果

记录cesium移动模型绘制轨迹相关推荐

cesium绘制轨迹以及轨迹回放
//加轨迹线 let lineData = [106,39,132,48,120,32]; let entities = viewer.entities.add({polyline:{position ...
对比分析OSG与Cesium中模型LOD的异同
1. LOD 熟悉渲染的读者可能经常听到LOD(Level Of Detail),也就是用不同的细节层次来表达同一个对象.比如下图中的雕像,从左到右精细度越来越低,最后甚至仅剩一个轮廓,已经看不出人形 ...
iOS百度地图SDK之实时绘制轨迹(后台仍执行)
首先,对于百度地图SDK的配置和环境搭建就不做说明,需要的人可以博客中另一篇文章看 <iOS百度地图SDK基本使用> ,本文的重点在于实现实时绘制轨迹的功能,并且对细节进行处理和优化 1. ...
Cesium设置模型朝向速度矢量方向
Cesium设置模型朝向速度矢量方向文章目录 Cesium设置模型朝向速度矢量方向 1. 需求场景 2. 技术路线 2.1 VelocityOrientationProperty 2.2 Veloc ...
[Cesium] 使用primitive绘制多段线
cesium里面绘制点线面可以通过entity或者primitive.今天先记录下使用primitive绘制线的代码 //创建多段线和每段颜色let startLng = 100.9636687593 ...
android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /** * 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标 ...
python运动目标绘制轨迹_实时轨迹绘制Matplotlib
我想用matplotlib绘制轨迹.在我编写的程序的每次迭代中,我都会得到对象的x和y坐标.我想在xy图上画出这个物体的运动.我使用了以下代码:import matplotlib.pyplot as ...
风场可视化：绘制轨迹
引子了解绘制粒子之后,接着去看如何绘制粒子轨迹. 源库:webgl-wind Origin My GitHub 绘制轨迹在原文中提到绘制轨迹的方法是将粒子绘制到纹理中,然后在下一帧上使用该纹理作为 ...
基于运动学模型的轨迹跟踪控制
章四基于运动学模型的轨迹跟踪控制 MPC(4)基于运动学模型的轨迹跟踪控制器设计无人驾驶车辆模型预测控制(龚建伟)第四章基于运动学模型的轨迹跟踪控制(仿真部分) 无人车辆在惯性坐标系中,车辆必须 ...
Cesium|xt3d模型展开动画
Cesium|xt3d模型展开动画效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...

记录cesium移动模型绘制轨迹

记录cesium移动模型绘制轨迹

记录cesium移动模型绘制轨迹

设计过程

代码

调用方式

效果

记录cesium移动模型绘制轨迹相关推荐

最新文章

热门文章