前面介绍了Cesium如何加载影像数据、地形数据、以及矢量数据，但是作为一个完整的三维系统，仅仅包括这些数据还是远远不够的。当然，还需要一些其他数据，比如空间可视化数据、三维数据数据等，今天我们先从空间数据的可视化说起，后面会有专门的章节介绍三维数据方面的加载。

Cesium在空间数据可视化方面提供了两种类型的API，一种是面向图形开发人员的低级（原始）API，通过Primitive类实现，对于那些对计算机图形学知识很了解的同学可以采用Primitive API，后面章节会有详细介绍；另一种是用于数据驱动的高级（实体）API，通过Entity类实现，相对于Primitive API，Entity API实现起来更简单一些，特别建议初学者使用。Entity API 实际上是对Primitive API的二次封装，底层调用的仍然是Primitive API，目的就是为我们提供灵活的、易学、易用的高性能可视化界面。本章节内容主要介绍后者Entity API，Primitive API放在后面的高级篇里讲解。

1Entity支持的图形类型

通过在Cesium API文档中查看Entity类的构造函数，我们发现Entity支持的图形类型都是以Graphics结尾的，一共有17种类型。如下图所示，列出了Entity支持的图形类型以及对应的js类。

下面，简单介绍一下每一种类型的Graphic添加方式。

1）billboard 广告牌

