CylinderGraphics

介绍

CylinderGraphics是CesiumJS的一个可视化组件，用于绘制圆柱体。它可以用于表示一些物体的形状，比如建筑物、水塔等。CylinderGraphics可以设置圆柱的高度、半径、顶部和底部的颜色、透明度等，并支持纹理贴图。

示例

以下示例演示如何创建一个基本的圆柱体并将其添加到场景中：

var viewer = new Cesium.Viewer('cesiumContainer');
var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883); // 圆柱体的位置
var cylinder = viewer.entities.add({
    name: 'Cylinder',
    position: center,
    cylinder: {
        length: 1000.0, // 高度
        topRadius: 2000.0, // 顶部半径
        bottomRadius: 2000.0, // 底部半径
        material: Cesium.Color.RED.withAlpha(0.5), // 材质
    }
});
viewer.zoomTo(cylinder);

效果如下：

属性

CylinderGraphics的属性如下：

length

• 类型：Number
• 默认值：1.0

圆柱体的高度（垂直方向的长度），单位为米。

topRadius

• 类型：Number
• 默认值：1.0

圆柱体顶部的半径，单位为米。

bottomRadius

• 类型：Number
• 默认值：1.0

圆柱体底部的半径，单位为米。

slices

• 类型：Number
• 默认值：128

绕圆柱体旋转的分片数。

vertexFormat

• 类型：VertexFormat
• 默认值：VertexFormat.ALL

定义圆柱体表面的纹理坐标、法线等信息。默认为VertexFormat.ALL，即包含所有信息。

lengthSegment

• 类型：Number
• 默认值：1

定义圆柱体高度方向的子分段数。

capSegment

• 类型：Number
• 默认值：1

定义圆柱体底部和顶部的圆形的子分段数。

show

• 类型：Boolean
• 默认值：true

指示圆柱体是否显示。

outline

• 类型：Boolean
• 默认值：false

指示圆柱体的轮廓线是否显示。

outlineColor

• 类型：Color
• 默认值：Color.BLACK

轮廓线的颜色。

outlineWidth

• 类型：Number
• 默认值：1.0

轮廓线的宽度，单位为像素。

numberOfVerticalLines

• 类型：Number
• 默认值：16

定义圆柱体表面沿着垂直方向的线的数量。

topFillColor

• 类型：Color
• 默认值：Color.WHITE

定义圆柱体顶部的颜色。

topFillOpacity

• 类型：Number
• 默认值：1.0

定义圆柱体顶部的不透明度。值为0.0时完全透明，1.0时完全不透明。

bottomFillColor

• 类型：Color
• 默认值：Color.WHITE

定义圆柱体底部的颜色。

bottomFillOpacity

• 类型：Number
• 默认值：1.0

定义圆柱体底部的不透明度。值为0.0时完全透明，1.0时完全不透明。

material

• 类型：MaterialProperty
• 默认值：undefined

定义圆柱体的材质。如果未设置，则使用顶部和底部的颜色和不透明度。如果设置了材质，则忽略顶部/底部颜色和不透明度。

lengthTexture

• 类型：Property
• 默认值：undefined

定义圆柱体高度方向的纹理贴图。如果未设置，则使用白色纹理。

topTexture

• 类型：Property
• 默认值：undefined

定义圆柱体顶部的纹理贴图。如果未设置，则使用白色纹理。

bottomTexture

• 类型：Property
• 默认值：undefined

定义圆柱体底部的纹理贴图。如果未设置，则使用白色纹理。

方法

CylinderGraphics包含以下方法：

merge

将传入的CylinderGraphics或CylinderGraphics对象数组合并到当前对象中。

var cylinder1 = viewer.entities.add({
    name: 'Cylinder 1',
    position: center,
    cylinder: {
        length: 1000.0,
        topRadius: 2000.0,
        bottomRadius: 2000.0,
        material: Cesium.Color.RED.withAlpha(0.5),
    },
});

var cylinder2 = viewer.entities.add({
    name: 'Cylinder 2',
    position: center,
    cylinder: {
        length: 500.0,
        topRadius: 1000.0,
        bottomRadius: 1000.0,
        material: Cesium.Color.BLUE.withAlpha(0.5),
    },
});

cylinder1.cylinder.merge(cylinder2.cylinder);

事件

CylinderGraphics支持以下事件：

definitionChanged

当CylinderGraphics的任何属性发生更改时触发。

cylinder.cylinder.definitionChanged.addEventListener(function(cylinder) {
    console.log('CylinderGraphics 属性已更改');
});

参考资料

• CylinderGraphics - Cesium Documentation