Cesium开发-绘制墙体

最新推荐文章于 2024-03-26 13:50:08 发布

初生的太阳丶

最新推荐文章于 2024-03-26 13:50:08 发布

阅读量1.7k

点赞数

分类专栏：前端技术 Cesium js

本文链接：https://blog.csdn.net/strive279/article/details/116262971

版权

js 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端技术

18 篇文章 1 订阅

订阅专栏

Cesium

4 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<!-- Include the CesiumJS JavaScript and CSS files -->
		<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>
		<!-- 用来做Viewer的容器 -->
		<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)
				}
			})

初生的太阳丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Cesium开发-绘制墙体

Cesium中绘制图形有两种方式，一可以通过entity自定义图形也可以使用primitives的方式绘制图形，以下是两个示例的代码总结：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8">  <script src="https://cesium.
复制链接

扫一扫