cesium 环境搭建 (详细)

本文详细介绍了在本地环境中搭建Cesium开发环境的步骤,包括Node.js的安装、使用cnpm设置国内镜像以及Cesium的下载与配置。通过遵循这些步骤,开发者可以快速启动并运行Cesium开发服务器。

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

1.node 安装

Node.js安装包及源码下载地址
安装完成(我的安装目录:D:\CesiumWorkspace),完成后,打开命令行(win+R),找到输入:node -v,如果结果为版本号,表明安装成功
$ node -v v6.10.3

2.cnpm 设置

命令行进入 D:\CesiumWorkspace> 后:输入
npm install -g cnpm --registry=https://registry.npm.taobao.org

3.Cesium的获取

Cesium下载地址

  1. 解压
  2. 打开命令行,进入当前目录 D:\CesiumWorkspace>
  3. 安装依赖,当前目录下输入:cnpm install,等待安装完成,然后输入: node server.js/node server.cjs
    出现 Cesium development server running locally. Connect to http://localhost:8080/ 后配置成功。

打开浏览器输入:**http://localhost:8080/**得到下图即可。
localhost:8080

### 如何在VSCode中配置和搭建Cesium开发环境 #### 安装必要的工具链 为了顺利地在 Visual Studio Code (VSCode)搭建 Cesium 开发环境,需先安装一系列依赖项。这包括但不限于 NVM、Node.js 和 npm 或 cnpm 及 yarn 这些包管理工具[^1]。 #### 创建项目结构并初始化 创建一个新的工作空间用于存放即将建立的应用程序文件。通过命令行进入该目录执行 `npm init` 来生成 package.json 文件,它将记录项目的元数据以及所使用的库版本信息。 #### 安装Cesium及相关依赖 利用 npm 或者 yarn 工具来安装 cesium 库以及其他可能需要用到的前端框架比如 Vue3 如果计划集成的话。对于希望保持最新稳定版的同学来说可以直接运行: ```bash npm install cesium@latest --save ``` 或者如果你更倾向于使用 Yarn: ```bash yarn add cesium@latest ``` #### 设置Webpack打包配置 由于 Cesium 默认并不支持 ES6 Modules 的形式被导入到 HTML 页面里,因此建议采用 Webpack 构建工具来进行资源管理和优化处理。可以考虑基于 Vite 快速启动模板简化此过程。 #### 编辑HTML入口文档 编辑应用程序的主要页面(通常是 index.html),按照官方指南中的指导添加如下脚本标签以正确加载 Cesium 模块[^3]: ```html <script type="module"> import * as Cesium from 'cesium'; window.CESIUM_BASE_URL = './node_modules/cesium/Build/Cesium/'; window.Cesium = Cesium; const viewer = new Cesium.Viewer('cesiumContainer'); </script> ``` 请注意调整路径指向本地 node_modules 下对应的未压缩版本(`CesiumUnminified`)以便于调试期间查看源码[^4]。 #### 使用VSCode插件增强体验 最后但同样重要的是,在 VSCode 内部可以通过安装特定扩展如 "Debugger for Chrome" 或其他浏览器适配器实现断点设置等功能从而提高效率[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值