EarthSDK官方示例有基于vue创建地球的http://earthsdk.com/v/last/Apps/Examples/?menu=true&url=./startup-createEarthWithVue.html

我没有创建成功，可能是我太菜了哈哈哈。一直报XE is undefined

查了资料，发现github上有好东西哈哈哈

方法一：

官方的github上提供了vue+EarthSDK的示例https://github.com/cesiumlab/EarthSDK-vue-cli-app

这个是根据npm来安装使用EarthSDK（ps:没办法修改源码）

如果我们想静态引入SDK（ps：可以修改源码）那么可以修改一下vue.config.js的Plugins配置,将from的资源地址改成

本地文件的资源地址就可以了，例如：

new CopyWebpackPlugin([
        {
          // from: './node_modules/earthsdk/dist/XbsjCesium',
          from: './src/earthMap/XbsjCesium',
          to: 'js/earthsdk/XbsjCesium',
          toType: 'dir'
        },
        {
          from: './src/earthMap/XbsjEarth',
          to: 'js/earthsdk/XbsjEarth',
          toType: 'dir'
        },
      ])

完美运行

 

如果把里面的示例组件改成了通用的vue页面模板，有可能报错

 16:7  error  Keys starting with with '_' are reserved in '_earth' group      vue/no-reserved-keys
  17:7  error  Keys starting with with '_' are reserved in '_bgImagery' group  vue/no-reserved-keys

  2:10  error  'XE' is not defined  no-undef

这是因为eslint校验导致的，只需要配置一下eslint

在.eslintrc.js文件中配置：

package.json配置：

方法二：将earthSDK文件放到public中然后再index.html中直接script引入，因为我使用的是vue-cli3创建出来的项目没有static，如果把earthSDK放到assets资源文件中会引入失败，方法一其实本质和方法二是一样的。

附上我学习的github https://github.com/GPBOB/vue-cesium

可参考https://zhuanlan.zhihu.com/p/83752812