cesium开发（1）搭建 vue + cesium开发环境

进入新公司一段时间了，新公司业务主要从事卫星方面等webgl的开发，主要使用了leafletjs和cesium，其中cesium难度较大，需求较多，再进行了一段时间的使用开发后依旧感到有些力不从心，

因此决定从头对cesium进行一个系统的学习，至于那些老掉牙的理论就不说了，一切以代码为准。

开发环境: vue-cli4  vue版本：2.6.11   cesium版本：1.86.1

首先就是使用vue创建一个vue项目了，选择vue2版本，其实vue3在使用的时候都相差不大，对有些新更新的内容兼容性更好，但考虑到当前主要还是使用vue2，因此基于2版本进行开发

然后是按照cesium  

npm i cesium

我当前安装的是1.86.1版本，当前版本在vue2使用时会有一些小问题，后面会提到。

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

import * as Cesium from 'cesium'

这时直接启动时会报一个错误

error  in ./node_modules/cesium/Source/ThirdParty/zip.js

 

 function getWorker(options = {}) {
              return new Worker(new URL(workerData.scripts[0], import.meta.url), options); } 

主要原因是wenpace在加载import.meta的时候需要一个loader，安装一下就行了，在vue3+vite中就没有这个问题

npm i @open-wc/webpack-import-meta-loader -S

然后在vue.config.js里面配置,没有就在项目根目录新建一个

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.js$/, use: { loader: '@open-wc/webpack-import-meta-loader', }, }, ], }, }, }

启动，成功。

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

window.CESIUM_BASE_URL = '/'

 

在这里使用了高德地图，需要的可以参考一下，

https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

 

同时把该目录下的文件复制到项目的public文件夹下面

 

打开，网站就大工告成了，同时打包测试一下，这时发现又出现了一个问题，报了一个错误

Cannot read property 'length' of undefined

这是@open-wc/webpack-import-meta-loader版本问题，通过降级或者修改进行解决：

 再次打包，，ok，使用serve启动项目，成功，效果如下，大功告成

 

后继将继续更新cesium模拟卫星发射，卫星扫描，卫星过境、与地面站通信等方面的内容