Cesium 案例（一） Z-Indexing Geometry

使用官方github包，部分解释来源于Viewer – Cesium Documentation    
 
Cesium
.
Ion
.
defaultAccessToken
=
       
“token”
;
     
const
viewer
=
new
Cesium
.
Viewer
(
“cesiumContainer”
);


     
viewer
.
entities
.
add
({
       
//entities获取实体集合
       
id
:
“red rectangle,zIndex 1”
,
       
rectangle
: {
         
//设置或者获取矩形
         
coordinates
:
Cesium
.
Rectangle
.
fromDegrees
(
-110.0
,
20
,
-100.5
,
30.0
),
//左下角经纬右上角经纬
         
material
:
Cesium
.
Color
.
RED
,
         
zIndex
:
1
,
//一个属性，指定用于排序地面几何的 zIndex。仅当矩形为常量且未指定
//height 或 extrudedHeight 时才有效。
        },
      });


     
viewer
.
entities
.
add
({
       
id
:
“Textured rectangle, zIndex 2”
,
       
rectangle
: {
         
coordinates
:
Cesium
.
Rectangle
.
fromDegrees
(
-112.0
,
25.0
,
-102.5
,
35.0
),
         
material
:
“../images/Cesium_Logo_Color.jpg”
,
         
zIndex
:
2
,
        },
      });


     
viewer
.
entities
.
add
({
       
id
:
“Blue rectangle, zIndex 3”
,
       
rectangle
: {
         
coordinates
:
Cesium
.
Rectangle
.
fromDegrees
(
-110.0
,
31.0
,
-100.5
,
41.0
),
         
material
:
Cesium
.
Color
.
BLUE
,
         
zIndex
:
3
,
        },
      });


     
viewer
.
entities
.
add
({
       
id
:
“Textured rectangle, zIndex 3”
,
       
rectangle
: {
         
coordinates
:
Cesium
.
Rectangle
.
fromDegrees
(
-99.5
,
20.0
,
-90.0
,
30.0
),
         
material
:
“../images/Cesium_Logo_Color.jpg”
,
         
zIndex
:
3
,
        },
      });


     
viewer
.
entities
.
add
({
       
id
:
“Green rectangle, zIndex 2”
,
       
rectangle
: {
         
coordinates
:
Cesium
.
Rectangle
.
fromDegrees
(
-97.5
,
25.0
,
-88.0
,
35.0
),
         
material
:
Cesium
.
Color
.
GREEN
,
         
zIndex
:
2
,
        },
      });


     
viewer
.
entities
.
add
({
       
id
:
“Blue rectangle, zIndex 1”
,
       
rectangle
: {
         
coordinates
:
Cesium
.
Rectangle
.
fromDegrees
(
-99.5
,
31.0
,
-90.0
,
41.0
),
         
material
:
Cesium
.
Color
.
BLUE
,
         
zIndex
:
1
,
        },
      });
     
if
(!
Cesium
.
Entity
.
supportsPolylinesOnTerrain
(
viewer
.
scene
)) {
       
//检查给定场景是否支持夹在地形或 3D 平铺上的折线。
       
//如果不支持此功能，具有折线图形的实体将在提供的高度处使用顶点进行渲染，
       
//并使用 `arcType` 参数而不是固定在地面上。
       
window
.
alert
(
         
“Polylines on terrain are not supported on this platform ,Z-index will be ignored”
        );
      }
     
if
(!
Cesium
.
Entity
.
supportsMaterialsforEntitiesOnTerrain
(
viewer
.
scene
)) {
       
//检查给定场景是否支持覆盖在地形或 3D 平铺上的实体上的颜色以外的材质。
       
//如果不支持此功能，则具有非颜色材质但没有’高度’的实体将被渲染为高度为 0。
       
window
.
alert
(
         
“Textured materials on terrain polygons are not
supported on this platform, Z-index will be ignored”
        );
      }
     
viewer
.
entities
.
add
({
       
id
:
“Polyline, zIndex 2”
,
       
polyline
: {
         
positions
:
Cesium
.
Cartesian3
.
fromDegreesArray
([
           
-120.0
,
22.0
,
-80.0
,
22.0
,
          ]),
//指定定义线带的 Cartesian3 位置数组
         
width
:
8.0
,
         
material
:
new
Cesium
.
PolylineGlowMaterialProperty
({
           
//映射到折线发光 Material
           
glowPower
:
0.2
,
//发光强度，占总线宽的百分比
           
color
:
Cesium
.
Color
.
BLUE
,
           
//taperPower:一个数字属性，指定锥形效果的强度，
           
//以总线条长度的百分比表示。如果为 1.0 或更高，则不使用锥形效果。
          }),
         
zIndex
:
2
,//深度信息
         
clampToGround
:
true
,
         
//指定折线是否应固定在地面上。
        },
      });
     
viewer
.
zoomTo
(
viewer
.
entities
);
     
//zoomTo (target, offset(可选) )
     
//异步设置相机以查看提供的实体、实体或数据源。
     
//如果数据源仍在加载过程中或可视化仍在加载中，则此方法在执行缩放之前等待数据准备好。
     
//偏移量是本地东西北上参考系中的航向/俯仰/范围，以边界球的中心为中心。
     
//航向角和俯仰角在当地东西北上参考系中定义。航向是从 y 轴到 x 轴增加的角度。俯仰是从 xy 平面的旋转。
//正俯仰角在平面上方。
     
//负俯仰角位于平面下方。范围是到中心的距离。如果范围为零，则将计算范围以使整个边界球体可见。
     
//在 2D 中，必须有自上而下的视图。摄像机将放置在目标上方向下看。目标上方的高度将是范围。
/ /航向将根据偏移量确定。如果无法根据偏移量确定航向，则航向将为北。     运行结果图：（与代码略有不同，更换了图片路径和内容 （material:））