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;
 }
相关推荐
GIS小小研究僧11 小时前
AutoCAD Map 3D:CAD与GIS集成工具
3d·gis·rs
该怎么办呢3 天前
Cesium双击放大地图
javascript·cesium·webgis
DragonBallSuper4 天前
在Cesium中使用ThreeJs材质(不是场景融合哦)
webgl·材质·threejs·cesium·可视化渲染
前端付杰4 天前
轻松搞定 TIFF:基于 Three.js 和 Cesium 的渲染技巧分享
前端·three.js·cesium
汪洪墩6 天前
知道自己鼠标在某个竖直平面上的经纬度信息在这个竖直的平面上的实时坐标
服务器·前端·cesium
喆星时瑜6 天前
地理信息可视化技术大全【WebGIS 教程一】
信息可视化·gis·开发·地图·webgis
GIS工具-gistools20217 天前
哨兵-6 (Sentinel-6)
大数据·sentinel·gis
GISBox7 天前
PLY格式文件如何转换成3DTiles格式——使用GISBox软件实现高效转换
arcgis·信息可视化·node.js·gis·webgl·cesium
瑾凌8 天前
Cesium 自定义路径导航材质
前端·javascript·vue.js·vue·材质·cesium
全宝8 天前
🌿 10分钟学会用arcgis+threejs实现动态地铁路线图
vue.js·gis·three.js