vue2配置cesium详细教程

1.简介

网络上现在关于vue配置cesium的教程有很多,包括csdn和掘金等。虽然这些教程在一定意义上提供了开发者如何配置cesium的方法,但是大部分的方法都不切实际,因为每个人的电脑中npm、node、cesium、vue、webpack的版本都基本不一致的,如果只是照搬全抄就会出现一连续的错误和bug。

本人帮大部分的开发人员尝试了网络上很多的教程,得出的最简单的便捷方法就是利用npm i cesium包之后,将该文件夹下的Cesium文件放在public文件夹下,可以事半功倍,成功快速的运行文件。具体操作如下所示:

2.流程

2.1创建vue2项目

我这边使用的是vue-cli create创建vue2项目,个人可以随心所欲,不用太在乎版本。

vue create XXXX

2.2 使用npm下载cesium第三方库

npm i cesium

2.3 将node_modules下面的cesium文件放置在public下

2.4 在vue文件中加入引入的cesium js文件和css文件

安装完成就将其引入项目,在这里我没有像网络上说的去配置vue.config.js,而是直接去引入cesium:

import * as Cesium from 'cesium'

使用cesium的时候需要在官网申请一个key,同时在main.js写入

window.CESIUM_BASE_URL = '/cesium'

打开,网站就大工告成了,同时打包测试一下,这时发现又出现了一个问题,报了一个错误:Cannot read property 'length' of undefined;这是@open-wc/webpack-import-meta-loader版本问题,通过降级或者修改进行解决:

这时候ok,在vue文件中导入css和js文件实现展示:

使用Vue2配合Cesium的方法有多种。一种方法是通过npm安装Cesium包,并将Cesium文件夹放置在public文件夹下,然后在Vue文件中引入Cesium的js和css文件。具体的操作流程如下: 1. 使用vue-cli create命令创建Vue2项目,可以根据需要选择合适的版本。 2. 使用npm安装Cesium第三方库,命令为npm i cesium。 3. 将node_modules下面的cesium文件夹复制到public文件夹下。 4. 在Vue文件中引入Cesium的js和css文件,可以使用import * as Cesium from 'cesium'来引入Cesium。注意,使用Cesium时需要在官网申请一个key,并在main.js中写入window.CESIUM_BASE_URL = '/cesium'。 5. 在index.html中引入本地Cesium环境的js和css文件,可以使用以下代码: ```html <link rel="stylesheet" href="./js/Cesium/Widgets/widgets.css"> <script src="./Cesium/Cesium.js"></script> ``` 这样就可以在Vue2项目中成功使用Cesium了。 [3<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue2中安装cesium](https://blog.csdn.net/weixin_56552543/article/details/129530851)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue2配置cesium详细教程](https://blog.csdn.net/qq_49491645/article/details/129038122)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [在Vue2中引入Cesium](https://blog.csdn.net/m0_58175658/article/details/130736147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

怒视天下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值