效果

代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>cesium|xt3d</title><!-- 引入Cesium --><script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css"><!--  引入xt3d --><script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script><style>html,body,#map3d {width: 100%;height: 100%;margin: 0px;padding: 0px;}</style>
</head><body><div id="map3d"></div><script>let xt3dInit = {init(el) {this.initViewer(el);this.addEllipsoid();this.addFlyPolyline();this.setView();},//初始化viewerinitViewer(el) {this.viewer = new Cesium.Viewer(el, {infoBox: false,selectionIndicator: false,navigation: false,animation: false,timeline: false,baseLayerPicker: false,geocoder: false,homeButton: false,sceneModePicker: false,navigationHelpButton: false,shouldAnimate: true,skyAtmosphere: false,imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'})});//是否开启抗锯齿this.viewer.scene.fxaa = true;this.viewer.scene.postProcessStages.fxaa.enabled = true;},//半球体addEllipsoid() {this.viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(108.914269, 34.324121, 0),ellipsoid: {radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),maximumCone: Cesium.Math.PI_OVER_TWO,material: new xt3d.EllipsoidObject.EllipsoidMaterial({color: Cesium.Color.fromCssColorString("#ff0000"),duration: 2000,count: 2})},});},//飞机飞行线addFlyPolyline() {let start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));let stop = Cesium.JulianDate.addSeconds(start,360,new Cesium.JulianDate());this.viewer.clock.startTime = start.clone();this.viewer.clock.stopTime = stop.clone();this.viewer.clock.currentTime = start.clone();this.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;this.viewer.clock.multiplier = 10;let position = this.computeCirclularFlight(108.914269, 34.324121, 3.5, start);let entity = this.viewer.entities.add({availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start: start,stop: stop,}),]),position: position,orientation: new Cesium.VelocityOrientationProperty(position),model: {uri: "/data.xt3d.cn/assets/glb/Cesium_Air.glb",minimumPixelSize: 48,},path: {resolution: 1,material: new xt3d.PolylineObject.PolylineLightingMaterialProperty(Cesium.Color.GREEN),width: 10,},});},//飞行线computeCirclularFlight(lon, lat, radius, start) {let property = new Cesium.SampledPositionProperty();for (let i = 0; i <= 360; i += 2) {let radians = Cesium.Math.toRadians(i);let time = Cesium.JulianDate.addSeconds(start,i,new Cesium.JulianDate());let position = Cesium.Cartesian3.fromDegrees(lon + radius * 1.2 * Math.cos(radians),lat + radius * Math.sin(radians),100000);property.addSample(time, position);}return property;},setView() {let flyToOpts = {destination: {x: -2224325.628950648,y: 6607102.85264413,z: 3073242.4068826777},orientation: {heading: 0.02107913234005121,pitch: -0.8968124890759657,roll: 6.283171613955314},duration: 2};this.viewer.scene.camera.flyTo(flyToOpts);},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");</script>
</body></html>

预览地址

xt3d 在线预览地址

Cesium|xt3d绕圈飞行相关推荐

cesium 模型绕点飞行一周
cesium 模型绕点飞行一周 // 加载glb模型原地旋转//获取锥体的坐标var position = Cesium.Cartesian3.fromDegrees(116.358504190185 ...
每日新闻 | 特斯拉“太空跑车”完成第一圈绕日飞行向火星靠近
点击蓝字关注我们更多精彩,请点击上方蓝字关注我们! 每日新闻播报第08-19期 1 趋势洞察中央网信办李爱东:激发网络安全产业企业创新活力中央网信办网络安全协调局副局长李爱东在第七届互联网安 ...
Ardupilot 绕圈模式分析
目录文章目录目录摘要 0序言 1.绕圈模式初始化 2.绕圈模式控制摘要本文主要记录ardupilot的绕圈模式的实现过程,欢迎批评指正,微信lxw15982962929 0序言绕圈模式: ...
飞机绕地飞行一周问题
最近室友们在一块的时候偶尔聊聊一些公司的面试题,下面这道飞机绕地飞行的题目觉得比较有意思: 之前没做过类似的智力测试题,我们几个室友还讨论了好长时间,最后我们把最后的答案总结了一下,答案有6.5.7架 ...
绕月飞行维生系统进展如何？美国人准备好了吗
NASA将与SpaceX联手研发和测试维生系统,以确保乘坐SpaceX载人飞船Crew Dragon的付费游客在绕月飞行时能够活着回来. 据每日邮报报道,美国宇航局(NASA)已经证实,开始与美国太空 ...
WPF 绕圈进度条（一）
原文:WPF 绕圈进度条(一) 在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="Progre ...
Cesium|xt3d 雷达追踪圆锥体
Cesium|xt3d 雷达追踪圆锥体效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><he ...
Cesium|xt3d卫星正摄动画
Cesium|xt3d卫星正摄动画效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
Cesium|xt3d视频融合
Cesium|xt3d视频融合效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...

Cesium|xt3d绕圈飞行

Cesium|xt3d绕圈飞行

效果

代码

预览地址

Cesium|xt3d绕圈飞行相关推荐

最新文章

热门文章