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;
 }
相关推荐
全宝2 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
不浪brown8 天前
地下管网的产品经理问我:能不能用Cesium在地表挖一个洞,让我直观的看到地下的管道(附开源代码)
cesium
vjmap8 天前
如何一键自动提取CAD图中的中心线(如墙体、道路、巷道中心线等)
前端·javascript·gis
图导物联13 天前
GIS-AI 融合引擎架构:智慧景区导览系统的毫秒级响应与千级并发优化实战
python·ar·gis·智慧文旅·景区导览
slntJy13 天前
ubantu&windows搭建gis开发环境(qt+osg+osgearth+osgqt)
gis·win11·osgearth·ubantu·osg·osgqt
熟悉不过14 天前
cesium项目之cesiumlab地形数据加载
前端·javascript·vue.js·cesium·webgis·cesiumlab
前端小菜鸟一枚s14 天前
`ConstantPositionProperty` 的使用与应用
前端·javascript·cesium
前端小菜鸟一枚s14 天前
`ConstantProperty` 的使用与应用
前端·javascript·cesium
GIS小小研究僧14 天前
GS+:地统计分析与空间插值工具
信息可视化·gis·rs
不浪brown14 天前
【实战篇】Cesium Shader实现军事级雷达探测波!数字孪生开发者必学(附开源代码)
cesium