创建vue2.0 + earthSDK项目

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.安装earthSDK和copy-webpack-plugin插件

npm install earthsdk copy-webpack-plugin@5.0.4 --save

2.配置

// vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  configureWebpack: config => {
    const cwp = new CopyWebpackPlugin([
      {
        from: './node_modules/earthsdk/dist/XbsjCesium',
        to: 'js/earthsdk/XbsjCesium',
        toType: 'dir'
      },
      {
        from: './node_modules/earthsdk/dist/XbsjEarth',
        to: 'js/earthsdk/XbsjEarth',
        toType: 'dir'
      },
    ]);
    config.plugins.push(cwp);
  }
}

// index.html
<script src="./js/earthsdk/XbsjEarth/XbsjEarth.js"></script>

// main.js
XE.ready().then(function startup() {
  new Vue({
    render: h => h(App),
  }).$mount('#app')
});

2.使用

let earth = new XE.Earth(this.$refs.earthContainer, {
  contextOptions: {
    webgl: {
      alpha: true,
    }
  },
});
earth.sceneTree.root = {
  children: [{
    czmObject: {
      name: "默认离线影像",
      xbsjType: "Imagery",
      xbsjImageryProvider: {
        createTileMapServiceImageryProvider: {
          url: XE.HTML.cesiumDir + "Assets/Textures/NaturalEarthII",
          fileExtension: "jpg"
        },
        type: "createTileMapServiceImageryProvider"
      }
    }
  }],
};

效果如下：

附上大佬的githup项目：https://github.com/cesiumlab/EarthSDK-vue-cli-app
第一次写博客 ~ v ~