cesuim环境搭建

已于 2023-03-28 21:46:00 修改
阅读量463 收藏
点赞数
文章标签： git
于 2023-03-28 20:57:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42200815/article/details/129824051
版权
该文详细介绍了如何初学cesium，包括从github下载cesium项目，安装vscode，设置node.js的全局模块和缓存路径，以及在vscode中配置和运行cesium项目。此外，还提供了处理权限问题和安装npm插件的步骤。

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

cesium初学

安装cesium vscode2020

1.cesium安装：

从github安装，网址为https://github.com/CesiumGS/cesium，点击code，使用Git下载，Git安装下载教程参考：https://blog.youkuaiyun.com/weixin_44486583/article/details/122704375?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-4-122704375-blog-129039059.235v27pc_relevant_multi_platform_whitelistv3&spm=1001.2101.3001.4242.3&utm_relevant_index=7
使用git下载github项目参考：https://blog.youkuaiyun.com/weixin_51956916/article/details/115050476?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168000644816800184117739%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=168000644816800184117739&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-115050476-null-null.142v76pc_search_v2,201v4add_ask,239v2insert_chatgpt&utm_term=git%E4%B8%8B%E8%BD%BDgithub%E4%BB%A3%E7%A0%81&spm=1018.2226.3001.4187
第4步 到此已经下载好cesium；

2. 安装vscode2020（不限制版本），随便找一个教程安装

3. 安装node.js

node.js网址为https://nodejs.cn/，参考教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
但是为了减少C盘空间的占用，需要修改全局模块路径和缓存路径，参考：https://blog.youkuaiyun.com/chanyeolchichi/article/details/121348541
用来测试是否成功：https://jumper.blog.youkuaiyun.com/article/details/122649972?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7EPayColumn-1-122649972-blog-121348541.235%5Ev27%5Epc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7EPayColumn-1-122649972-blog-121348541.235%5Ev27%5Epc_relevant_multi_platform_whitelistv3&utm_relevant_index=1
或许报错：解决https://blog.youkuaiyun.com/hj960511/article/details/107448147
另外需要安装镜像，经尝试，有效网址为：https://blog.youkuaiyun.com/haonan_z/article/details/122608063?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168001072616800186565791%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=168001072616800186565791&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-122608063-null-null.142v76wechat,201v4add_ask,239v2insert_chatgpt&utm_term=https%3A%2F%2Fregistry.npmmirror.com%2F&spm=1018.2226.3001.4187
在这里插入图片描述
安装的包出现在：（D:\soft\nodejs）\node_global\node_modules
另外可能有文件无法修改或者找不到，原因为权限不够，改为完全控制

4.然后打开vscode2020

打开cesium所在文件夹，添加中文插件，在选择【查看】-【外观】-【面板】勾选，一次输入npm install 、npm run build、 npm start
到此平台搭建完毕

