基于用户体验的网站设计,个人永久免费自助建站,内蒙古建设工程交易中心网站,2018十大网络营销案例Cesium CustomDataSource 详解
在 Cesium 中#xff0c;CustomDataSource 是一个强大的类#xff0c;用于处理自定义的地理数据。它提供了一种方法#xff0c;可以通过程序方式添加、管理和更新动态的地理实体#xff0c;而无需依赖外部数据格式#xff08;如 GeoJSON 或…Cesium CustomDataSource 详解
在 Cesium 中CustomDataSource 是一个强大的类用于处理自定义的地理数据。它提供了一种方法可以通过程序方式添加、管理和更新动态的地理实体而无需依赖外部数据格式如 GeoJSON 或 CZML。 CustomDataSource 的作用
自定义数据管理可以创建和管理自己的实体集合。动态更新能够动态地添加、移除和更新实体。与场景交互实体可以绑定到 Cesium 的场景中与其他数据源和图层结合使用。 使用步骤
1. 创建 CustomDataSource
要使用 CustomDataSource需要先实例化它
const viewer new Cesium.Viewer(cesiumContainer);// 创建一个 CustomDataSource
const customDataSource new Cesium.CustomDataSource(myDataSource);// 将数据源添加到 viewer
viewer.dataSources.add(customDataSource);myDataSource 是这个数据源的名称可以用于管理和调试。 2. 添加实体到 CustomDataSource
可以使用 CustomDataSource.entities 添加或管理实体。
const entity customDataSource.entities.add({id: uniqueId, // 可选指定实体的唯一标识符name: Example Entity,position: Cesium.Cartesian3.fromDegrees(114.169, 22.319, 100),point: {pixelSize: 10,color: Cesium.Color.RED,},label: {text: Hello Cesium,font: 14pt sans-serif,fillColor: Cesium.Color.WHITE,},
});// 如果需要可以随时更新实体的属性
entity.position Cesium.Cartesian3.fromDegrees(120.0, 30.0, 200);
entity.point.pixelSize 15;3. 动态更新数据
CustomDataSource 非常适合动态场景例如实时数据流的可视化。 添加实体 customDataSource.entities.add({position: Cesium.Cartesian3.fromDegrees(120.0, 40.0, 300),point: {pixelSize: 5,color: Cesium.Color.BLUE,},
});移除实体 customDataSource.entities.remove(entity); // 删除指定实体
customDataSource.entities.removeAll(); // 删除所有实体查找实体 const foundEntity customDataSource.entities.getById(uniqueId);
if (foundEntity) {console.log(找到实体:, foundEntity.name);
}4. 监听实体变化
CustomDataSource 支持监听实体集合的变化例如添加或移除实体时触发回调。
customDataSource.entities.collectionChanged.addEventListener((collection, added, removed, changed) {console.log(添加的实体:, added);console.log(移除的实体:, removed);console.log(改变的实体:, changed);
});典型应用场景
实时监控如飞机或卫星的实时轨迹。用户交互动态添加标记点或绘制区域。数据可视化处理非标准格式的数据按需展示。 其他重要方法和属性
属性
name数据源的名称。entities数据源中包含的实体集合。isLoading数据源是否正在加载数据。clock关联的时钟用于控制时间相关的实体。
方法
load()加载数据可以从外部数据源初始化实体。update()用于手动更新数据源通常不需要手动调用。destroy()销毁数据源释放资源。 完整示例
下面是一个使用 CustomDataSource 创建多个动态实体的完整示例
const viewer new Cesium.Viewer(cesiumContainer);// 创建自定义数据源
const customDataSource new Cesium.CustomDataSource(dynamicData);
viewer.dataSources.add(customDataSource);// 动态添加实体
setInterval(() {const lon Math.random() * 360 - 180;const lat Math.random() * 180 - 90;const height Math.random() * 1000;customDataSource.entities.add({position: Cesium.Cartesian3.fromDegrees(lon, lat, height),point: {pixelSize: 10,color: Cesium.Color.YELLOW,},label: {text: Lat: ${lat.toFixed(2)}, Lon: ${lon.toFixed(2)},font: 10pt sans-serif,fillColor: Cesium.Color.WHITE,},});
}, 1000);// 删除所有实体按钮
const button document.createElement(button);
button.textContent 删除所有实体;
button.onclick () customDataSource.entities.removeAll();
document.body.appendChild(button);总结
CustomDataSource 是 Cesium 中一个灵活且高效的工具适合处理动态变化的数据。在开发中你可以利用它实现实时数据可视化、用户交互等功能并根据需求动态管理实体集合。
