mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-04 01:04:17 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			77 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			77 lines
		
	
	
		
			2.7 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>
 | 
						|
</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.eyJqdGkiOiIwNDljNWFmZC03MzRlLTRiMDMtYWIwMi00Yjk4YWQ4NzQwZGEiLCJpZCI6MjU5LCJpYXQiOjE3NTEzNzkyMzR9.OTqPNs3UGNnT1LYkPTavV80wN8Es_YphpJgQcpdnqWc'
 | 
						|
        const viewer = new Cesium.Viewer('map', {});
 | 
						|
 | 
						|
 | 
						|
        let entity = viewer.entities.add({
 | 
						|
            polygon: {
 | 
						|
                hierarchy: Cesium.Cartesian3.fromDegreesArray([
 | 
						|
                    -115.0,
 | 
						|
                    37.0,
 | 
						|
                    -115.0,
 | 
						|
                    32.0,
 | 
						|
                    -102.0,
 | 
						|
                    31.0,
 | 
						|
                    -102.0,
 | 
						|
                    35.0,
 | 
						|
                ]),
 | 
						|
            }
 | 
						|
        });
 | 
						|
 | 
						|
        let polygon = entity.polygon;
 | 
						|
 | 
						|
        // 1、ColorMaterialProperty --颜色材质
 | 
						|
        // polygon.material = Cesium.Color.RED;
 | 
						|
 | 
						|
        // 2、ImageMaterialProperty --图片材质
 | 
						|
        // polygon.material = new Cesium.ImageMaterialProperty({
 | 
						|
        //     image: './icon.png',
 | 
						|
        //     repeat: new Cesium.Cartesian2(10,5),
 | 
						|
        //     transparent: true
 | 
						|
        // });
 | 
						|
 | 
						|
        // 3、GridMaterialProperty --网格材质
 | 
						|
        // polygon.material = new Cesium.GridMaterialProperty({
 | 
						|
        //     color: Cesium.Color.BLUE,
 | 
						|
        //     cellAlpha: 0.1,
 | 
						|
        //     lineCount: new Cesium.Cartesian2(8, 8),
 | 
						|
        //     lineThickness: new Cesium.Cartesian2(1.0, 1.0),
 | 
						|
        //     lineOffset: new Cesium.Cartesian2(0.0, 0.0),
 | 
						|
        // })
 | 
						|
 | 
						|
        // 4、StripeMaterialProperty --条纹材质
 | 
						|
        // polygon.material = new Cesium.StripeMaterialProperty({
 | 
						|
        //     evenColor: Cesium.Color.WHITE,
 | 
						|
        //     oddColor: Cesium.Color.RED,
 | 
						|
        //     repeat: 32,
 | 
						|
        //     offset: 20,
 | 
						|
        //     orientation: Cesium.StripeOrientation.VERTICAL,
 | 
						|
        // });
 | 
						|
 | 
						|
        // 5、CheckerboardMaterialProperty --棋盘格材质
 | 
						|
        // polygon.material = new Cesium.CheckerboardMaterialProperty({
 | 
						|
        //     evenColor: Cesium.Color.WHITE,
 | 
						|
        //     oddColor: Cesium.Color.BLUE,
 | 
						|
        //     repeat: new Cesium.Cartesian2(10, 10),
 | 
						|
        // });
 | 
						|
 | 
						|
 | 
						|
    </script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html> |