zz_Coral
关注
Cesium-环境搭建
主攻大数据 人工智能 物联网 安全 低空经济等方向。mtsc 、gtest特邀分享嘉宾
12-04 164
other:npm install Cesium 通过这种方式装 ，没有装成功，主要错误提示说缺少gulp文件，具体错误如下。6、通过node server.js 指令发布ceisum服务。3.cmd进入cesium根目录，(需要用管理员方式打开)5、通过npm run release指令编译cesium。4、通过npm install指令下载第三方库。7.打开编译且成功部署的ceisum服务。2.去Cesium官网下载源码包。1.安装node.js。
CesiumJS环境搭建
小龙狗的博客
01-17 9950
一. 准备阶段 首先你要下载Cesium (当前版本1.41,下载地址：https://cesiumjs.org/downloads/) 和NodeJS安装包，（当前9.3.0, 下载地址：https://nodejs.org/en/）   二 搭建WEB服务器 这里有两种方法，一种是官网引导教程中的NodeJS,另一种是Windows自带的IIS。这里先介绍NodeJS的安装使用。 ...
vscode打开cesium，安装环境和编译步骤
m0_37845115的博客
11-29 842
vscode打开cesium，安装环境和编译步骤
Cesium系列：从入门到实践，打造属于你的3D地球应用
最新发布
mad970906的博客
04-02 1768
CesiumJS 是一个开源的 JavaScript 库，它能够帮助开发者创建出具有卓越性能、高精度、出色视觉质量和易用性的世界级 3D 地球仪和地图。无论是在航空航天领域，用于模拟飞行路径和展示卫星数据；还是在智能城市中，用于可视化城市规划和交通流量；亦或是无人机行业，用于展示飞行轨迹和地形数据，CesiumJS 都能大显身手。它在 Apache 2.0 许可下发布，这意味着无论是商业用途还是非商业用途，都可以免费使用。获取最新版本代码：访问 CesiumJS – Cesium，找到最新的 release
cesium视频教程
10-15
本课程是一套基于GIS+BIM的三维地理信息系统框架，学习本课程可以快速掌握cesiumjs开发GIS+BIM的地理信息系统，三维系统等。学习本课程可以提高对三维渲染，地理信息GIS+BIM的认识，为您的学习与开发工作节约大量宝贵的时间，快速入门，上手。   
Cesium的下载与使用
qq_58978006的博客
09-12 5919
介绍了如何从Cesium官网中下载Cesium完整的项目代码，以及在已有项目中通过npm来安装Cesium，并运行使用。同时了解如何获取Cesium的模型示例，并拷贝代码启动项目进行自定义与操作。
Cesium安装
Wendy421的博客
05-20 1345
cesium安装 最后再cmd中输..
[ Cesium ] 安装及启动
爪白白的个人博客
11-25 5176
Cesium 发行包的安装与引入自己的项目
cesium+Vue项目环境搭建
2301_82244343的博客
04-19 1083
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
Cesium开发环境搭建（一）
枫影竹韵的博客
06-05 769
解压下载的Cesium-1.107.zip到文件夹E:\CesiumExp\CesiumJS，进入该目录，执行命令cnpm install，编译Cesium。安装完成后，WIN+R，输入node --version，显示出版本，node.js则安装成功。文件夹E:\CesiumExp\CesiumJS出现node_modules文件夹即可。选择对应你系统的Node.js版本，这里我选择的是Windows系统、64位。采用国外的npm源，下载不动。1.下载安装Node.js。进入官网地址下载安装包。
Cesium开发环境搭建
smile_coder_life的博客
10-21 1463
一、Cesium简介 Cesium是一个跨平台、跨浏览器的展示三维地球和地图的Javascript库，Cesium来使用webgl进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持webgl，Cesium是基于Apache2.0许可的开源程序，它可以免费的用于商业和非商业用途。 二、Cesium环境搭建 可以使用tomcat，node.js，IIS，Apache，Nginx，本人使用的是node.js 2.1 node安装 node.js安装包及源码下载地址：https://nodejs.org
Cesium-1.31版本下载包
03-22
基于WebGL的Cesium平台的下载安装包。
最简单的cesium开始程序（小白专用）
04-03
cesium是GISer学习三维必备的一项技能，这里是一整套简单的cesium开始程序源代码（小白专用），助你快速入门
Cesium（可直接用）
08-14
Cesium 是通过 Web 浏览器创建 3D 地球和 2D 地图的 JavaScript 库，无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化；跨平台、跨浏览器；并且针对动态数据进行可视化。
cesium安装教程
qq_41003479的博客
12-04 1334
安装教程 新建一个index.html，代码如下 <!DOCTYPE html><html lang="en"><head>  <meta charset="utf-8">  <!-- Include the CesiumJS JavaScript and CSS files --> &nb
cesium下载和应用
yyyyyyyyyyy_9的博客
07-26 365
cesium下载和应用：https://blog.youkuaiyun.com/weixin_43310551/article/details/86218109cesium官方说明文档：https://cesium.com/learn/cesiumjs-learn/cesiumjs-creating-entities/
cesium简介
热门推荐
专注GIS开发
01-25 5万+
Cesium简介（Cesium的特点、功能、参考资料）
cesium osm building 白模下载
mylove10086
01-29 2228
cesium osm building 白模下载
三维引擎实践 - 配置Cesium 开发调试环境
GPU全栈博主
04-09 1718
在VSCode中配置Cesium 开发调试环境
cesium进行3d模型的搭建
03-31
### 如何使用 Cesium 进行 3D 模型的搭建 Cesium 是一款强大的开源 JavaScript 库，用于创建基于 WebGL 的地球和地图可视化应用。它支持多种三维数据源，并提供了丰富的 API 来加载和操作 3D 模型。 #### 创建基本 Cesium 场景 要开始构建 3D 模型，首先需要初始化一个 Cesium 场景。这可以通过 Vue 组件或其他前端框架完成。以下是创建 Cesium 容器并初始化场景的基本方法[^4]： ```html <template> <div id="cesiumContainer"></div> </template> <script> import * as Cesium from "cesium"; export default { name: "CesiumViewer", mounted() { this.initCesium(); }, methods: { initCesium() { const viewer = new Cesium.Viewer("cesiumContainer", { terrainProvider: Cesium.createWorldTerrain(), }); } } }; </script> <style scoped> #cesiumContainer { width: 100%; height: 100vh; } </style> ``` 此代码片段展示了如何在 Vue 中引入 Cesium 并创建一个名为 `cesiumContainer` 的 DOM 元素作为视图容器。 --- #### 加载外部 3D 模型 Cesium 支持加载各种类型的 3D 数据集，其中最常见的是 glTF 和 BIM 格式的文件。以下是一个加载 glTF 模型的例子[^3]: ```javascript const modelEntity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.1641, 39.9525), // 设置模型位置 (经度, 纬度) model: { uri: "./assets/models/ny.gltf", // 替换为实际路径 scale: 1, minimumPixelSize: 128, maximumScale: 20000, }, }); viewer.zoomTo(modelEntity); ``` 上述代码演示了如何通过指定 URI 路径来加载一个 glTF 格式的 3D 模型，并将其放置到特定地理坐标上。 --- #### 高级功能扩展 对于更复杂的场景需求，可以利用 Cesium 提供的一些高级特性，例如离屏渲染、反射水面效果以及动态光照等[^1]。这些技术通常涉及自定义着色器或调整材质属性。下面是一段关于动态光源控制的示例代码： ```javascript // 添加灯光实体 const lightSource = viewer.scene.primitives.add( new Cesium.PointPrimitiveCollection() ); lightSource.add({ position: Cesium.Cartesian3.fromDegrees(-75.1641, 39.9525, 500), color: Cesium.Color.WHITE.withAlpha(0.8), pixelSize: 10, }); ``` 这段脚本实现了向场景中添加一个白光点光源的效果。 --- #### 安装与配置环境 如果尚未安装 Cesium 或者遇到依赖问题，则可以根据官方文档指引进行 npm 包管理工具的操作[^2]： ```bash npm install cesium --save ``` 同时，在项目根目录下新增 `. Cesuim/Widgets/widgets.css` 文件引用至 HTML 页面头部区域以确保 UI 控件正常显示。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值