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;
 }
相关推荐
一个有理想的摸鱼选手10 小时前
CesiumLite-开箱即用的轻量化三维地图包(持续更新中...)
gis·cesium
不浪brown10 天前
重磅开源!Cesium实现高度雾仿真,谁再说Cesium做不出好效果?
cesium
青山Coding11 天前
Cesium基础(五)实体创建与拖拽
前端·cesium
小艳加油14 天前
生态环评GIS/遥感制图:土地利用+植被覆盖+土壤侵蚀+水系提取,ArcGIS+ENVI实战
gis·遥感解译·环境影响评价
Mapmost14 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
不浪brown14 天前
告别静态水面的平庸!Cesium中实现水面倒影+动态流向的逼真水特效
cesium
汪洪墩15 天前
使用Mars3d加载热力图的时候,出现阴影碎片
开发语言·前端·javascript·vue.js·cesium
springfe010116 天前
Cesium 3D地图 图元 圆柱 图片实现
前端·cesium
不浪brown18 天前
浏览器3D渲染卡成PPT?6个性能优化指标,你都知道吗?
three.js·cesium
疯狂学习GIS19 天前
ArcGIS工具操作报错999999的通用处理方式
arcgis·gis·rs·学术工作效率·遥感数据