var entity = viewer.entities.add({// id: "",name: "billboard",// show: true,// description: "",// orientation: "",position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),billboard: {show: true, // defaultimage: "./images/Cesium_Logo_overlay.png", // default: undefinedscale: 2.0, // default: 1.0//像素偏移    type: Cartesian2    default:Cartesian2.ZEROpixelOffset: new Cesium.Cartesian2(0, -50),//眼睛偏移    type: Cartesian3    default:Cartesian3.ZEROeyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),// 水平对齐方式  type: HorizontalOrigin  default:HorizontalOrigin.CENTER// CENTER 原点在对象的水平中心；LEFT 原点在对象的左侧；RIGHT 原点在对象的右侧horizontalOrigin: Cesium.HorizontalOrigin.CENTER,// 垂直对齐方式  type: VerticalOrigin  default:VerticalOrigin.CENTER// CENTER 原点位于 BASELINE 和 TOP 之间的垂直中心；BOTTOM 原点在对象的底部；// BASELINE 如果对象包含文本，则原点位于文本的基线，否则原点位于对象的底部；TOP 原点在对象的顶部verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER 垂直对齐位置 参考Cesium.VerticalOrigin// 获取或设置此广告牌的高度参考    type: HeightReference    default:HeightReference.NONE// NONE 位置绝对；CLAMP_TO_GROUND 位置固定在地形上；RELATIVE_TO_GROUND 位置高度是指地形上方的高度heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// 颜色  type: Color  default:Color.WHITEcolor: Cesium.Color.LIME,// 获取或设置以弧度为单位的旋转角度  type: number  default:0rotation: Cesium.Math.PI_OVER_FOUR,// 获取或设置世界空间中的对齐轴  type:Cartesian3  default:Cartesian3.ZEROalignedAxis: Cesium.Cartesian3.ZERO,width: 100, // default: undefinedheight: 25, // default: undefined// 根据广告牌与相机的距离获取或设置广告牌的近和远缩放属性  type:NearFarScalarscaleByDistance: new Cesium.NearFarScalar(1.0e3, 2.0, 2.0e3, 1.0),// 根据广告牌到相机的距离，获取或设置广告牌的近和远半透明属性  type:NearFarScalartranslucencyByDistance: new Cesium.NearFarScalar(1.0e3,1.0,1.5e6,0.5),// 根据广告牌与摄像头的距离，获取或设置广告牌的近像素偏移量和远像素偏移量缩放属性  type:NearFarScalarpixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.0e3,1.0,1.5e6,0.0),// 设置1000米和2000米之间可见  type:DistanceDisplayCondition// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),// 获取或设置与相机的距离，在深度处禁用深度测试，例如，以防止剪切地形。// 设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。disableDepthTestDistance: Number.POSITIVE_INFINITY,},});

2）box 盒子

var entity = viewer.entities.add({name: "box",position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),box: {show: true,dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), // Cartesian3类型，用于指定框的长度，宽度和高度// 指定距实体位置的高度是相对于什么的高度。default: HeightReference.NONE// NONE  位置绝对；CLAMP_TO_GROUND  位置固定在地形上；RELATIVE_TO_GROUND 位置高度是指地形上方的高度。heightReference: Cesium.HeightReference.NONE,fill: true,// MaterialProperty|Color  default:Color.WHITEmaterial: Cesium.Color.RED.withAlpha(0.5),outline: true,// type:Property|Color  default:Color.BLACKoutlineColor: Cesium.Color.BLACK,outlineWidth: 1.0,// type:ShadowMode  default:ShadowMode.DISABLED// DISABLED  对象不投射或接收阴影；ENABLED  对象投射并接收阴影；CAST_ONLY  对象仅投射阴影；RECEIVE_ONLY 该对象仅接收阴影。shadows: Cesium.ShadowMode.DISABLED,// type:DistanceDisplayCondition// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),},});

3）corridor 走廊

  var entity = viewer.entities.add({name: "corridor",corridor: {// show: true,// 指定定义走廊中心线的 Cartesian3 位置的数组  type: Cartesian3positions: Cesium.Cartesian3.fromDegreesArray([-80.0,40.0,-85.0,40.0,-85.0,35.0,]),width: 200000.0,height: 200000.0,heightReference: Cesium.HeightReference.NONE,extrudedHeight: 100000.0,extrudedHeightReference: Cesium.HeightReference.NONE,// 拐角的样式  type:CornerType  default:CornerType.ROUNDED// ROUNDED  角有光滑的边缘；MITERED  拐角点是相邻边的交点；BEVELED  角被修剪cornerType: Cesium.CornerType.ROUNDED,granularity: Cesium.Math.RADIANS_PER_DEGREE, // 每个纬度和经度之间的距离fill: true,// 材质  type:MaterialProperty|Color  default:Color.WHITEmaterial: Cesium.Color.BLUE.withAlpha(0.5),outline: true, // height or extrudedHeight must be set for outlines to displayoutlineColor: Cesium.Color.WHITE,outlineWidth: 1.0,shadows: Cesium.ShadowMode.DISABLED,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),// 走廊在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH  将同时对Terrain和3D Tiles进行分类。classificationType: Cesium.ClassificationType.BOTH,},});

4）cylinder 圆柱、圆锥

 var entity = viewer.entities.add({name: "cylinder",position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),cylinder: {// show: true,length: 400000.0, // 圆柱体长度topRadius: 200000.0, // 圆柱体顶部半径bottomRadius: 200000.0, // 圆柱体底部半径heightReference: Cesium.HeightReference.NONE,fill: true,material: Cesium.Color.GREEN.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.DARK_GREEN,outlineWidth: 1.0,numberOfVerticalLines: 16, // 沿轮廓的周长绘制的垂直线的数量shadows: Cesium.ShadowMode.DISABLED,slices: 128, // 圆柱周围的边缘数量// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),},});

ellipse 椭圆或拉伸的椭圆

 var entity = viewer.entities.add({name: "Circles and Ellipses",position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),ellipse: {show: true,semiMajorAxis: 300000.0, // 长半轴距离semiMinorAxis: 150000.0, // 短半轴距离height: 20000.0,heightReference: Cesium.HeightReference.NONE,extrudedHeight: 20000.0,extrudedHeightReference: Cesium.HeightReference.NONE,// rotation: Cesium.Math.toRadians(45), // 从北方逆时针旋转stRotation: 0.0, // 纹理从北方逆时针旋转granularity: Cesium.Math.RADIANS_PER_DEGREE, // 椭圆上各点之间的角距离material: Cesium.Color.BLUE.withAlpha(0.5),fill: true,outline: true,outlineColor: Cesium.Color.DARK_GREEN,outlineWidth: 1.0,numberOfVerticalLines: 16, // 沿轮廓的周长绘制的垂直线的数量shadows: Cesium.ShadowMode.DISABLED,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),// 在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D瓷砖进行分类;BOTH  将同时对Terrain和3D Tile进行分类。classificationType: Cesium.ClassificationType.BOTH,},});

6）ellipsoid 椭球体

var entity = viewer.entities.add({name: "Spheres and Ellipsoids",position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),ellipsoid: {show: true,radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0), // 椭球半径// innerRadii: new Cesium.Cartesian3(0.0, 0.0, 0.0), // 椭球内部半径minimumClock: 0.0, // 最小时钟角度maximumClock: 2 * Math.PI, // 最大时钟角度minimumCone: 0.0, // 最小圆锥角maximumCone: Math.PI, // 最大圆锥角heightReference: Cesium.HeightReference.NONE,fill: true,material: Cesium.Color.BLUE.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.YELLOW,outlineWidth: 1.0,stackPartitions: 64, // 延纬度线切割的次数slicePartitions: 64, // 延经度线切割的次数subdivisions: 128, // 每个轮廓环的样本数，确定曲率的粒度shadows: Cesium.ShadowMode.DISABLED,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),},});

7）label 标签

var entity = viewer.entities.add({name: "label",position: Cesium.Cartesian3.fromDegrees(-75.1641667,39.9522222,300000.0),label: {show: true,text: "label标签",font: "24px Helvetica",// FILL  填充；OUTLINE 只显示边框；FILL_AND_OUTLINE 既有填充又有边框style: Cesium.LabelStyle.FILL_AND_OUTLINE,scale: 1.0,showBackground: true,backgroundColor: Cesium.Color.BLUE,backgroundPadding: new Cartesian2(7, 5),pixelOffset: Cartesian2.ZERO,eyeOffset: Cartesian3.ZERO,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.CENTER,heightReference: Cesium.HeightReference.NONE,fillColor: Cesium.Color.SKYBLUE,outlineColor: Cesium.Color.BLACK,outlineWidth: 2,translucencyByDistance: new Cesium.NearFarScalar(1.0e3,1.0,1.5e6,0.5),pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.0e3,1.0,1.5e6,0.0),scaleByDistance: new Cesium.NearFarScalar(1.0e3, 2.0, 2.0e3, 1.0),// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),disableDepthTestDistance: Number.POSITIVE_INFINITY,},});

8）model 模型

var position = Cesium.Cartesian3.fromDegrees(-123.0744619,44.0503706,5000.0);var heading = Cesium.Math.toRadians(135);var pitch = 0;var roll = 0;var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr);var url = "./data/models/CesiumAir/Cesium_Air.glb";var entity = viewer.entities.add({name: "model",position: position,orientation: orientation,model: {show: true,uri: url,scale: 1.0,minimumPixelSize: 128, // 模型的最小最小像素大小，而不考虑缩放maximumScale: 20000, // 模型的最大比例尺大小。minimumPixelSize的上限incrementallyLoadTextures: true, // 确定在加载模型后纹理是否可以继续流入runAnimations: true, // 是否应启动模型中指定的glTF动画clampAnimations: true, // glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势shadows: Cesium.ShadowMode.DISABLED,heightReference: Cesium.HeightReference.NONE,silhouetteColor: Cesium.Color.RED, // 轮廓的颜色silhouetteSize: 0.0, // 轮廓的宽度color: Cesium.Color.WHITE, // 模型的颜色// 目标颜色和图元的源颜色之间混合的不同模式// HIGHLIGHT 将源颜色乘以目标颜色;REPLACE 将源颜色替换为目标颜色;MIX 将源颜色和目标颜色混合在一起colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,// 用于指定 colorBlendMode 为 MIX 时的颜色强度。值0.0会产生模型的着色，而值1.0会导致纯色，介于两者之间的任何值都会导致两者混合colorBlendAmount: 0.5,imageBasedLightingFactor: new Cesium.Cartesian2(1.0, 1.0), // 指定基于漫反射和镜面反射的图像照明的贡献lightColor: undefined, // 为模型着色时指定浅色的属性。如果 undefined ，则使用场景的浅色。// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),},});

9)tileset 3D Tiles瓦片集

var tileset = viewer.entities.add({name: "3D Tiles",position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),tileset: {show: true,uri: new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0.0),},});

10）path 路径

 var entityPath = viewer.entities.add({position: pathPosition,name: "path",path: {show: true,leadTime: 0,trailTime: 60,width: 10,resolution: 1,material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.3,taperPower: 0.3,color: Cesium.Color.PALEGOLDENROD,}),},});

11）plane 平面

var bluePlane = viewer.entities.add({name: "Blue plane",position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),plane: {show: true,// 用于指定平面的法线和距离plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0.0),dimensions: new Cesium.Cartesian2(400000.0, 300000.0), // 指定平面的宽度和高度fill: true,material: Cesium.Color.BLUE,outline: false,outlineColor: Cesium.Color.BLACK,outlineWidth: 1.0,shadows: Cesium.ShadowMode.DISABLED,// type:DistanceDisplayCondition// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),},});

12）point 点

viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),point: {show: true,pixelSize: 10, // 像素大小heightReference: Cesium.HeightReference.NONE,color: Cesium.Color.YELLOW,outlineColor: Cesium.Color.BLACK,outlineWidth: 0,scaleByDistance: new Cesium.NearFarScalar(1.0e3, 10.0, 2.0e3, 1.0),translucencyByDistance: new Cesium.NearFarScalar(1.0e3,1.0,1.5e6,0.5),// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),// 获取或设置与相机的距离，在深度处禁用深度测试，例如，以防止剪切地形。// 设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。disableDepthTestDistance: Number.POSITIVE_INFINITY,},});

13）polygon 多边形

var redPolygon = viewer.entities.add({name: "Red polygon on surface",polygon: {show: true,// 指定PolygonHierarchyhierarchy: Cesium.Cartesian3.fromDegreesArray([-115.0,37.0,-115.0,32.0,-107.0,33.0,-102.0,31.0,-102.0,35.0,]),height: 0, // 多边形相对于椭球面的高度heightReference: Cesium.HeightReference.NONE,// extrudedHeight: 0, // 多边形的凸出面相对于椭球面的高度// extrudedHeightReference: Cesium.HeightReference.NONE,stRotation: 0.0, // 多边形纹理从北方逆时针旋转granularity: Cesium.Math.RADIANS_PER_DEGREE, // 每个纬度和经度点之间的角距离fill: true,material: Cesium.Color.RED,outline: false,outlineColor: Cesium.Color.BLACK,outlineWidth: 1.0,perPositionHeight: false, // 是否使用每个位置的高度closeTop: true, // 如果为false，则将挤出的多边形顶部留空closeBottom: true, // 如果为false，则将挤出的多边形的底部保留为开放状态// 多边形边缘必须遵循的线型    type:ArcType 定义连接顶点应采用的路径。// NONE 与椭圆表面不符的直线;GEODESIC 遵循测地路径;RHUMB  遵循大黄蜂或恶魔般的道路。arcType: Cesium.ArcType.GEODESIC,shadows: Cesium.ShadowMode.DISABLED,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),// 在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH  将同时对Terrain和3D Tiles进行分类。classificationType: Cesium.ClassificationType.BOTH,// 指定用于订购地面几何形状的z索引。仅在多边形为常数且未指定高度或拉伸高度的情况下才有效  type:ConstantPropertyzIndex: 0,},});

14）polyline 多线段

  var redLine = viewer.entities.add({name: "Red line on terrain",polyline: {show: true,// 定义线条的 Cartesian3 位置的数组positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),width: 5,// 如果arcType不是ArcType.NONE，则指定每个纬度和经度之间的角距离// granularity: Cesium.Math.RADIANS_PER_DEGREE,material: Cesium.Color.RED,`在这里插入代码片`// 线低于地形时用于绘制折线的材质// depthFailMaterial: Cesium.Color.WHITE,// 折线段必须遵循的线型// arcType: Cesium.ArcType.GEODESIC,clampToGround: true, // 是否贴地shadows: Cesium.ShadowMode.DISABLED, // 折线是投射还是接收光源的阴影// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),// 在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH  将同时对Terrain和3D Tiles进行分类。classificationType: Cesium.ClassificationType.BOTH,// 指定用于订购地面几何形状的z索引。仅在多边形为常数且未指定高度或拉伸高度的情况下才有效  type:ConstantProperty// zIndex: 0,},});

15）polylineVolume 多线段柱体

 function computeCircle(radius) {var positions = [];for (var i = 0; i < 360; i++) {var radians = Cesium.Math.toRadians(i);positions.push(new Cesium.Cartesian2(radius * Math.cos(radians),radius * Math.sin(radians)));}return positions;}var redTube = viewer.entities.add({name: "Red tube with rounded corners",polylineVolume: {show: true,// 定义线带的 Cartesian3 位置的数组positions: Cesium.Cartesian3.fromDegreesArray([-85.0,32.0,-85.0,36.0,-89.0,36.0,]),// 指定 Cartesian2 位置的数组，这些位置定义了要拉伸的形状shape: computeCircle(60000.0),// 拐角的样式  type:CornerType// ROUNDED  拐角有光滑的边缘;MITERED 拐角点是相邻边的交点;BEVELED  拐角被修剪。cornerType: Cesium.CornerType.ROUNDED,// 如果arcType不是ArcType.NONE，则指定每个纬度和经度之间的角距离// granularity: Cesium.Math.RADIANS_PER_DEGREE,fill: true,material: Cesium.Color.RED,outline: false,outlineColor: Cesium.Color.BLACK,outlineWidth: 1.0,shadows: Cesium.ShadowMode.DISABLED, // 体积是投射还是接收光源的阴影// type:DistanceDisplayCondition// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),},});

16）rectangle 矩形

 var redRectangle = viewer.entities.add({name: "Red translucent rectangle",rectangle: {show: true,coordinates: Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),// height: 0, // 矩形相对于椭球面的高度// heightReference: Cesium.HeightReference.NONE,// extrudedHeight: 0, // 矩形的拉伸面相对于椭球面的高度// extrudedHeightReference: Cesium.HeightReference.NONE,rotation: 0.0, // 矩形从北方向顺时针方向的旋转stRotation: 0.0, // 矩形纹理从北方逆时针旋转granularity: Cesium.Math.RADIANS_PER_DEGREE, // 指定矩形上各点之间的角度距离fill: true,material: Cesium.Color.RED.withAlpha(0.5),outline: false,outlineColor: Cesium.Color.BLACK,outlineWidth: 1.0,shadows: Cesium.ShadowMode.DISABLED,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),// 在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH  将同时对Terrain和3D Tiles进行分类。classificationType: Cesium.ClassificationType.BOTH,// 指定用于订购地面几何形状的z索引。仅在多边形为常数且未指定高度或拉伸高度的情况下才有效  type:ConstantPropertyzIndex: 0,},});

17）wall 墙

 var redWall = viewer.entities.add({name: "Red wall at height",wall: {show: true,positions: Cesium.Cartesian3.fromDegreesArrayHeights([-115.0,44.0,200000.0,-90.0,44.0,200000.0,]),// 用于墙底而不是地球表面的高度数组minimumHeights: [100000.0, 100000.0],// 用于墙顶的高度数组，而不是每个位置的高度// maximumHeights: [],granularity: Cesium.Math.RADIANS_PER_DEGREE, // 指定矩形上各点之间的角度距离fill: true,material: Cesium.Color.RED,outline: false,outlineColor: Cesium.Color.BLACK,outlineWidth: 1.0,shadows: Cesium.ShadowMode.DISABLED,// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(//   1.0e3,//   2.0e3// ),},});

2Entity 聚合

同时，针对Billboard、Label、Point，Cesium 提供了 EntityCluster 类用于实现聚合效果，但必须结合 PinBuilder 类实现。下面为实现聚合效果的核心代码：

var options = {camera: viewer.scene.camera,canvas: viewer.scene.canvas,};var dataSourcePromise = viewer.dataSources.add(Cesium.KmlDataSource.load("./data/kml/facilities/facilities.kml", options));dataSourcePromise.then(function (dataSource) {var pixelRange = 15;var minimumClusterSize = 3;var enabled = true;dataSource.clustering.enabled = enabled;dataSource.clustering.pixelRange = pixelRange; // 扩展屏幕空间边界框的像素范围dataSource.clustering.minimumClusterSize = minimumClusterSize; // 可以聚合的最小屏幕空间对象var removeListener;var pinBuilder = new Cesium.PinBuilder();var pin50 = pinBuilder.fromText("50+", Cesium.Color.RED, 48).toDataURL();var pin40 = pinBuilder.fromText("40+", Cesium.Color.ORANGE, 48).toDataURL();var pin30 = pinBuilder.fromText("30+", Cesium.Color.YELLOW, 48).toDataURL();var pin20 = pinBuilder.fromText("20+", Cesium.Color.GREEN, 48).toDataURL();var pin10 = pinBuilder.fromText("10+", Cesium.Color.BLUE, 48).toDataURL();var singleDigitPins = new Array(8);for (var i = 0; i < singleDigitPins.length; ++i) {singleDigitPins[i] = pinBuilder.fromText("" + (i + 2), Cesium.Color.VIOLET, 48).toDataURL();}function customStyle() {if (Cesium.defined(removeListener)) {removeListener();removeListener = undefined;} else {removeListener = dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {cluster.label.show = false;cluster.billboard.show = true;cluster.billboard.id = cluster.label.id;cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;if (clusteredEntities.length >= 50) {cluster.billboard.image = pin50;} else if (clusteredEntities.length >= 40) {cluster.billboard.image = pin40;} else if (clusteredEntities.length >= 30) {cluster.billboard.image = pin30;} else if (clusteredEntities.length >= 20) {cluster.billboard.image = pin20;} else if (clusteredEntities.length >= 10) {cluster.billboard.image = pin10;} else {cluster.billboard.image =singleDigitPins[clusteredEntities.length - 2];}});}// force a re-cluster with the new stylingvar pixelRange = dataSource.clustering.pixelRange;dataSource.clustering.pixelRange = 0;dataSource.clustering.pixelRange = pixelRange;}// start with custom stylecustomStyle();var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function (movement) {var pickedLabel = viewer.scene.pick(movement.position);if (Cesium.defined(pickedLabel)) {var ids = pickedLabel.id;if (Array.isArray(ids)) {for (var i = 0; i < ids.length; ++i) {ids[i].billboard.color = Cesium.Color.RED;}}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);});

3Entity 管理

上面介绍了Entity的图形类型，有这么多类型的实体，Cesium是如何管理这些实体对象的呢，这就需要我们从初始化Viewer对象开始说起了。当我们初始化Viewer类之后，会得到一个实例化对象viewer，这个viewer会包含一个属性 entities ，它的类型是 EntityCollection ，也就是 Entity 的集合，它包括了 EntityCollection 类里面的所有属性和方法。所以 Cesium 管理 Entity 本质上是通过 EntityCollection 类进行管理的，比如add（添加Entity）、contains（是否存在某个Entity）、getById（通过ID获取Entity）、remove（移除某个Entity）、removeAll（移除所有的Entity）、removeById（通过ID移除Entity）方法等。

var point = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-105.0, 41, 50010),point: {show: true,pixelSize: 10, // 像素大小},});var entity = viewer.entities.getById("entity_1");viewer.entities.remove(entity);// viewer.entities.removeById("entity_1");// viewer.entities.removeAll();

4Entity 拾取

在三维场景种，很常见的一种交互方式，就是鼠标点击三维场景种某一个几何图形，查看该图形的包含的属性信息，并显示在对应的信息窗体中。单击事件通过 ScreenSpaceEventHandler 类注册，拾取到的信息可通过以下两种方式获取。

scene.pick：获取窗体坐标处最顶部的实体；

scene.drillPick：窗体坐标处的实体列表。

  // 添加拾取事件var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);handler.setInputAction(function (movement) {var pickedEntity = pickEntity(viewer, movement.position);console.log(pickedEntity);var pickedEntities = drillPickEntities(viewer, movement.position);console.log(pickedEntities);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);function pickEntity(viewer, windowPosition) {var picked = viewer.scene.pick(windowPosition);if (Cesium.defined(picked)) {var id = Cesium.defaultValue(picked.id, picked.primitive.id);if (id instanceof Cesium.Entity) {return id;}}return undefined;}function drillPickEntities(viewer, windowPosition) {var i;var entity;var picked;var pickedPrimitives = viewer.scene.drillPick(windowPosition);var length = pickedPrimitives.length;var result = [];var hash = {};for (i = 0; i < length; i++) {picked = pickedPrimitives[i];entity = Cesium.defaultValue(picked.id, picked.primitive.id);if (entity instanceof Cesium.Entity &&!Cesium.defined(hash[entity.id])) {result.push(entity);hash[entity.id] = true;}}return result;}

5Entity 固定

在实际的应用系统中，会有这样的需求，要求画的实体附着在地形表面、或三维建筑表面（比如视频融合），这时候就需要设置xxGraphics的相关属性了，可通过 heightReference 或 classificationType 这两个属性去控制。属性值描述如下：

heightReference属性值：
NONE：位置绝对（默认值）；
CLAMP_TO_GROUND：位置固定在地形上；
RELATIVE_TO_GROUND：位置高度是指地形上方的高度

classificationType属性值：

    TERRAIN：将仅对地形进行分类;CESIUM_3D_TILE：将仅对3D Tiles进行分类; BOTH ：将同时对Terrain和3D Tiles进行分类。

其中corridor 、 ellipse 、 polygon 、 polyline 、 rectangle 可通过设置 classificationType 属性值显示仅贴地、仅贴建筑或者两者都贴的效果，billboard 、 box 、 corridor 、 cylinder 、 ellipse 、 ellipsoid 、 label 、 model 、 point 、 polygon 、 tectangle通过设置 heightReference 属性值为 CLAMP_TO_GROUND 显示贴地效果。这里需要注意的是，如果是polyline必须设置 clampToGround 属性为 true 。

 // set the heightReference to CLAMP_TO_GROUND// billboard box corridor cylinder ellipse ellipsoid label model point polygon tectangle// 其中corridor ellipse polygon retangle会自动贴地viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),billboard: {image: "./images/facility.gif",heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},point: {color: Cesium.Color.SKYBLUE,pixelSize: 10,heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,},label: {text: "Clamped to ground",font: "14pt sans-serif",heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.BASELINE,fillColor: Cesium.Color.BLACK,showBackground: true,backgroundColor: new Cesium.Color(1, 1, 1, 0.7),backgroundPadding: new Cesium.Cartesian2(8, 4),disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain},});viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),model: {uri: "./data/models/CesiumMan/Cesium_Man.glb",heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,minimumPixelSize: 128,maximumScale: 100,},});// corridors、ellipse、 polygons and rectangles will be clamped automatically // if they are filled with a constant color and  has no height or extruded height.viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-122.195, 46.1915),corridor: {positions: Cesium.Cartesian3.fromDegreesArray([-122.19,46.1914,-122.2,46.1924,-122.21,46.193,]),width: 500.0,material: Cesium.Color.GREEN.withAlpha(0.5),},ellipse: {semiMajorAxis: 300.0, // 长半轴距离semiMinorAxis: 150.0, // 短半轴距离// heightReference: Cesium.HeightReference.NONE,material: Cesium.Color.BLUE.withAlpha(0.5),// material: "./images/Cesium_Logo_Color.jpg",// classificationType: Cesium.ClassificationType.BOTH,},polygon: {hierarchy: {positions: [new Cesium.Cartesian3(-2358138.847340281,-3744072.459541374,4581158.5714175375),new Cesium.Cartesian3(-2357231.4925370603,-3745103.7886602185,4580702.9757762635),new Cesium.Cartesian3(-2355912.902205431,-3744249.029778454,4582402.154378103),new Cesium.Cartesian3(-2357208.0209552636,-3743553.4420488174,4581961.863286629),],},// material: Cesium.Color.BLUE.withAlpha(0.5),material: "./images/Cesium_Logo_Color.jpg",},rectangle: {coordinates: Cesium.Rectangle.fromDegrees(-122.2, 46.2, -122.1, 46.3),material: Cesium.Color.RED.withAlpha(0.5),},});// set the classificationType to TERRAIN// corridor ellipse polygon polyline rectangle// 其中polyline 必须 设置clampToGround = trueviewer.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArray([-122.1968,46.1915,-122.1968,46.2015,-122.1968,46.2015,]),clampToGround: true,width: 5,material: Cesium.Color.ORANGE,depthFailMaterial: Cesium.Color.RED,// classificationType: Cesium.ClassificationType.BOTH,},});

var polygon = viewer.entities.add({polygon: {hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromRadiansArray([-1.3194369277314022,0.6988062530900625,-1.3193955980204217,0.6988091578771254,-1.3193931220959367,0.698743632490865,-1.3194358224045408,0.6987471965556998,])),// NONE 位置绝对；CLAMP_TO_GROUND 位置固定在地形上；RELATIVE_TO_GROUND 位置高度是指地形上方的高度// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// material: Cesium.Color.RED.withAlpha(0.5),material: "./images/Cesium_Logo_Color.jpg",// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH  将同时对Terrain和3D Tiles进行分类。classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,},});var polyline = viewer.entities.add({polyline: {positions: Cesium.Cartesian3.fromDegreesArray([-75.60217330403601,40.04102882709425,-75.59968252414251,40.04093615560871,-75.598020153828,40.04079437042357,-75.59674934074435,40.040816173283304,-75.59630042791713,40.03986900370842,-75.59563636849978,40.03930996506271,-75.59492397899098,40.03873932846581,-75.59457991226778,40.038392701955786,-75.59424838652453,40.03775403572295,-75.59387104290336,40.03677022167725,-75.59355000490342,40.03588760913535,]),width: 8,material: new Cesium.PolylineOutlineMaterialProperty({color: Cesium.Color.YELLOW,outlineWidth: 2,outlineColor: Cesium.Color.BLACK,}),clampToGround: true,// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH  将同时对Terrain和3D Tiles进行分类。classificationType: Cesium.ClassificationType.TERRAIN,},});

Cesium开发基础篇 | 04空间数据可视化之Entity相关推荐

Cesium开发高级篇 | 01空间数据可视化之Primitive
在基础篇中我们讲过空间数据可视化之Entity实体类,今天我们介绍另外一个比较接近渲染引擎底层的类Primitive,虽然两者都可用于绘制同样的几何图形,但考虑到性能问题,我们更推荐您使用Primit ...
Cesium开发基础篇 | 02加载地形数据
Cesium中的地形图层类前面我们主要学习了cesium内置接口如何操作影像数据,但是在一些应用场景中我们需要操作地形数据,例如模拟逼真的三维场景.与高程相关的一些空间分析和计算等.Cesium提供 ...
Cesium开发工具篇 | 04量测工具与调试面板
本节我们讲一下Cesium中常用的测量工具和针对开发人员使用的调试工具. 量测工具量测工具可以说,不管是二维GIS还是三维GIS中都必须具备的功能,只不过是在空间上是否有贴地.是否有高度上的距离差别 ...
Cesium开发高级篇 | 04粒子系统
在三维GIS系统中,我们经常会看到一些常见的特效,比如雨雪雾天气.烟火.爆炸.喷泉等,这些都可以通过粒子系统实现,今天我就来带领大家学习一下Cesium中的粒子系统. 1.什么是粒子系统粒子系统是一 ...
Cesium开发工具篇 | 07回顾总结
到目前为止,Cesium开发课程的篇幅已经学完四分之三了,大家如果有什么问题可以私信我或者扫描以下二维码进群沟通,若群二维码失效,可扫描最下方的公众号二维码,加我为好友并备注加群.有时会比较忙来不及回 ...
python语言面试基础_Python面试宝典之基础篇-04
Python面试宝典之基础篇-04 发布时间:2020-08-19 02:59:03 来源:ITPUB博客阅读:101 接着更新Python常见的面试题! 题目016:写一个函数,给定矩阵的阶数n, ...
一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-通过SQL实现特殊业务...
前面的四篇文章演示ORM的一些常规操作与配置,通过前面的文章,应用开发人员要可以使用ORM开发出简单的应用,但是,ORM也不是万能钥匙,在业务应用中,还有很多是ORM解决不了的问题,对于这些问题,我们 ...
一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-演示ORM中的查询
前文回顾前面的文章一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-演示ORM的基本操作一文给大家介绍了如果使用ORM实现数据的读取.插入.更新与删除基本业务也讲解了ORM开发基 ...
【学习记录】第一章数据库设计-《SQL Server数据库设计和开发基础篇视频课程》...
一.课程笔记 1.1 软件开发周期 (1)需求分析阶段分析客户的业务和数据处理需求. (2)概要设计阶段设计数据库的E-R模型图,确认需求信息的正确和完整. /* E-R图:实体-关系图(Ent ...

Cesium开发基础篇 | 04空间数据可视化之Entity