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)
}
})