Node+npm+Cesium安装教程

1. Cesium介绍
Cesium是一个跨平台、跨浏览器的展示三维地球和地图的开源Javascript库,使用WebGL硬件加速图形,使用时不需要任何插件,只需浏览器支持WebGL即可。
Cesium功能很强大,能支持2D,2.5D,3D地图展示,可以绘制各种点、线、面、体等实体,提供基于时间轴动态展示功能,支持轨迹、影像、3d模型等多种数据动态可视化展示。
2. 环境搭建
cesium 官网给出了安装步骤:node安装->npm安装->server.js服务启动->浏览器中网页访问 在这里插入图片描述
第一步:安装包下载
(1)Node下载,根据操作系统选择相应的node安装包,64位win10系统。下载链接: https://nodejs.org/en/download/
(2)Cesium下载,在cesium官网下载最新版本,存放路径:E:\cesium。下载链接:https://cesiumjs.org/downloads/
第二步:node+npm依赖包安装(核心)
(1)node安装
直接按照提示下一步,完成安装,设置安装路径:D:\Program Files\nodejs,安装完之后可在cmd命令栏中输入node -v测试安装是否成功。
在这里插入图片描述
(2)npm安装和环境配置
node安装成功后,可用npm install命令安装npm。
但安装时会遇到报错 npm WARN saveError ENOENT: no such file or directory, open ‘C\Users\package.json’
解决方法:输入命令npm init -f,初始化项目,再次输入npm install,可能会有Warning提示no description,no repository field,不用管最后 npm -v命令可以检测npm是否成功安装
在这里插入图片描述
(3)npm依赖包安装
1)修改配置
在nodejs安装路径下建立两个文件夹:node_global、node_cache
npm config set prefix “D:\ProgramFiles\nodejs\node_global”
npm config set cache “D:\ProgramFiles\nodejs\node_cache”
2)安装依赖包
npm install express -g
npm install compression -g
npm install request -g
npm install yargs -g
在这里插入图片描述
(4)运行cesium的HelloWorld示例demo
在命令栏进入cesium的根目录E:\cesium\Cesium-1.51,输入node server.js启动服务,会提示本地服务启动,连接至http://localhost:8080/
在这里插入图片描述
然后可在浏览器通过http://localhost:8080/Apps/HelloWorld.html访问helloworld示例文件。
在这里插入图片描述
可能会遇到报错Error: Cannot find module ‘express’.
在这里插入图片描述
解决办法是在命令栏切换到cesium根目录E:\cesium\Cesium-1.51,输入命令
npm install express
npm install compression
npm install request
npm install yargs
然后输入node server.js即可成功启动服务。

很抱歉,作为AI语言模型,我无法提供完整的代码。不过我可以给您一些指引: 1. 在Vue3项目中集成Cesium离线版本,需要先安装Cesium离线版本的npm包。可以使用以下命令安装: ``` npm install cesium-offline ``` 2. 在webpack配置文件中添加Cesium相关的配置。Cesium离线版本需要一些额外的配置才能正常运行。以下是一个示例配置: ``` const CopyWebpackPlugin = require('copy-webpack-plugin') const cesiumSource = 'node_modules/cesium-offline/Build/Cesium'; module.exports = { // ... output: { // ... sourcePrefix: '' }, amd: { // Enable webpack-friendly use of require in Cesium toUrlUndefined: true }, resolve: { alias: { // Cesium module name cesium: path.resolve(__dirname, cesiumSource) } }, module: { // ... unknownContextCritical: false, rules: [ { test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/, use: ['url-loader'] }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ // Copy Cesium Assets, Widgets, and Workers to a static directory new CopyWebpackPlugin({ patterns: [ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' }, { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }, { from: path.join(cesiumSource, 'Workers'), to: 'Workers' }, { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ] }) ] } ``` 3. 在Vue组件中使用Cesium。在Vue组件中,可以使用Cesium的全局变量`Cesium`来创建地图等组件。以下是一个示例组件: ``` <template> <div id="cesiumContainer"></div> </template> <script> import { defineComponent } from 'vue' import * as Cesium from 'cesium/Cesium' export default defineComponent({ mounted() { const viewer = new Cesium.Viewer('cesiumContainer') viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), point: { pixelSize: 10, color: Cesium.Color.RED } }) } }) </script> ``` 在这个示例组件中,我们使用了Cesium创建了一个简单的地图,并在地图上添加了一个红色的点。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值