Cesium 手记

   Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。项目中打算使用cesium,终于,一个多月的时间有了初步的效果,在此记录下遇到的一些问题,以供后学者参考。


1. 3dtiles 倾斜摄影数据生成。

     官网上介绍的有多种方式,我使用CC通过原始照片数据和pos数据生成,转格式比较坑人,而且json数据需要自己写

2. gltf 模型获取。

    使用obj2gltf-1.2.0 把obj 格式转换成gltf 或glb格式。COLLADA2GLTF 工具 可以转 DAE格式,但对有些模型就不行,原因 貌似和 贴图生么的有关,没有细究。

3.geojson数据获取。

  可以通过ogr2ogr转换SHP得到。

4.叠加地形(高程)后,移动地图,模型位置随着地图移动发生变化,面位置随着地图移动发生变化。

  忘了怎么解决的,cesium 每月更新一次,尽量使用最新版本。

5.面叠加 倾斜数据后,边界宽度设置无效,边界线不显示,区域填充色在倾斜数据表面不显示。

  官网文档中说,边界宽度在window系统上确实无法设置Cesium-1.36 以后的版本,可以控制区域颜色是在 地形 或 倾斜数据上显示。关于面边界在倾斜数据上的显示,单独叠加一份面边界线,折中解决了。

6.模型如何自动贴着地形。 

   heightReference : Cesium.HeightReference.RELATIVE_TO_GROUND  可以解决。

7. 根据相机距离地面的高度,控制模型的显示

8. 选择性拾取某些entity 需要使用drillPick

9.  鼠标悬浮面上,高亮显示面边界,并显示infobox。悬浮模型上,显示模型信息。

10. 使用billboard 制作指示牌。

11. 调整倾斜数据距离地形的高度,做到和地形最佳吻合。

12 使用CC从照片生成3D模型并加载到cesium中。

QQ:1471726831,欢迎交流




   

    

### Cesium 3D地球和映射库使用指南 Cesium 是一个开源的 JavaScript 庢库,主要用于创建基于 WebGL 的三维地球和地图应用。它广泛应用于 GIS(地理信息系统)和 BIM(建筑信息建模)领域,并因其强大的功能和丰富的 API 而受到开发者的青睐[^1]。以下是一些关键的使用方法和相关信息: #### 1. 安装与初始化 要开始使用 Cesium,首先需要安装 Cesium 库。可以通过 npm 或直接引入 CDN 文件来完成安装。 ```bash npm install cesium ``` 或者通过 CDN 引入: ```html <script src="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> ``` 初始化 Cesium Viewer 的基本代码如下: ```javascript const viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); ``` 在上述代码中,`cesiumContainer` 是 HTML 中用于显示地球的容器 ID[^1]。 #### 2. 数据加载与渲染 Cesium 支持多种数据格式的加载,包括 GeoJSON、KML 和 3D Tiles 等。例如,加载 GeoJSON 数据可以使用以下代码: ```javascript viewer.dataSources.add(Cesium.GeoJsonDataSource.load('path/to/geojson.json')); ``` 对于 3D Gaussian 数据,可以通过将其转换为符合 3D Tiles 标准的数据集,从而实现高效的加载和渲染[^2]。 #### 3. 地理数据处理 Cesium for Unreal 是 Cesium 在游戏引擎中的扩展工具,它允许开发者将真实的地理数据无缝集成到虚拟场景中。这不仅提升了开发效率,还为智慧城市、自动驾驶等领域提供了核心基础设施支持[^3]。 #### 4. 自定义功能 Cesium 提供了丰富的 API,允许开发者自定义地球的显示效果。例如,添加图层、调整相机视角等操作都可以通过 API 实现。以下是一个简单的相机控制示例: ```javascript viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 300000.0), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 } }); ``` #### 5. 集成框架 Cesium 可以与现代前端框架(如 Vue.js)结合使用。例如,在 Vue3 项目中集成 Cesium,可以参考以下步骤: 1. 安装依赖:`npm install cesium opentiny-ui` 2. 在组件中初始化 Cesium Viewer。 ```javascript import { onMounted } from 'vue'; import * as Cesium from 'cesium'; export default { setup() { onMounted(() => { const viewer = new Cesium.Viewer('cesiumContainer'); }); } }; ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值