cesium entities 图形绘制

1.正方形绘制 box 方法

官网链接： https://cesium.com/learn/cesiumjs/ref-doc/BoxGraphics.html

box中属性

属性	含义值
outline	设置指定box是否有轮廓的Property 默认
outlineColor	轮廓线颜色
material	设置颜色
dimensions	设置形状
fill	设置填充色显示隐藏
distanceDisplayCondition	距相机多远的距离处显示或隐藏
shadows	ShadowMode.DISABLED设置投影

示例代码如下

viewer.entities.add({
            name : 'Red box',
            position: Cesium.Cartesian3.fromDegrees(116.39, 39.9),
            box: {
                dimensions: new Cesium.Cartesian3(30000.0, 30000.0, 30000),//设置长宽高
                material : Cesium.Color.GREENYELLOW.withAlpha(0.5), //设置颜色
                outline : true,//设置指定box是否有轮廓的Property 默认false 
                outlineColor : Cesium.Color.BLACK, //设置轮廓线
                //fill:false,//取消填充
                //distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0.0, 5.5e6 ),
            }
        });

2.圆角体绘制 corridor 方法

官网链接： https://cesium.com/learn/cesiumjs/ref-doc/CorridorGraphics.html

corridor 中属性

属性	含义值
cornerType	直角样式： Cesium.CornerType.BEVELED 。 圆角样式： Cesium.CornerType.ROUNDED
extrudedHeight	number 类型 体积厚度高度
height	离地面高度
outline	设置指定corridor 是否有轮廓的Property 默认
outlineColor	轮廓线颜色
outlineWidth	轮廓线宽度
fill	设置填充色显示隐藏
distanceDisplayCondition	new Cesium.DistanceDisplayCondition( 0.0, 5.5e6 )距相机多远的距离处显示或隐藏
zIndex	图层的优先级
shadows	ShadowMode.DISABLED设置投影
show	true或false实体显示隐藏（动态改变直接改变show就可以）

示例代码如下

viewer.entities.add({
            name : 'Red box with black outline',
            corridor: {
                positions: Cesium.Cartesian3.fromDegreesArray([
                    104.0, 39,
                    102.0, 39,
                    102.0, 35,
                  ]),
                  height: 200000.0,
                  extrudedHeight: 200000.0,//厚度
                  width: 100000.0,
                  cornerType: Cesium.CornerType.ROUNDED ,//Cesium.CornerType.BEVELED,
                  material: Cesium.Color.BLUE.withAlpha(0.5),
                  outline: true, // height or extrudedHeight must be set for outlines to display
                  outlineColor: Cesium.Color.WHITE,
            }
        });

3.立体线绘制 polylineVolume方法

官网链接： https://cesium.com/learn/cesiumjs/ref-doc/PolylineVolumeGraphics.html

polylineVolume中属性

属性	含义值
cornerType	直角样式： Cesium.CornerType.BEVELED 。 圆角样式： Cesium.CornerType.ROUNDED
outline	设置指定corridor 是否有轮廓的Property 默认
outlineColor	轮廓线颜色
outlineWidth	轮廓线宽度
fill	设置填充色显示隐藏
distanceDisplayCondition	new Cesium.DistanceDisplayCondition( 0.0, 5.5e6 )距相机多远的距离处显示或隐藏
shape	设置形状
shadows	ShadowMode.DISABLED设置投影
show	true或false实体显示隐藏（动态改变直接改变show就可以）

示例代码如下

viewer.entities.add({
 polylineVolume: {
   positions: Cesium.Cartesian3.fromDegreesArrayHeights([
     113.39, 35.0, 0.0,
     118.39, 37.0, 0.0,
     119.39, 30.0, 0.0,
   ]),
   shape: computeStar(4, 1000, 30000),
   cornerType: Cesium.CornerType.MITERED,
   material: Cesium.Color.BLUE,
 },
});
function computeStar(arms, rOuter, rInner) {
 var angle = Math.PI / arms;
 var length = 2 * arms;
 var positions = new Array(length);
 for (var i = 0; i < length; i++) {
   var r = i % 2 === 0 ? rOuter : rInner;
   positions[i] = new Cesium.Cartesian2(
     Math.cos(i * angle) * r,
     Math.sin(i * angle) * r
   );
 }
 return positions;
}
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;
}

4.加载圆柱体圆锥体 cylinder方法

官网地址：https://cesium.com/learn/cesiumjs/ref-doc/CylinderGraphics.html

cylinder中属性

属性	含义值
bottomRadius	number 低部半径大小
topRadius	number 顶部半径大小（半径为“0”时为圆锥体）
length	number 高度
material	设置材质
numberOfVerticalLines	number 沿轮廓的周长绘制的垂直线数
outline	设置指定corridor 是否有轮廓的Property 默认
outlineColor	轮廓线颜色
outlineWidth	轮廓线宽度
fill	设置填充色显示隐藏
distanceDisplayCondition	new Cesium.DistanceDisplayCondition( 0.0, 5.5e6 )距相机多远的距离处显示或隐藏
shadows	ShadowMode.DISABLED设置投影
show	true或false实体显示隐藏（动态改变直接改变show就可以）

示例代码

viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(113.39, 40.0, 100000.0),
            cylinder: {
                length: 200000.0,
                topRadius: 55000.0,//圆柱顶部大小
                 // topRadius: 0.0,//圆柱顶部大小
                bottomRadius: 55000.0,//圆柱低部大小
                outline: true,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 4,
                material: Cesium.Color.YELLOW.withAlpha(0.9),
            },
        });

5.加载立体墙自带呼吸灯效果 wall方法

官网地址：https://cesium.com/learn/cesiumjs/ref-doc/WallGraphics.html

wall中属性

属性	含义值
material	设置材质
maximumHeights	用于墙顶的高度数组，而不是每个位置的高度
minimumHeights	用于墙底的高度数组
outline	设置指定corridor 是否有轮廓的Property 默认
outlineColor	轮廓线颜色
outlineWidth	轮廓线宽度
fill	设置填充色显示隐藏
distanceDisplayCondition	new Cesium.DistanceDisplayCondition( 0.0, 5.5e6 )距相机多远的距离处显示或隐藏
shadows	ShadowMode.DISABLED设置投影
show	true或false实体显示隐藏（动态改变直接改变show就可以）

示例代码

var alp = 1;
        var num = 0
        this.viewer.entities.add({
            name: "Green wall from surface with outline",
            wall: {
              positions: Cesium.Cartesian3.fromDegreesArrayHeights([
                -107.0, 43.0, 100000.0,
                -97.0, 43.0, 100000.0, 
                -97.0, 40.0, 100000.0,
                -107.0, 40.0, 100000.0,
                -107.0, 43.0, 100000.0,
              ]),
              material: new Cesium.ImageMaterialProperty({
                image:require("../assets/tu.jpg"),
                transparent:true,
                color:new Cesium.CallbackProperty(function () {
                        if ((num % 2) === 0){
                            alp -=0.05;
                        }else {
                            alp +=0.05;
                        }

                        if (alp <= 0.3){
                            num++;
                        }else if (alp >= 1){
                            num++;
                        }
                        return  Cesium.Color.WHITE.withAlpha(alp)
                        //entity的颜色透明 并不影响材质，并且 entity也会透明
                    },false)
                }),

              outline: true,
            }
        });