Cesium开发-绘制墙体

Cesium中绘制图形有两种方式,一可以通过entity自定义图形也可以使用primitives的方式绘制图形,以下是两个示例的代码总结:


<html lang="en">
	<head>
		<meta charset="utf-8">
		
		<script src="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Cesium.js">script>
		<link href="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
	head>
	<body>
		
		<div id="cesiumContainer">div>
		div>
	body>
html>

// Your access token can be found at: https://cesium.com/ion/tokens.
			//申请密匙
			Cesium.Ion.defaultAccessToken ='你的token';
			//设置随机数种子
			Cesium.Math.setRandomNumberSeed(1234);
			//声明一个Viewer (Viewer是一个带有多种功能的可交互的三位数字地球的容器(盒子))
			var viewer = new Cesium.Viewer('cesiumContainer');
			//声明场景
			var scene = viewer.scene;
			/*
			声明primitives对象  
			primitives由两个部分组成:1.几何图形(Geometry):定义了Primitive的结构,例如:三角形、线条、点等 
			2.外观(Appearance ):定义Primitive的着色( Sharding),包括GLSL(OpenGL着色语言,OpenGL ShadingLanguage)
			顶点着色器和片段着色器(vertex and fragment shaders),以及渲染状态(render state)
			*/	
			var primitives = scene.primitives;
			//ColorGeometryInstanceAttribute 每个实例几何图形颜色的值和类型信息 fromColor 创建一个新颜色
			var solidWhite = Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE);
			//Rectangle.fromDegrees(west , south , east , north , result) 给定边界经度和纬度(以度为单位)绘制一个矩形。
			var rectangle = Cesium.Rectangle.fromDegrees(-92.0, 20.0, -86.0, 27.0);

//绘制墙体
			var regionlist = [
				113.0395, 26.5239,
				113.0395, 26.5229,
				113.0395, 26.5169,
				113.0395, 26.5129,
				113.0325, 26.5108,
				113.0284, 26.5108,
				113.0284, 26.5239,
				113.0395, 26.5239
			]

			positions = Cesium.Cartesian3.fromDegreesArray(regionlist);
			var maximumHeights = new Array(regionlist.length).fill(0);
			var minimumHeights = new Array(regionlist.length).fill(-600);
			// primitives方式
			//墙体
			var wallInstance = new Cesium.GeometryInstance({
				geometry: new Cesium.WallGeometry({
					positions: positions,
					maximumHeights: maximumHeights,
					minimumHeights: minimumHeights,
					vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
				}),
				attributes: {
					color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({
						alpha: 0.1
					}))
				}
			});
			//空墙体
			var wallOutlineInstance = new Cesium.GeometryInstance({
				geometry: new Cesium.WallOutlineGeometry({
					positions: positions,
					maximumHeights: maximumHeights,
					minimumHeights: minimumHeights
				}),
				attributes: {
					color: new Cesium.ColorGeometryInstanceAttribute(0.1, 0.1, 0.1, 0.1)
					// color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({
					// 	alpha: 0.1
					// }))
				}
			});
			//注入
			primitives.add(new Cesium.Primitive({
				geometryInstances: wallInstance,
				appearance: new Cesium.PerInstanceColorAppearance()
			}));
			primitives.add(new Cesium.Primitive({
				geometryInstances: wallOutlineInstance,
				appearance: new Cesium.PerInstanceColorAppearance({
					flat: true,
					translucent: false,
					renderState: {
						lineWidth: Math.min(4.0, scene.maximumAliasedLineWidth)
					}
				})
			}));

			//entity方式
			var wallEntity = viewer.entities.add({
				wall:{
					positions: positions,
					maximumHeights: maximumHeights,
					minimumHeights: minimumHeights,
					vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
					outline:true,
					outlineWidth:Math.min(4.0, scene.maximumAliasedLineWidth),
					material : Cesium.Color.BLUE.withAlpha(0.1)
				}
			})

你可能感兴趣的:(前端技术,Cesium,js)