Cesium中匀速飞行的实现
2021/10/30 23:10:01
本文主要是介绍Cesium中匀速飞行的实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
飞行的主要实现思路是通过轨迹点计算空中飞行距离,然后计算每段匀速飞行的时间,当然你也可以变速。本文就是匀速飞行的实现,希望能对你有所帮助。
参考文章
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <link href="../../Cesium/Widgets/widgets.css" rel="stylesheet"> <script type="text/javascript" src="../../Cesium/Cesium.js"></script> <title>飞行</title> </head> <body style="margin: 0px;width:100%;height:100%;"> <div id="cesiumContainer" style="width:100%;height:100%;position:absolute;"></div> <div style="top:10px;left:10px;position:absolute;"> <div style="background: #fff;padding:10px;" id="play">飞行</div> <div style="background: #fff;padding:10px;" id="pause">暂停</div> <div style="background: #fff;padding:10px;" id="time">设置当前时间</div> </div> </body> <script> //created by onegiser at 2021-10-30 const key='天地图key' const viewer = new Cesium.Viewer('cesiumContainer', { imageryProviderViewModels: [ new Cesium.ProviderViewModel({ name: "天地图影像", iconUrl: "/imgs/map/tdt_img.jpg", tooltip: "", creationFunction: () => { const imgImageryProvider = new Cesium.WebMapTileServiceImageryProvider({ url: "http://t{s}.tianditu.com/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + key, subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], tilingScheme: new Cesium.GeographicTilingScheme(), tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"] }) return [imgImageryProvider] } }), ] }) let inter, entity, start, stop //飞行数据 const flyDatas = { "properties": { "id": "fad07e10-1854-11ec-90a2-97310cdff148" }, "geometry": { "type": "LineString", "coordinates": [ [ 84.26606989058006, 28.893720619299657, 6518.704454870537 ], [ 84.5499583941043, 28.75363498215204, 6036.864577931667 ], [ 84.92774603698726, 28.572093371042484, 4776.540165893245 ], [ 85.57643103471693, 28.310271180323234, 5333.176522423159 ] ] } } const createPosition = (datas, time, height) => { let totalDistance = 0//总的距离 const distances = [] const positions = [] const times = [] const property = new Cesium.SampledPositionProperty() if (datas) { for (let i in datas.geometry.coordinates) { const coordinates = datas.geometry.coordinates[i] const position = Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], height ? height : coordinates[2]) positions.push(position) if (Number(i) === 0) { } else { const lastPosition = positions[Number(i) - 1] const geoPositions = [Cesium.Ellipsoid.WGS84.cartesianToCartographic(lastPosition), Cesium.Ellipsoid.WGS84.cartesianToCartographic(position)] const ellipsoidGeodesic = new Cesium.EllipsoidGeodesic(geoPositions[0], geoPositions[1]) const distance = ellipsoidGeodesic.surfaceDistance//表面距离 distances.push(distance) totalDistance += distance } } const speed = totalDistance / time let start, stop for (let i in positions) { const position = positions[i] if (Number(i) === 0) { start = Cesium.JulianDate.now() // stop = Cesium.JulianDate.addSeconds(start, time, new Cesium.JulianDate()) property.addSample(start, position) times.push(start.clone()) } else { const _time = distances[Number(i) - 1] / speed//根据速度计算本线段的时间 const tempTime = Cesium.JulianDate.addSeconds(times[Number(i) - 1], _time, new Cesium.JulianDate()) times.push(tempTime) property.addSample(tempTime, position) } } } return { property, times, totalDistance } } const viewFly = (viewer, datas) => { const id = "router-fly-line" const time = 60 const { property, times, totalDistance } = createPosition(datas, time) if (times && times.length > 1) { start = times[0] stop = times[times.length - 1] const availability = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start, stop })]) const entityOption = { id, name: id, availability, position: property, orientation: new Cesium.VelocityOrientationProperty(property), } const model = { show: true, uri: "/imgs/models/feiji.glb", scale: 1, minimumPixelSize: 100, heightReference: Cesium.HeightReference.NONE, } entityOption.model = model entity = viewer.entities.add(entityOption) viewer.clock.startTime = start.clone() viewer.clock.currentTime = start.clone() viewer.clock.stopTime = stop.clone() viewer.clock.clockRange = Cesium.ClockRange.CLAMPED viewer.clock.shouldAnimate = false } } function setClockCurrentTime(time) { viewer.clock.currentTime = Cesium.JulianDate.addSeconds(start, time, new Cesium.JulianDate()) } viewFly(viewer, flyDatas) let t = 0 function interFun() { inter = setInterval(() => { t++ console.log(t) if (t === 1) { console.log(viewer.camera) } if (t === 30) { console.log(viewer.camera) } }, 1000) } function setViewer() { viewer.scene.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(84.26606989058006, 28.893720619299657, 20000), // 点的坐标 orientation: { heading: 6.273949775088365, pitch: -0.7857772222180337, roll: 6.283148089310608, } }) } document.getElementById("play").onclick = () => { viewer.trackedEntity = entity setTimeout(()=>{ setViewer() },5000) viewer.clock.shouldAnimate = true interFun() } document.getElementById("pause").onclick = () => { viewer.clock.shouldAnimate = false if (inter) { clearInterval(inter) } } document.getElementById("time").onclick = () => { setClockCurrentTime(30) } </script> </html>
这篇关于Cesium中匀速飞行的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28pyqt 怎么打包整个项目-icode9专业技术文章分享
- 2024-09-28laravel Commands 创建带有参数的 Artisan 命令的步骤和示例-icode9专业技术文章分享
- 2024-09-28antd怎么实现渲染tiff图片-icode9专业技术文章分享
- 2024-09-28英文半角中划线和中文全角的中划线有什么区别-icode9专业技术文章分享
- 2024-09-28nvm npm 和node 他们之间有什么关系-icode9专业技术文章分享
- 2024-09-28Node Version Manager (nvm)使用教程-icode9专业技术文章分享
- 2024-09-28nvm命令太慢,是什么原因-icode9专业技术文章分享
- 2024-09-28Kotlin 如何增加、删除和修改 MutableStateFlow 中的值。-icode9专业技术文章分享
- 2024-09-28Kotlin的stateFlow.update 写法介绍-icode9专业技术文章分享
- 2024-09-28kotlin 怎么获取当前时间格式-icode9专业技术文章分享