Cesium飞行效果

最新推荐文章于 2024-04-28 00:25:13 发布

一个修理地球的人

最新推荐文章于 2024-04-28 00:25:13 发布

阅读量7k

点赞数

分类专栏： Cesium 文章标签： Cesium 飞行

本文链接：https://blog.csdn.net/wo_buzhidao/article/details/84141723

版权

Cesium 专栏收录该内容

18 篇文章 8 订阅

订阅专栏

Cesium飞行效果

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>漫游飞行效果</title>
	<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
	<script src="../Build/Cesium.js"></script>
	</head>
	<body style="margin: 0px;padding: 0px;">
		<div  id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
	</body>
	<script>
	    var url='http://193.169.100.133:8080/geoserver/wms'; //Geoserver URL   
	   	var viewer = new Cesium.Viewer('cesiumContainer',{ 
	   		//需要进行可视化的数据源的集合
           animation: false, //是否显示动画控件
            shouldAnimate : true,
            homeButton: false, //是否显示Home按钮
            fullscreenButton: false, //是否显示全屏按钮
            baseLayerPicker: false , //是否显示图层选择控件
            geocoder: false, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: false, //是否显示点击要素之后显示的信息
            requestRenderMode: true, //启用请求渲染模式
            scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
            sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
            //fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
		   imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
				          url: 'http://t0.tianditu.com/img_w/wmts?',
				          layer: 'img',
				          style: 'default',
				          format: 'tiles',
				          tileMatrixSetID: 'w',
				          credit: new Cesium.Credit('天地图全球影像服务'),
				      
				    })
		});
		var layers = viewer.imageryLayers;  
		viewer._cesiumWidget._creditContainer.style.display="none";
		  //全球影像中文注记服务
	   	viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
		    url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",
		    layer: "tdtAnnoLayer",
		    style: "default",
		    format: "image/jpeg",
		    tileMatrixSetID: "GoogleMapsCompatible",
		    maximumLevel: 13,
			minimumLevel: 1,
		    show: false
		}));
		
		var position=Cesium.Cartesian3.fromDegrees(112.315216, 39.5125612, 10000);
		
		
		viewer.scene.camera.flyTo({
			destination: Cesium.Cartesian3.fromDegrees(112.315216, 39.5125612, 10000),  //定位坐标点，建议使用谷歌地球坐标位置无偏差
			duration:1   //定位的时间间隔
		});
		
		setTimeout(function(){
			 flyExtent();
		},1000);
		
		function  flyExtent(){
			    // 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值，这里取-30度
		    var pitch = Cesium.Math.toRadians(-30);
		    // 给定飞行一周所需时间，比如10s, 那么每秒转动度数
		    var angle = 360 / 5;
		    // 给定相机距离点多少距离飞行，这里取值为5000m
		    var distance = 15000;
		    var startTime = Cesium.JulianDate.fromDate(new Date());
		    
		    var stopTime = Cesium.JulianDate.addSeconds(startTime, 5, 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; // 时钟设置为当前系统时间; 忽略所有其他设置。
		    // 相机的当前heading
		    var initialHeading = viewer.camera.heading;
		    var Exection = function TimeExecution() {
		            // 当前已经过去的时间，单位s
		            var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
		            var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
		            viewer.scene.camera.setView({
		                destination : position, // 点的坐标
		                orientation: {
		                    heading : heading,
		                    pitch : pitch,
		                }
		            });
		            viewer.scene.camera.moveBackward(distance);
		            if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
		                viewer.clock.onTick.removeEventListener(Exection);
		            }
		 
		    };
		    viewer.clock.onTick.addEventListener(Exection);
			
		}
		 

	</script>
</html>

一个修理地球的人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Cesium飞行效果

Cesium飞行效果代码如下&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;漫游飞行效果&lt;/title&gt; &lt;link rel="stylesheet" href="../Build/Widge
复制链接

扫一扫