Cesium 入门之 Entity API

Entity API 与 Primitive API

在 Cesium 中，Entity API 和 Primitive API 都是用于在三维场景中创建和管理可视化对象的重要工具。Entity API 使用简单，能够快速搭建复杂场景；Primitive API 使用相对复杂，更底层。这里我先介绍 Entity API：

Entity 支持的图形类型

Geometry 几何	图片	Description 描述
PointGraphics		点
PolylineGraphics		线
CorridorGraphics		走廊
PolylineVolumeGraphics		多段性柱体
PolygonGraphics		面
BoxGeometry		盒子
EllipseGraphics		圆、椭圆
RectangleGraphics		矩形
WallGraphics		墙
PlaneGraphics		平面
CylinderGraphics		圆柱、圆锥、截断的圆锥
EllipsoidGraphics		椭球体
PathGraphics		路径
BillboardGraphics		广告牌
LabelGraphics		标签
ModelGraphics		模型
Cesium3DTilesetGraphics		3DTileset

Materials

Materials 对应的官网中的 MaterialProperty，为 Polygon、Polyline、Plane 等要素填充材质时使用。

ColorMaterialProperty 颜色

ts 复制代码

const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
        semiMinorAxis: 250000.0,
        semiMajorAxis: 400000.0,
        material: Cesium.Color.BLUE.withAlpha(0.5)
    }
});
viewer.zoomTo(viewer.entities);

ImageMaterialProperty 图片

ts 复制代码

ellipse.material = "/docs/tutorials/creating-entities/images/cats.jpg";

CheckerboardMaterialProperty 棋盘

ts 复制代码

ellipse.material = new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: new Cesium.Cartesian2(4, 4)
});

StripeMaterialProperty 条纹

ts 复制代码

ellipse.material = new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: 32
});

GridMaterialProperty

ts 复制代码

ellipse.material = new Cesium.GridMaterialProperty({
    color: Cesium.Color.YELLOW,
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(8, 8),
    lineThickness: new Cesium.Cartesian2(2.0, 2.0)
});

拾取 Entity

选择顶层entity

ts 复制代码

function pickEntity(viewer, windowPosition) {
    const picked = viewer.scene.pick(windowPosition);
    if (Cesium.defined(picked)) {
        const id = Cesium.defaultValue(picked.id, picked.primitive.id);
        if (id instanceof Cesium.Entity) {
            return id;
        }
    }
}

穿透多选 entity

ts 复制代码

function drillPickEntities(viewer, windowPosition) {
    let picked, entity, i;
    const pickedPrimitives = viewer.scene.drillPick(windowPosition);
    const length = pickedPrimitives.length;
    const result = [];
    const 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;
 }