mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-04 09:14:17 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			111 lines
		
	
	
		
			5.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			111 lines
		
	
	
		
			5.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!--********************************************************************
 | 
						||
* by jiawanlong
 | 
						||
*********************************************************************-->
 | 
						||
<!DOCTYPE html>
 | 
						||
<html>
 | 
						||
 | 
						||
<head>
 | 
						||
    <meta charset="UTF-8" />
 | 
						||
    <link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
 | 
						||
    <script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
 | 
						||
    <script src="./latlng.js"></script>
 | 
						||
</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">
 | 
						||
 | 
						||
        // http://cesium.xin/cesium/cn/Documentation1.95/Viewer.html#.ConstructorOptions
 | 
						||
 | 
						||
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
 | 
						||
        const viewer = new Cesium.Viewer('map', {
 | 
						||
            animation: false,//是否创建动画小器件,左下角仪表  
 | 
						||
            baseLayerPicker: false,//是否显示图层选择器  
 | 
						||
            fullscreenButton: false,//是否显示全屏按钮  
 | 
						||
            geocoder: false,//是否显示geocoder小器件,右上角查询按钮  
 | 
						||
            homeButton: false,//是否显示Home按钮  
 | 
						||
            infoBox: false,//是否显示信息框  
 | 
						||
            sceneModePicker: false,//是否显示3D/2D选择器  
 | 
						||
            selectionIndicator: false,//是否显示选取指示器组件  
 | 
						||
            timeline: false,//是否显示时间轴  
 | 
						||
            navigationHelpButton: false,//是否显示右上角的帮助按钮  
 | 
						||
            scene3DOnly: true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源  
 | 
						||
            clock: new Cesium.Clock(),//用于控制当前时间的时钟对象  
 | 
						||
            selectedImageryProviderViewModel: undefined,//当前图像图层的显示模型,仅baseLayerPicker设为true有意义  
 | 
						||
            imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组  
 | 
						||
            selectedTerrainProviderViewModel: undefined,//当前地形图层的显示模型,仅baseLayerPicker设为true有意义  
 | 
						||
            terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组  
 | 
						||
            fullscreenElement: document.body,//全屏时渲染的HTML元素,  
 | 
						||
            useDefaultRenderLoop: true,//如果需要控制渲染循环,则设为true  
 | 
						||
            targetFrameRate: undefined,//使用默认render loop时的帧率  
 | 
						||
            showRenderLoopErrors: false,//如果设为true,将在一个HTML面板中显示错误信息  
 | 
						||
            automaticallyTrackDataSourceClocks: true,//自动追踪最近添加的数据源的时钟设置  
 | 
						||
 | 
						||
            contextOptions: {
 | 
						||
                // 支持html2cavas截图
 | 
						||
                webgl: {
 | 
						||
                    preserveDrawingBuffer: true // 设置为 true 来启用
 | 
						||
                }
 | 
						||
            },
 | 
						||
 | 
						||
            //传递给Scene对象的上下文参数(scene.options)  
 | 
						||
            sceneMode: Cesium.SceneMode.SCENE3D,//初始场景模式  
 | 
						||
            mapProjection: new Cesium.WebMercatorProjection(),//地图投影体系  
 | 
						||
            dataSources: new Cesium.DataSourceCollection(),
 | 
						||
            // imageryProvider: new Cesium.UrlTemplateImageryProvider({
 | 
						||
            //     url: "http://{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&L={z}&Z={z}&Y={y}&X={x}",
 | 
						||
            //     credit: new Cesium.Credit("高德地图服务"),
 | 
						||
            //     subdomains: ["webrd01", "webrd02", "webrd03", "webrd04"],
 | 
						||
            //     tilingScheme: new Cesium.WebMercatorTilingScheme(),
 | 
						||
            //     maximumLevel: 18
 | 
						||
            // }),
 | 
						||
            // terrainProvider: new Cesium.EllipsoidTerrainProvider(),//地形图层提供者,仅baseLayerPicker设为false有意义  
 | 
						||
            // skyBox: new Cesium.SkyBox({
 | 
						||
            //     sources: {
 | 
						||
            //         positiveX: 'Cesium-1.7.1/Skybox/px.jpg',
 | 
						||
            //         negativeX: 'Cesium-1.7.1/Skybox/mx.jpg',
 | 
						||
            //         positiveY: 'Cesium-1.7.1/Skybox/py.jpg',
 | 
						||
            //         negativeY: 'Cesium-1.7.1/Skybox/my.jpg',
 | 
						||
            //         positiveZ: 'Cesium-1.7.1/Skybox/pz.jpg',
 | 
						||
            //         negativeZ: 'Cesium-1.7.1/Skybox/mz.jpg'
 | 
						||
            //     }
 | 
						||
            // }),//用于渲染星空的SkyBox对象  
 | 
						||
        });
 | 
						||
 | 
						||
        // 清除默认底图
 | 
						||
        //viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
 | 
						||
 | 
						||
        // 清除默认地形
 | 
						||
        //viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});
 | 
						||
 | 
						||
        // 开启帧率
 | 
						||
        // viewer.scene.debugShowFramesPerSecond = true;
 | 
						||
 | 
						||
        // viewer.scene.morphTo2D()
 | 
						||
        // viewer.scene.morphTo3D()
 | 
						||
 | 
						||
        // 深度监测
 | 
						||
        viewer.scene.globe.depthTestAgainstTerrain = true;
 | 
						||
 | 
						||
        // latlng.getCameraView(viewer)
 | 
						||
        // // 目的地带方向
 | 
						||
        // viewer.camera.setView({
 | 
						||
        //     destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
 | 
						||
        //     orientation: {
 | 
						||
        //         heading: Cesium.Math.toRadians(90.0), 
 | 
						||
        //         pitch: Cesium.Math.toRadians(-90), 
 | 
						||
        //         roll: Cesium.Math.toRadians(-90),             
 | 
						||
        //     }
 | 
						||
        // });
 | 
						||
 | 
						||
 | 
						||
        const imageryProvider = new Cesium.TileCoordinatesImageryProvider({
 | 
						||
            color: Cesium.Color.RED
 | 
						||
        })
 | 
						||
        const imageryLayer = new Cesium.ImageryLayer(imageryProvider)
 | 
						||
        viewer.imageryLayers.add(imageryLayer);
 | 
						||
 | 
						||
    </script>
 | 
						||
</body>
 | 
						||
 | 
						||
</html> |