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文件实现展示:

Logo

前往低代码交流专区

更多推荐