cesium教程(一):创建cesium应用

Cesium是一款开源的、高性能的3D地球和地图可视化平台,它允许开发者创建基于Web的、交互式的地理空间应用程序。

cesium教程(一):创建cesium应用

Cesium的核心是一个WebGL驱动的引擎,能够渲染大规模的地理数据集,支持高精度的地球模型和动态数据可视化。以下是一个Cesium的详细教程,分为多个章节。

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案,实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下,直接查看和操作3D模型,极大地提升了数据可视化的效果和用户交互体验。

创建一个帐户并获得一个令牌

Cesium ion 是一个用于流式传输和托管 3D 内容的开放平台。

注册 一个免费的cesium帐户,为您的应用程序获取全球卫星图像和真实世界的 3D 内容。

登录后:

  1. 转到您的 访问令牌 选项卡。
  2. 请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。

设置CesiumJS客户端

CesiumJS 是一个开源的 JavaScript 引擎。我们将使用它来可视化我们从cesium加载的内容。

  • 从 CDN 导入
  • 使用 NPM 安装

从 CDN 导入

使用 NPM 安装

如果您使用模块打包器(例如 Webpack、Parcel 或 Rollup)构建应用程序,则可以通过运行以下命令安装 CesiumJS:

下面的代码加载所需的 JavaScript 和 CSS 文件。

配置 CESIUM_BASE_URL

CesiumJS 需要在您的服务器上托管一些静态文件,例如 Web Worker 和 SVG 图标。配置您的模块捆绑器以复制以下四个目录并将它们作为静态文件提供:

  • node_modules/cesium/Build/Cesium/Workers
  • node_modules/cesium/Build/Cesium/ThirdParty
  • node_modules/cesium/Build/Cesium/Assets
  • node_modules/cesium/Build/Cesium/Widgets

CesiumJS导入之前 window.CESIUM_BASE_URL 全局变量必须设置,指向提供这四个目录的 URL。

例如,如果图像 at 下Assets/Images/cesium_credit.pngstatic/Cesium/ 前缀 http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png,那么您可以按如下方式设置基本 URL:

完整的 webpack 配置

本地引入

以上两种方法都是引用的线上代码,如果我们需要修改源码并且和团队的小伙伴一起使用的话,推荐使用这种方式。

cesium教程 - 索引

cesium教程(一):创建cesium应用

cesium教程(二):Viewer、Scene、影像

cesium教程(三):地形、坐标

cesium教程(四):相机

cesium教程(五):追踪、交互

cesium教程(六):Entity API-几何种类

cesium教程(七):Entity API-材质和轮廓

cesium教程(八):Entity API-高度和挤压,管理实体

cesium教程(九):Entity API-实体交互

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号