## 绘制点线面
### 方案一:通过entity来添加
### 先来看一个添加立方体的例子
```
var viewer = new Cesium.Viewer('cesiumContainer');
var redBox = viewer.entities.add({
name : 'Red box with black outline',
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
```
效果如图:
![](https://box.kancloud.cn/cb0f7476457c6ab82d4f1501c973c45b_352x319.jpg)
### 方案二:通过CZML添加
通过CZML也可以添加几何形状,而且CZML还可以描述动画(现在先有个印象,动画以后介绍)
先来看看官网上的说明,CZML是一种JSON格式的字符串,用于描述与时间有关的动画场景,CZML包含点、线、地标、模型、和其他的一些图形元素,并指明了这些元素如何随时间而变化。某种程度上说, Cesium 和 CZML的关系就像 Google Earth 和 KML。
```
var czml = [{
"id" : "document",
"name" : "box",
"version" : "1.0"
},{
"id" : "shape2",
"name" : "Red box with black outline",
"position" : {
"cartographicDegrees" : [-107.0, 40.0, 300000.0]
},
"box" : {
"dimensions" : {
"cartesian": [400000.0, 300000.0, 500000.0]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 0, 0, 128]
}
}
},
"outline" : true,
"outlineColor" : {
"rgba" : [0, 0, 0, 255]
}
}
}];
var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);
```
### 形状相关描述
>下表来自于官方网站,但是连接改为本地链接了
| | | |
|---|---|---|
|Point|![point](https://box.kancloud.cn/37a2f9f33aef25a9c663ab3c5d93b753_80x80.png)|entity.point - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/PointGraphics.html)
|Boxes|![Box](https://box.kancloud.cn/e1ee4c17af62556eea6f05003238dd11_80x80.png)|entity.box - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Box.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/BoxGraphics.html)
|Circles and Ellipses|![Ellipse](https://box.kancloud.cn/d23a64aae7b087a9a2fe0c8bb95eeb7d_80x80.png)|entity.ellipse - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Circles%20and%20Ellipses.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/EllipseGraphics.html)
|Corridor|![Corridor](https://box.kancloud.cn/5211d4b0e624b89d7be7316b75d5321c_80x80.png)|entity.corridor - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Corridor.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/CorridorGraphics.html)
|Cylinder and Cones|![Cylinder](https://box.kancloud.cn/3bee256207ed3a2d0548929ce69e7d48_80x80.png)|entity.cylinder - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Cylinders%20and%20Cones.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/CyilnderGraphics.html)
|Polygons|![Polygon](https://box.kancloud.cn/6ffb449bd12c69dcf3f51b65c66cf4a4_80x80.png)|entity.polygon - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Polygon.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/PolygonGraphics.html) [Reference Build/Documentation]
|Polylines|![Polyline](https://box.kancloud.cn/ee2a7e46a321b449599c5bed5bdb2a6b_80x80.png)|entity.polyline - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Polyline.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/PolylineGraphics.html)
|Polyline Volumes|![Volume](https://box.kancloud.cn/ac9d50e3b9b60c2284510f9e587893af_80x80.png)|entity.polylineVolume - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Polyline%20Volume.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/PolylineVolume.html)
|Rectangles|![Rectangle](https://box.kancloud.cn/1afcabfe8fa54d557636dc10f6d35eae_80x80.png)|entity.rectangle - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Rectangle.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/Rectangle.html)
|Spheres and Ellipsoids|![Ellipsoid](https://box.kancloud.cn/43543d666218de7d9e68c58b3f0d88e5_80x80.png)|entity.ellipsoid - [Code example](http://localhost:8080/Apps/Sandcastle/index.html?src=Spheres%20and%20Ellipsoids.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/EllipsoidGraphics.html)
|Walls|![Wall](https://box.kancloud.cn/b6fa2e455c2e39571cce13d24149b60a_80x80.png)|entity.wall - (http://localhost:8080/Apps/Sandcastle/index.html?src=Wall.html) - [Reference Build/Documentation](http://localhost:8080/Build/Documentation/WallGraphics.html)
**Cesium学习交流群:593764057(满),476893082**
- cesium编程入门(一)cesium简介
- cesium编程入门(二)环境搭建
- cesium编程入门(三)开始使用cesium开发
- cesium编程入门(四)界面介绍及小控件隐藏
- cesium编程入门(五)绘制形状
- cesium编程入门(六)添加 3D Tiles,并调整位置,贴地
- cesium编程入门(七)3D Tiles,模型旋转
- cesium编程入门(八)设置材质
- cesium编程入门(九)实体 Entity
- cesium编程入门(十)优秀资源
- cesium编程入门(十一)常见问题
- cesium编程中级开篇
- cesium编程中级(一)添加示例到Sandcastle
- cesium编程中级(二)源码编译
- cesium编程中级(三)尝试添加PBS本地服务
- cesium编程中级(四)使用渐变纹理