devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

cesium-无人机航线问题_cesium.js航线高度

作者：花生_TL007 | 2024-05-17 10:13:56

赞

踩

cesium.js航线高度

1.cesium 创建三维航线 

写的磕磕绊绊 期间遇到很多问题

1.无人机的姿态实时更新

 查阅cesium文档 发现了Cesium.Transforms.headingPitchRollQuaternion(position, hpr)

2.无人机视锥跟随无人机转向

这个问题困了好久 一开始尝试自己画了锥形 后面控制锥形旋转 平移 一直没成功  只能做到一直向下探测跟随  后面做了个模型  一开始也没成功 直达发现模型修改原点起点位置  将模型用blender把起点设置成锥顶 

3.无人机飞行会有后退动作

在画航线的时候 一开始设置

  1. // interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
  2. // interpolationDegree: 2

发现在碰到重复点的时候会有一个向前起飞又回退的动作 考虑过速度和惯性问题  一直尝试也没成功 后来改成

  1. interpolationDegree: 1,
  2. interpolationAlgorithm: Cesium.LinearApproximation

 4.目前还存在的问题 

点击航线将无人机定位到航线点击位置  存在误差  在俯视的情况下 正确性颇高 但是其他角度就会有问题

  1.      init () {
  2.             const Cesium = this.Cesium
  3.             // console.log(this.path3DList)
  4.             this.showSpin = true
  5.             let _this = this
  6.             let startTime = ""
  7.             let endTime = ""
  8.             if (this.flightPathList.length) {
  9.                 startTime = this.flightPathList[0].recordTime ? moment(this.flightPathList[0].recordTime).format("YYYY-MM-DDTHH:mm:ss") + "Z" : ''
  10.                 endTime = this.flightPathList[this.flightPathList.length - 1].recordTime ? moment(this.flightPathList[this.flightPathList.length - 1].recordTime).format("YYYY-MM-DDTHH:mm:ss") + "Z" : ''
  11.             }
  12.             var viewer = new Cesium.Viewer("cesiumContainer", {
  13.                 infoBox: false,
  14.                 terrainProvider: Cesium.createWorldTerrain(),
  15.                 shouldAnimate: false,
  16.                 geocoder: false,//右上角第一个位置的查找工具
  17.                 homeButton: false,//右上角第二个位置的home图标
  18.                 sceneModePicker: false,//右上角第三个选择视角模式
  19.                 baseLayerPicker: false,//右上角第四个位置的图层选择器
  20.                 navigationHelpButton: false,//右上角第五个导航帮助按钮
  21.                 timeline: true,
  22.                 animation: false,//控制左下角的动画器件
  23.                 fullscreenButton: false,
  24.                 scene3DOnly: true,
  25.                 selectionIndicator: true,
  26.             })
  27.             //设置地形
  28.             // viewer.terrainProvider = Cesium.createWorldTerrain({
  29.             //     requestWaterMask: true,//水渲染需求
  30.             //     requestVertexNormals: true//顶点法线渲染需求
  31.             // })
  32.             // viewer.scene.globe.depthTestAgainstTerrain = true//深度显示（用于湖泊河流 水深对周围景观的影响）
  33.             // viewer.scene.globe.enableLighting = true//全局日照（受太阳，月亮的位置而影响光照信息）
  34.             // console.log(this.flightPathList)
  35.             let point = this.flightPathList[this.currentCount]
  36.             // console.log(point.yaw, point.pitch, point.roll, Number(point.height), 'height')
  37.             var initialPosition = new Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, Number(point.height))//摄像机位置 ，经度，纬度，高度
  38.             // var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(point.yaw, point.pitch, point.roll)//飞行 专用的  表示旋转角度之类的东西：
  39.             var homeCameraView = {
  40.                 destination: initialPosition,
  41.                 // orientation: {
  42.                 //     heading: Number(initialOrientation.heading) + 5, //偏航角
  43.                 //     pitch: Number(initialOrientation.pitch) + 5,     //俯仰角
  44.                 //     roll: initialOrientation.roll//滚转角
  45.                 // },
  46.                 complete: () => {
  47.                     setTimeout(() => {
  48.                         viewer.camera.zoomOut(2000)
  49.                         this.showSpin = false
  50.                     }, 2000)
  51.  
  52.                 }
  53.             }
  54.  
  55.             //飞行时，相机的动画属性设置
  56.             homeCameraView.dutaion = 1.0
  57.             homeCameraView.maximumHeight = 2000
  58.             homeCameraView.pitchAdjustHeight = 2000
  59.             homeCameraView.endTransform = Cesium.Matrix4.IDENTITY
  60.             //
  61.             // var CesiumViewerSceneController = viewer.scene.screenSpaceCameraController
  62.             // CesiumViewerSceneController.inertiaSpin = 1
  63.             // CesiumViewerSceneController.inertiaTranslate = 1
  64.             // CesiumViewerSceneController.inertiaZoom = 1
  65.  
  66.             var czml = [
  67.                 {
  68.                     id: "document",
  69.                     name: "CZML Path",
  70.                     version: "1.0",
  71.                     clock: {
  72.                         interval: `${startTime}/${endTime}`,
  73.                         currentTime: `${startTime}`,
  74.                         // currentTime: `${'2021-11-16T17:03:44Z'}`,
  75.                         multiplier: 1,
  76.                         clockStep: Cesium.ClockStep.TICK_DEPENDENT,
  77.                         // clockStep: 1
  78.                     },
  79.                 },
  80.                 {
  81.                     id: "path_2",
  82.                     name: "path2",
  83.                     availability: `${startTime}/${endTime}`,
  84.                     path: {
  85.                         show: [
  86.                             {
  87.                                 interval: `${startTime}/${endTime}`,
  88.                                 boolean: false
  89.                             }
  90.                         ],
  91.                         width: 0,
  92.                     },
  93.                     position: {
  94.                         epoch: `${startTime}`,
  95.                         cartographicDegrees: this.path3DList,
  96.                     },
  97.                 },
  98.                 {
  99.                     id: "path",
  100.                     name: "path1",
  101.                     availability: `${startTime}/${endTime}`,
  102.                     path: {
  103.                         show: [
  104.                             {
  105.                                 interval: `${startTime}/${endTime}`,
  106.                                 boolean: true
  107.                             }
  108.                         ],
  109.                         width: 6,
  110.                         material: {
  111.                             solidColor: {
  112.                                 color: { rgba: [255, 161, 65, 255], }
  113.                             }
  114.                         }
  115.                     },
  116.                     billboard: {
  117.                         color: {
  118.                             rgba: [0, 255, 255, 255]
  119.                         },
  120.                         eyeOffset: { "cartesian": [0, 0, 0] },
  121.                         pixelOffset: { "cartesian2": [0, 0] },
  122.                         horizontalOrigin: "CENTER",
  123.                         verticalOrigin: "CENTER",
  124.                         image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTYyAa/EcDUGEIgIphAKg0XRSAAFQMDqDChAADAwDC13+BJ+0oDwAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
  125.                         scale: 1,
  126.                         show: true
  127.                     },
  128.                     position: {
  129.                         epoch: `${startTime}`,
  130.                         cartographicDegrees: this.path3DList,
  131.                     },
  132.                 }
  133.             ]
  134.  
  135.             var dronePromise = Cesium.CzmlDataSource.load(czml)
  136.             var drone
  137.             var drone_2
  138.             dronePromise.then(dataSource => {
  139.                 viewer.dataSources.add(dataSource)
  140.                 drone = dataSource.entities.getById('path')
  141.                 drone_2 = dataSource.entities.getById('path_2')
  142.                 // 无人机模型
  143.                 drone.model = {
  144.                     id: 'wrj',
  145.                     name: 'wrj',
  146.                     uri: '/WRJ02.glb',
  147.                     minimumPixelSize: 48,
  148.                     scale: 0.2,
  149.                     maximumScale: 10
  150.                 }
  151.                 // uri: 'https://gist.githubusercontent.com/rahwang/9843cb77fc1c6d07c287566ed4e08ee3/raw/dc3a9ff6fc73b784519ac9371c0e2cbd3ab3dc47/CesiumDrone.gltf',
  152.                 // 添加无人机位置
  153.                 //VelocityOrientationProperty（速度方向属性）：基于所给的位置属性的速度来得出一个四元旋转属性
  154.                 // drone.orientation = new Cesium.VelocityOrientationProperty(drone.position)
  155.                 drone.position.setInterpolationOptions({
  156.                     // interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
  157.                     // interpolationDegree: 2
  158.                     interpolationDegree: 1,
  159.                     interpolationAlgorithm: Cesium.LinearApproximation
  160.                 })
  161.                 drone_2.position.setInterpolationOptions({
  162.                     interpolationDegree: 1,
  163.                     interpolationAlgorithm: Cesium.LinearApproximation
  164.                 })
  165.                 drone_2.model = {
  166.                     id: 'wrj_zhuiti',
  167.                     name: 'wrj_zhuiti',
  168.                     uri: '/WRJ_zhuiti.glb',
  169.                     minimumPixelSize: 48,
  170.                     scale: 1,
  171.                     maximumScale: 10
  172.                 }
  173.                 //跟踪无人机
  174.                 // viewer.trackedEntity = drone
  175.                 //取消跟踪无人机
  176.                 // viewer.trackedEntity = undefined
  177.                 viewer.camera.flyTo(homeCameraView)
  178.             })
  179.             //白模
  180.             // var shpTileset = new Cesium.Cesium3DTileset({
  181.             //     url: 'http://10.2.13.73:9000/model/ad9d5be0767e11ebab9c9b084bddd6a4/tileset.json',
  182.             // })
  183.             // shpTileset.style = new Cesium.Cesium3DTileStyle({
  184.             //     color: {
  185.             //         conditions: [
  186.             //             ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
  187.             //             ["${height} >= 200", "rgb(102, 71, 151)"],
  188.             //             ["${height} >= 100", "rgb(170, 162, 204)"],
  189.             //             ["${height} >= 50", "rgb(224, 226, 238)"],
  190.             //             ["${height} >= 25", "rgb(252, 230, 200)"],
  191.             //             ["${height} >= 10", "rgb(248, 176, 87)"],
  192.             //             ["${height} >= 5", "rgb(198, 106, 11)"],
  193.             //             ["true", "rgb(127, 59, 8)"],
  194.             //         ],
  195.             //     },
  196.             // })
  197.             // viewer.scene.primitives.add(shpTileset)
  198.  
  199.             viewer.timeline.makeLabel = (datetime) => {
  200.                 return this.timeFmt(datetime, "HH:mm:ss")
  201.             }
  202.             viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime)//设置时间轴可见趋近
  203.             viewer.clock.canAnimate = false
  204.             viewer.clock.onTick.addEventListener((tick) => {
  205.                 // this.scanEntity.orientation = null
  206.                 // viewer.entities.remove(this.scanBox)
  207.                 let time = this.timeFmt(tick.currentTime, "YYYY-MM-DD HH:mm:ss")
  208.                 this.preTime = this.nowTime
  209.                 this.nowTime = time
  210.                 if (this.preTime == this.nowTime) {
  211.                     return
  212.                 }
  213.                 this.currentTime = getTime(this.flightPathList[0].recordTime, time)
  214.                 let allTime = (new Date(this.flightPathList[this.flightPathList.length - 1].recordTime).getTime() - new Date(this.flightPathList[0].recordTime).getTime()) / 1000
  215.                 let nowTime = (new Date(time).getTime() - new Date(this.flightPathList[0].recordTime).getTime()) / 1000
  216.                 this.currentWidth = (nowTime * 1000) / (allTime * 1000) * 100 + '%'
  217.                 this.isPlay = viewer.clock.shouldAnimate
  218.                 this.$emit('start3D', { isPlay: viewer.clock.shouldAnimate, time, tick: viewer.clock.shouldAnimate })
  219.                 function getTime (start, now) {
  220.                     let time = (new Date(now).getTime() - new Date(start).getTime()) / 1000
  221.                     // console.log(time, 'time')
  222.                     _this.$emit('getCurrentCount', time)
  223.                     let s = showNum(time % 60)
  224.                     let m = showNum(parseInt(time / 60))
  225.                     return `${m}:${s}`
  226.                 }
  227.                 function showNum (num) {
  228.                     if (num < 10) {
  229.                         return '0' + num
  230.                     }
  231.                     return num
  232.                 }
  233.  
  234.                 //设置偏转俯仰翻滚
  235.                 if (this.timePathList[time]) {
  236.  
  237.                     let { pitch, roll, yaw, longitude, latitude, height } = this.timePathList[time]
  238.                     var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
  239.                     var position_2 = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
  240.                     //no 视锥
  241.                     var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(Number(yaw) + 90), Cesium.Math.toRadians(Number(pitch)), Cesium.Math.toRadians(Number(roll)))
  242.                     //has 视锥
  243.                     // var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(Number(yaw) + 180), Cesium.Math.toRadians(Number(pitch)), Cesium.Math.toRadians(Number(roll)))
  244.  
  245.                     var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
  246.                     drone.orientation = orientation
  247.  
  248.                     viewer.entities.remove(this.scanBox)
  249.                     var headingC = Cesium.Math.toRadians(180 + Number(yaw))
  250.                     var pitchC = Cesium.Math.toRadians(90.0 + 0)
  251.                     var rollC = Cesium.Math.toRadians(0)
  252.                     var hprC = new Cesium.HeadingPitchRoll(headingC, pitchC, rollC)
  253.                     drone_2.orientation = Cesium.Transforms.headingPitchRollQuaternion(position_2, hprC)
  254.  
  255.                 }
  256.  
  257.             })
  258.             viewer.clock.onStop.addEventListener((tick) => {
  259.                 viewer.clock.shouldAnimate = false
  260.                 this.$emit('clearMap3D')
  261.             })
  262.             //航点
  263.             this.drawPoint(viewer)
  264.             //
  265.             // currentCount
  266.             var time_count = new Date(_this.flightPathList[_this.currentCount].recordTime)
  267.             var utc_time = Cesium.JulianDate.fromDate(time_count)//UTC
  268.             viewer.clock.currentTime = Cesium.JulianDate.addHours(utc_time, 8, new Cesium.JulianDate())
  269.             //航点点击
  270.             viewer.screenSpaceEventHandler.setInputAction(function leftClick (movement) {
  271.                 var pickedFeature = viewer.scene.pick(movement.position)
  272.                 console.log(pickedFeature)
  273.                 if (pickedFeature && pickedFeature.id && pickedFeature.id._name == "point") {
  274.                     let time_bj = new Date(_this.flightPathList[pickedFeature.id._id].recordTime)
  275.                     let utc = Cesium.JulianDate.fromDate(time_bj)//UTC
  276.                     viewer.clock.currentTime = Cesium.JulianDate.addHours(utc, 8, new Cesium.JulianDate())
  277.                     return
  278.                 }
  279.                 if (pickedFeature && pickedFeature.id && (pickedFeature.id._name == "wrj_zhuiti" || pickedFeature.id._name == 'wrj' || pickedFeature.id._name == 'path2')) {
  280.                     return
  281.                 }
  282.                 if (pickedFeature && pickedFeature.id && (pickedFeature.id._name != "wrj_zhuiti" || pickedFeature.id._name != 'path2')) {
  283.                     let pointSelectArray = []
  284.                     var earthPosition = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid)
  285.                     var cartographic = Cesium.Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cesium.Cartographic())
  286.                     var lng = Cesium.Math.toDegrees(cartographic.longitude)
  287.                     var lat = Cesium.Math.toDegrees(cartographic.latitude)
  288.                     // var height = cartographic.height
  289.  
  290.                     // function getDistance (lng1, lat1, lng2, lat2) {
  291.                     //     let startPosition = new Cesium.Cartesian3.fromDegrees(lng1, lat1)
  292.                     //     let endPosition = new Cesium.Cartesian3.fromDegrees(lng2, lat2)
  293.                     //     let distance = Cesium.Cartesian3.distance(startPosition, endPosition)//求两点直线距离，单位为米
  294.                     //     return distance
  295.                     // }
  296.                     // console.log("[Lng=>" + lng + ",Lat=>" + lat + ",H=>" + height + "]")
  297.  
  298.                     // 经纬度转换成三角函数中度分表形式
  299.                     function rad (d) {
  300.                         return d * Math.PI / 180.0
  301.                     }
  302.                     // 根据经纬度计算距离
  303.                     function getDistance (lng1, lat1, lng2, lat2,) {
  304.                         var radLat1 = rad(lat1)
  305.                         var radLat2 = rad(lat2)
  306.                         var a = radLat1 - radLat2
  307.                         var b = rad(lng1) - rad(lng2)
  308.                         var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
  309.                             Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
  310.                         s = s * 6378.137 // EARTH_RADIUS;
  311.                         s = Math.round(s * 10000) //输出为公里
  312.                         return s
  313.                     }
  314.                     _this.flightPathList.forEach(el => {
  315.                         pointSelectArray.push(getDistance(el.longitude, el.latitude, lng, lat))
  316.                     })
  317.                     // console.log(lat, lng, height, pointSelectArray)
  318.                     //获取最小值的下标
  319.                     function getMinIndex (arr) {
  320.                         var min = arr[0]
  321.                         //声明了个变量 保存下标值
  322.                         var index = 0
  323.                         for (var i = 0; i < arr.length; i++) {
  324.                             if (min > arr[i]) {
  325.                                 min = arr[i]
  326.                                 index = i
  327.                             }
  328.                         }
  329.                         return index
  330.                     }
  331.                     let index = getMinIndex(pointSelectArray)
  332.                     let time_bj = new Date(_this.flightPathList[index].recordTime)
  333.                     let utc = Cesium.JulianDate.fromDate(time_bj)//UTC
  334.                     viewer.clock.currentTime = Cesium.JulianDate.addHours(utc, 8, new Cesium.JulianDate())
  335.                 }
  336.             }, Cesium.ScreenSpaceEventType.LEFT_UP)//LEFT_CLICK
  337.             //鼠标移动
  338.             var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  339.             handler.setInputAction((movement) => {
  340.                 var haveEn = viewer.scene.pick(movement.endPosition)
  341.                 // console.log(haveEn, 'haveEn1', haveEn.id._id)
  342.                 if (haveEn) {
  343.                     viewer._container.style.cursor = "pointer"
  344.                 } else {
  345.                     viewer._container.style.cursor = "default"
  346.                 }
  347.             }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
  348.             viewer._cesiumWidget._creditContainer.style.display = "none"
  349.             this.viewer = viewer
  350.             console.log(viewer)
  351.         },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/583150
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号