cesium学习记录(二)- 可视化空间数据Viewer 中的Entity

本文介绍了在Cesium中如何使用实体(entity)及其description属性来丰富InfoBox的内容,包括如何展示HTML格式的信息,以及如何确保这些内容的安全性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Unless we specifically disable it, clicking on an entity in the Viewer will show the SelectionIndicator widget at the Entity’s location as well as bring up the InfoBox widget to provide more information. Going back to our original example, we only supplied the wyoming entity with a name, which determines the title of the InfoBox, but we can also provide additional data in HTML via the Entity.description property. Let’s add the below block of code to the end of the first example.

除非我们特别禁用它,否则在查看器中单击一个实体将显示该实体位置的selectionIndicator小部件,并打开InfoBox小部件已展示提供更多信息。回到我们最初的示例,我们只提供了wyoing实体的名称,它决定了InfoBox的名称,但是我们也可以通过entity.description属性提供HTML中的额外数据。让我们将下面的代码块添加到第一个示例的末尾。



设置实体描述允许在infoBox中显示的HTML 格式的信息

Many applications will retrieve descriptions from the server rather than using a hard coded string, but either approach is valid.


By default, all HTML shown in the InfoBox is sandboxed. This prevents external data sources from injecting malicious code into a Cesium application. If you want to be able to run JavaScript or browser plug-ins inside of a description, you can access the iframe used for sandboxing via the viewer.infoBox.frame property. See this article for more information on controlling iframe sandboxing.

许多应用程序将从服务器检索描述,而不是使用硬编码的字符串,但是这两种方法都是有效的。
默认情况下,在InfoBox中显示的所有HTML都是沙盒化的。这可以防止外部数据源向Cesium应用程序中注入恶意代码。如果您希望能够在描述中运行JavaScript或浏览器插件,那么您可以通过viewer.infobox.frame属性访问用于沙箱的iframe。

### 使用 Cesium 进行三维数据可视化剖面的实现方法 #### 1. 准备工作环境 为了使用 Cesium 实现三维数据可视化的剖面效果,首先需要搭建好开发环境。推荐使用 Mars3D 平台作为入门工具[^2]。该平台提供了详细的教程和支持文档,帮助开发者快速上手。 #### 2. 加载基础地图与模型 在开始之前,确保已经成功引入了 Cesium 库,并初始化了一个 Viewer 对象来加载底图和其他必要的资源。可以通过以下方式加载一个简单的地球视图: ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider : Cesium.createWorldTerrain() }); ``` 接着,可以利用 `Cesium.Model.fromGltf` 方法导入外部的 GLTF 或 COLLADA 格式的三维模型文件[^3]。 #### 3. 构建剖切平面 要实现实体对象沿指定方向切割的效果,主要依赖于自定义材质和着色器逻辑。具体来说,就是创建一个透明度渐变变化的矩形区域覆盖目标物体表面,在视觉上形成截断感。下面是一个简化版的例子展示如何设置这样的剪裁面: ```javascript // 定义剪辑平面的位置向量和平法向量 let clipPlanePosition = Cesium.Cartesian3.fromDegrees(-75.0, 40.0); let clipPlaneNormal = Cesium.Cartographic.toCartesian(Cesium.Ellipsoid.WGS84.cartographicToCartesian( Cesium.Cartographic.fromDegrees(-75.0, 40.0))); // 添加到场景中 viewer.scene.globe.depthTestAgainstTerrain = true; viewer.scene.primitives.add(new Cesium.ClippingPlaneCollection({ planes : [ new Cesium.ClippingPlane(clipPlaneNormal, -Cesium.Cartesian3.distance(viewer.camera.position, clipPlanePosition)) ], edgeWidth: 1, edgeColor: Cesium.Color.RED.withAlpha(0.5), })); ``` 这段代码片段展示了怎样通过 ClippingPlaneCollection 来添加单个或多个平行四边形形状的剪贴板至当前场景内,从而达到对特定位置处的对象实施部分遮挡的目的[^1]。 #### 4. 调整视角观察结果 最后一步则是调整相机角度以便更好地查看所得到的结果。这通常涉及到修改 Camera Entity 的属性值或是直接操作 Scene Object 中对应的参数来进行平移、旋转等变换动作。例如: ```javascript viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(-75.0, 40.0, 500000), // 设置目的地坐标 orientation : { // 设定朝向姿态 heading : Cesium.Math.toRadians(0), pitch : Cesium.Math.toRadians(-90), roll : 0 } }); ``` 上述过程即完成了基本的 Cesium 数据集剖分显示功能的设计思路和技术要点介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值