mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-04 09:14:17 +00:00 
			
		
		
		
	
		
			
	
	
		
			59 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
		
		
			
		
	
	
			59 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| 
								 | 
							
								<!--********************************************************************
							 | 
						|||
| 
								 | 
							
								* by jiawanlong
							 | 
						|||
| 
								 | 
							
								*********************************************************************-->
							 | 
						|||
| 
								 | 
							
								<!DOCTYPE html>
							 | 
						|||
| 
								 | 
							
								<html>
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								<head>
							 | 
						|||
| 
								 | 
							
								    <meta charset="UTF-8" />
							 | 
						|||
| 
								 | 
							
								    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
							 | 
						|||
| 
								 | 
							
								    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
							 | 
						|||
| 
								 | 
							
								    <script src="./CesiumNavigation.umd.js"></script>
							 | 
						|||
| 
								 | 
							
								    <style>
							 | 
						|||
| 
								 | 
							
								        /*
							 | 
						|||
| 
								 | 
							
								        自定义指南针需要调样式
							 | 
						|||
| 
								 | 
							
								        .compass-gyro,.compass-gyro-background{
							 | 
						|||
| 
								 | 
							
								           display:none;
							 | 
						|||
| 
								 | 
							
								        }
							 | 
						|||
| 
								 | 
							
								        .compass-outer-ring > svg{
							 | 
						|||
| 
								 | 
							
								            left: 0;
							 | 
						|||
| 
								 | 
							
								            position: absolute;
							 | 
						|||
| 
								 | 
							
								            top: 0;
							 | 
						|||
| 
								 | 
							
								            width: 95px;
							 | 
						|||
| 
								 | 
							
								            height: 95px;
							 | 
						|||
| 
								 | 
							
								        }*/
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								    </style>
							 | 
						|||
| 
								 | 
							
								</head>
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
							 | 
						|||
| 
								 | 
							
								    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
							 | 
						|||
| 
								 | 
							
								    <script type="text/javascript">
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
							 | 
						|||
| 
								 | 
							
								        const viewer = new Cesium.Viewer('map', {
							 | 
						|||
| 
								 | 
							
								            geocoder: false,
							 | 
						|||
| 
								 | 
							
								            homeButton: false,
							 | 
						|||
| 
								 | 
							
								            sceneModePicker: false,
							 | 
						|||
| 
								 | 
							
								            baseLayerPicker: false,
							 | 
						|||
| 
								 | 
							
								            navigationHelpButton: false,
							 | 
						|||
| 
								 | 
							
								            animation: false,
							 | 
						|||
| 
								 | 
							
								            timeline: false,
							 | 
						|||
| 
								 | 
							
								            fullscreenButton: false,
							 | 
						|||
| 
								 | 
							
								            creditContainer: document.createElement("div")
							 | 
						|||
| 
								 | 
							
								        });
							 | 
						|||
| 
								 | 
							
								   
							 | 
						|||
| 
								 | 
							
								        
							 | 
						|||
| 
								 | 
							
								        const options = {
							 | 
						|||
| 
								 | 
							
								          enableCompass: true,
							 | 
						|||
| 
								 | 
							
								          enableZoomControls: true,//是否启用缩放控件
							 | 
						|||
| 
								 | 
							
								        };
							 | 
						|||
| 
								 | 
							
								        //自定义指南针图的SVG,可以去阿里图库下载
							 | 
						|||
| 
								 | 
							
								        //options.compassOuterRingSvg = ``;
							 | 
						|||
| 
								 | 
							
								        new CesiumNavigation(viewer, options);
							 | 
						|||
| 
								 | 
							
								        
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								    </script>
							 | 
						|||
| 
								 | 
							
								</body>
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								</html>
							 |