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;
 }
相关推荐
敲敲敲敲暴你脑袋14 小时前
Cesium绘制3D热力山丘图
数据可视化·canvas·cesium
YGY_Webgis糕手之路3 天前
OpenLayers 综合案例-基础图层控制
前端·gis
青山Coding4 天前
Cesium基础(六)常用事件封装与应用<交互式框选区域>
vue.js·cesium
前端灵派派4 天前
cesium鼠标拾取展示信息弹窗
前端·cesium
YGY_Webgis糕手之路4 天前
WebGIS 中常用公共插件
前端·gis
YGY_Webgis糕手之路5 天前
OpenLayers快速入门(一)Map对象
vue.js·gis
阿琳a_7 天前
解决vue中使用vite-plugin-cesium插件打包后运行项目报错
前端·javascript·vue.js·vite·cesium
GIS小小研究僧7 天前
ArcGIS Pro+PS 实现地形渲染效果图
arcgis·gis·qgis·地理信息
GISBox7 天前
GISBox切片器技术解析:RVT模型到3DTiles瓦片的高性能转换方案
3d·gis·倾斜摄影·gis软件
爱看书的小沐8 天前
【小沐学GIS】基于Rust绘制三维数字地球Earth(Rust、OpenGL、GIS)
3d·rust·gis·opengl·cargo·earth·3d earth