使用cesium使用飞行漫游功能以及原地平滑转向

在cesium里面实现飞行漫游，由于没有找到合适的案例，自力更生，丰衣足食。

相机的移动主要两种方式:

setView,flyTo

其中flyTo测试了，感觉不合适，所以用了setView,当然只是自己的浅薄认识，如有错误，敬请指正。

废话不多说了，直接上代码，基本都能看懂吧，我尽量写了注释了。

另外代码和环境我都上传了，地址:https://download.csdn.net/download/dragonrxl/11579847

<!DOCTYPE html>
<html lang="en">
<head><!-- Use correct character set. --><meta charset="utf-8"><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>cisium airplane trip</title><script src="Build/Cesium/Cesium.js"></script><style>@import url(Build/Cesium/Widgets/widgets.css);html, body, #cesiumContainer {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}.cesium-widget-credits{ display:none} /**  隐藏版权信息 **/.cesium-viewer .cesium-widget-credits{ display:none }</style>
</head>
<body><div id="cesiumContainer"></div><script>var viewer = new Cesium.Viewer('cesiumContainer', {geocoder: false,//是否显示geocoder小器件，右上角查询按钮homeButton:false,//是否显示Home按钮sceneModePicker:false,//是否显示3D/2D选择器baseLayerPicker:false,//是否显示图层选择器navigationHelpButton:false,//是否显示右上角的帮助按钮animation:false,//是否创建动画小器件，左下角仪表creditContainer:"cesiumContainer",// 对应上面div的IDtimeline:false,//是否显示时间轴fullscreenButtion:false,//是否显示全屏按钮vrButton:false,selectionIndicator : false,//是否显示选取指示器组件});// 上面配置选项可以控制部分控件是否显示viewer.scene.debugShowFramesPerSecond = true;// 显示帧率/** 默认使用bing地图，转换为google地图开始 **/var google = new Cesium.UrlTemplateImageryProvider({url : 'http://mt0.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}',tilingScheme : new Cesium.WebMercatorTilingScheme(),maximumLevel : 20});viewer.imageryLayers.addImageryProvider(google);/** 默认使用bing地图，转换为google地图结束 **//** 相机视角飞行 开始 **/var marks = [{lng: 116.812948,lat:36.550064, height:100, flytime:15},// height:相机高度(单位米) flytime:相机两个标注点飞行时间(单位秒){lng: 116.812948,lat:36.560064, height:100, flytime:15},{lng: 116.802948,lat:36.560064, height:100, flytime:15},{lng: 116.802948,lat:36.550064, height:100, flytime:15},];// 地标集合 根据地标顺序来进行漫游var marksIndex = 1;var pitchValue = -20;viewer.scene.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(marks[0].lng,marks[0].lat, marks[0].height),  //定位坐标点，建议使用谷歌地球坐标位置无偏差duration:7   //定位的时间间隔});setTimeout(function(){flyExtent();},7000);function  flyExtent(){// 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值var pitch = Cesium.Math.toRadians(pitchValue);// 时间间隔2秒钟setExtentTime(marks[marksIndex].flytime);var Exection = function TimeExecution() {var preIndex = marksIndex - 1;if(marksIndex == 0){preIndex = marks.length -1;}var heading = bearing(marks[preIndex].lat, marks[preIndex].lng, marks[marksIndex].lat, marks[marksIndex].lng);heading = Cesium.Math.toRadians(heading);// 当前已经过去的时间，单位svar delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);var originLat = marksIndex == 0 ? marks[marks.length - 1].lat : marks[marksIndex-1].lat;var originLng = marksIndex == 0 ? marks[marks.length - 1].lng : marks[marksIndex-1].lng;var endPosition = Cesium.Cartesian3.fromDegrees((originLng+(marks[marksIndex].lng-originLng)/marks[marksIndex].flytime*delTime), (originLat+(marks[marksIndex].lat-originLat)/marks[marksIndex].flytime*delTime), marks[marksIndex].height);viewer.scene.camera.setView({destination: endPosition,orientation: {heading: heading,pitch : pitch,}});if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {viewer.clock.onTick.removeEventListener(Exection);changeCameraHeading();}};viewer.clock.onTick.addEventListener(Exection);}// 相机原地定点转向function  changeCameraHeading(){var nextIndex = marksIndex + 1;if(marksIndex == marks.length - 1){nextIndex = 0;}// 计算两点之间的方向var heading = bearing(marks[marksIndex].lat, marks[marksIndex].lng, marks[nextIndex].lat, marks[nextIndex].lng);// 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值var pitch = Cesium.Math.toRadians(pitchValue);// 给定飞行一周所需时间，比如10s, 那么每秒转动度数var angle = (heading - Cesium.Math.toDegrees(viewer.camera.heading)) / 2;// 时间间隔2秒钟setExtentTime(2);// 相机的当前headingvar initialHeading = viewer.camera.heading;var Exection = function TimeExecution() {// 当前已经过去的时间，单位svar delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;viewer.scene.camera.setView({orientation: {heading : heading,pitch : pitch,}});if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {viewer.clock.onTick.removeEventListener(Exection);marksIndex = ++marksIndex >= marks.length ? 0 : marksIndex;flyExtent();}};viewer.clock.onTick.addEventListener(Exection);}// 设置飞行的时间到viewer的时钟里function setExtentTime(time){var startTime = Cesium.JulianDate.fromDate(new Date());var stopTime = Cesium.JulianDate.addSeconds(startTime, time, new Cesium.JulianDate());viewer.clock.startTime = startTime.clone();  // 开始时间viewer.clock.stopTime = stopTime.clone();     // 结速时间viewer.clock.currentTime = startTime.clone(); // 当前时间viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。}/** 相机视角飞行 结束 **//** 飞行时 camera的方向调整(heading) 开始 **/// Converts from degrees to radians.function toRadians(degrees) {return degrees * Math.PI / 180;}// Converts from radians to degrees.function toDegrees(radians) {return radians * 180 / Math.PI;}function bearing(startLat, startLng, destLat, destLng){startLat = this.toRadians(startLat);startLng = this.toRadians(startLng);destLat = this.toRadians(destLat);destLng = this.toRadians(destLng);let y = Math.sin(destLng - startLng) * Math.cos(destLat);let x = Math.cos(startLat) * Math.sin(destLat) - Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);let brng = Math.atan2(y, x);let brngDgr = this.toDegrees(brng);return (brngDgr + 360) % 360;}/** 飞行时 camera的方向调整(heading) 结束 **/</script>
</body>
</html>

使用cesium使用飞行漫游功能以及原地平滑转向相关推荐

cesium实现飞行漫游
<template><div><div class="container"><el-buttontype="primary&qu ...
Cesium 飞行漫游贴地漫游
案例地址请看我的博客置顶文章(http://106.52.101.22/EasyGIS/index.html),此处列出了三个案例分别为飞行漫游贴地漫游以及漫游信息实时展示. ========= ...
地图漫游功能的具体体现_一卡通考勤门禁管线系统主要模块功能说明
一卡通考勤门禁管线系统主要模块功能说明一.一卡通考勤门禁管线系统公共部分一卡通考勤门禁管线系统矢量图层的显示控制对用户主要关心的道路.区域.建构筑物等图形要素进行了图层矢量化的处理,系统可以通过 ...
Mars3d开发:飞行漫游
前言 Mars3d一款基于 WebGL 技术实现的三维客户端开发平台,基于Cesium 优化提升与B/S架构设计,支持多行业扩展的轻量级高效能GIS开发平台,能够免安装.无插件地在浏览器中高效运行,并 ...
Mars3d开发——飞行漫游
Mars3d开发--飞行漫游合抱之木,生于毫末: 九层之台,起于累土: 千里之行,始于足下. 文章目录 Mars3d开发--飞行漫游前言一.参考API 二.创建一个漫游对象 1.创建矢量图层 2 ...
新论文 | 基于CATIA的线性工程BIM模型漫游功能开发
本文灵感来源于嘉兴市快速路环线一期工程BIM应用,2019达索系统CCT峰会 0 内容概要为了避免模型在专业软件之间反复导入导出,以及导出过程中的模型要素丢失问题,笔者提出了一种基于动态视点的线性工 ...
XT910开通了GPRS却上不了网的原因--“数据漫游”功能关闭导致的
XT910开通了GPRS却上不了网的原因,用360优化大师的联网修复功能修复和海卓冲浪一键设置APN也没用设置了多次才发现是"数据漫游"功能关闭导致的. 设置里找数据管理 ...
QQ客户端管理聊天记录漫游功能 | 解决经常弹窗消息漫游安全验证，QQ服务独立密码的问题
QQ客户端管理聊天记录漫游功能 (解决经常弹窗消息漫游安全验证,QQ服务独立密码的问题) 前言聊天记录漫游功能情况1:忘记QQ独立服务密码情况2:设置聊天记录漫游情况3:更改独立密码验证频率 ...
记录一下家里双路由实现wifi漫游功能
家里的光猫在二楼,但是有时候比如朋友来家里一般在一楼玩,二楼的光猫发出的WIFI信号比较弱,网速慢.刚好家里有两个路由器,在老舅的指导下完成了配置.这篇文章主要用来记录一下自己的配置以防遗忘. 基本环 ...

使用cesium使用飞行漫游功能以及原地平滑转向

使用cesium使用飞行漫游功能以及原地平滑转向相关推荐

最新文章

热门文章