这篇先了解两个概念:
A. 什么是实体 API?
CesiumJS 拥有丰富的空间数据 API,可以分为两类: Primitive API 面向图形开发人员的低级 API,以及 Entity API 面向数据驱动可视化的高级 API。
低级 Primitive API 公开了执行手头任务所需的最少量抽象。它的结构是为图形开发人员提供灵活的实现,而不是为了 API 的一致性。加载模型与创建广告牌不同,两者都与创建多边形完全不同。每种类型的可视化都有其独特的特征。此外,每个都有不同的性能特征,需要不同的最佳实践。虽然这种方法功能强大且灵活,但大多数应用程序都可以更好地使用更高级别的抽象。
Entity API 公开了一组一致设计的高级对象,这些对象将相关的可视化和信息聚合到一个统一的数据结构中,我们称之为 Entity. 它让我们专注于数据的呈现,而不是担心可视化的底层机制。它还提供了用于轻松构建复杂的、时间动态的可视化的结构,这种可视化方式与静态数据自然相适应。虽然 Entity API 实际上在底层使用 Primitive API,但这是我们(几乎)不必关心的实现细节。通过对我们提供的数据应用各种启发式方法,Entity API 能够提供灵活、高性能的可视化,同时提供一致、易于学习和易于使用的界面。
B. 管理实体:
EntityCollection 是用于管理和监视一组实体的关联数组。 viewer.entities 是一个 EntityCollection。 EntityCollection 包括 用于管理实体的和 等方法。add, removeremoveAll有时我们需要更新我们之前创建的实体。所有实体实例都具有唯一性 ,可用于从集合中检索实体。
加载图形---点:
const position = new Cesium.Cartesian3.fromDegrees(114.21, 30.55041, 2) // 添加点 设置标识ID entityA const entityA = this.viewer.entities.add({ id: 'entityA', position, point: { pixelSize: 30, color: Cesium.Color.DARKORANGE } })
加载图形---线:
// 添加一条线 设置标识ID entityB const entityB = this.viewer.entities.add({ id: 'entityB', polyline: { positions: new Cesium.Cartesian3.fromDegreesArray([114.21, 30.55041, 114.21, 30.553]), material: Cesium.Color.CORAL, width: 6, show: true } })
加载图形---面:
const position2 = new Cesium.Cartesian3.fromDegrees(114.21, 30.55, 0) // 添加一个线 设置标识ID entityC const entityC = this.viewer.entities.add({ id: 'entityC', position: position2, plane: { plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 5.0), dimensions: new Cesium.Cartesian2(400, 400), material: Cesium.Color.BURLYWOOD, outline: true, outlineWidth: 10, outlineColor: Cesium.Color.BROWN, show: true } })
加载图形---多边形:
// 添加一个多边形 设置标识ID entityD const entityD = this.viewer.entities.add({ id: 'entityD', polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([114.22, 30.55, 114.22, 30.56, 114.24, 30.58, 114.24, 30.56]), material: Cesium.Color.BURLYWOOD } })
加载图形文字---标签:
添加一个图形标签 设置标识ID entityE const entityE = this.viewer.entities.add({ id: 'entityE', position: position3, label: { text: 'hh,你好啊', fillColor: Cesium.Color.CHARTREUSE } })
删除图形对象有有两种方式:
1. 指定对象删除图形:
以上所有的图形加载完成后,删除两个图形对象:
// 删除标签、多边形对象 this.viewer.entities.remove(entityE) this.viewer.entities.remove(entityD)
2. 根据标识删除图形
以上所有的图形加载完成后,删除指定标识图形:
// 查找ID为entityD的图形对象 const entityD = this.viewer.entities.getById('entityD') // 查找ID为entityE的图形对象 const entityE = this.viewer.entities.getById('entityE') // 删除标签、多边形标识为entityD\entityE的对象 this.viewer.entities.remove(entityD) this.viewer.entities.remove(entityE)
删除前:
删除后:
3. 删除全部图形
// 从集合中移除所有实体。 this.viewer.entities.removeAll()
学习【Cesium】第八篇,Cesium地图空间数据加载及删除操作(学不会揍我)
最新推荐文章于 2024-07-28 23:35:40 发布