mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-04 01:04:17 +00:00 
			
		
		
		
	
		
			
	
	
		
			57 lines
		
	
	
		
			1.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
		
		
			
		
	
	
			57 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>
							 | 
						||
| 
								 | 
							
								</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", {});
							 | 
						||
| 
								 | 
							
								        viewer.scene.debugShowFramesPerSecond = true;
							 | 
						||
| 
								 | 
							
								        viewer.scene.globe.depthTestAgainstTerrain = true;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        // 定义自定义材质
							 | 
						||
| 
								 | 
							
								        var material = new Cesium.Material({
							 | 
						||
| 
								 | 
							
								            fabric: {
							 | 
						||
| 
								 | 
							
								                type: 'Custom',
							 | 
						||
| 
								 | 
							
								                uniforms: {
							 | 
						||
| 
								 | 
							
								                    color: new Cesium.Color(1.0, 0.0, 0.0, 0.7) // 红色
							 | 
						||
| 
								 | 
							
								                },
							 | 
						||
| 
								 | 
							
								                source: `
							 | 
						||
| 
								 | 
							
								                    uniform vec4 color;
							 | 
						||
| 
								 | 
							
								                    czm_material czm_getMaterial(czm_materialInput materialInput) {
							 | 
						||
| 
								 | 
							
								                        czm_material material = czm_getDefaultMaterial(materialInput);
							 | 
						||
| 
								 | 
							
								                        material.diffuse = color.rgb;
							 | 
						||
| 
								 | 
							
								                        material.alpha = color.a;
							 | 
						||
| 
								 | 
							
								                        return material;
							 | 
						||
| 
								 | 
							
								                    }
							 | 
						||
| 
								 | 
							
								                `
							 | 
						||
| 
								 | 
							
								            },
							 | 
						||
| 
								 | 
							
								            translucent: function (feature) {
							 | 
						||
| 
								 | 
							
								                return true;
							 | 
						||
| 
								 | 
							
								            }
							 | 
						||
| 
								 | 
							
								        });
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								        viewer.scene.globe.material = material;
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    </script>
							 | 
						||
| 
								 | 
							
								</body>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								</html>
							 |