Vue整合Cesium

Vue2整合Cesium

前提

• 基本了解命令行，Javascript和vue Web开发。

• 支持WebGL的浏览器

• IDE或代码编辑器。如： Visual Studio Code

• node 6.9.0或更高版本，以及NPM 3或更高版本

创建Vue项目

vue create vue-cesium
# 注意这里是选择的vue2 进行操作

在vue中配置添加Cesium

• 安装cesium

  yarn add cesium
  

• 添加babel动态导入插件

  yarn add babel-plugin-dynamic-import-node --dev
  

• 配置vue.config.js 修改配置cesium 1 – 4

  "use strict";
  const path = require("path");
  const webpack = require("webpack");
  const CopyWebpackPlugin = require("copy-webpack-plugin");
  const cesiumSource = "node_modules/cesium/Source";
  const cesiumWorkers = "../Build/Cesium/Workers";
  
  function resolve(dir) {
    return path.join(__dirname, dir);
  }
  
  const name =  "vue-cesium-demo"; // page title
  
  // All configuration item explanations can be find in https://cli.vuejs.org/config/
  module.exports = {
    /**
     * You will need to set publicPath if you plan to deploy your site under a sub path,
     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then publicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     * Detail: https://cli.vuejs.org/config/#publicpath
     */
    configureWebpack: {
      // provide the app's title in webpack's name field, so that
      // it can be accessed in index.html to inject the correct title.
      name: name,
      resolve: {
        alias: {
          "@": resolve("src"),
           // cesium 1
          cesium: path.resolve(__dirname, cesiumSource)
        }
      },
      amd: {
        // cesium 2
        toUrlUndefined: true
      },
      module: {
        // cesium 3 不加这个配置会报require引入警告
        unknownContextCritical: false
      },
      plugins: [
          // cesium 4
        new webpack.DefinePlugin({
          // Define relative base path in cesium for loading assets
          CESIUM_BASE_URL: JSON.stringify("")
        }), // 对build生效，拷贝到dist目录下。如：dist/Assets
        new CopyWebpackPlugin([
          {
            from: path.join(cesiumSource, cesiumWorkers),
            to: "Workers"
          }
        ]),
        new CopyWebpackPlugin([
          {
            from: path.join(cesiumSource, "Assets"),
            to: "Assets"
          }
        ]),
        new CopyWebpackPlugin([
          {
            from: path.join(cesiumSource, "Widgets"),
            to: "Widgets"
          }
        ]),
        new CopyWebpackPlugin([
          {
            from: path.join(cesiumSource, "ThirdParty"),
            to: "ThirdParty"
          }
        ]),
        // new webpack.ProvidePlugin({
        //   Cesium: ['cesium/Cesium'] // Cesium对象实例可在每个js中使用而无须import
        // })
      ]
    }
  };
  

• 在main.js中导入 cesium样式

  import Vue from 'vue'
  import App from './App.vue'
  import 'cesium/Widgets/widgets.css' //样式
  let Cesium = require('cesium/Cesium')
  
  
  // Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/');
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YTY1NDYzYS01YzgxLT' +
    'Q2MGUtODBiYy0zODRmY2MwOGY4MDIiLCJpZCI6MjA1LCJpYXQiOjE1MDQ3MjQ1Njh9.rKgXUKAfFiiSAm_b9T8bpsDVdj0YyZeqGxNpzLlhxpk';
  
  new Vue({
    render: h => h(App),
  }).$mount('#app')
  
  

• 修改 app.vue

  <template>
    <HelloWorld/>
  </template>
  
  <script>
  import HelloWorld from './components/HelloWorld.vue'
  
  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
  </script>
  
  <style>
  #app {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0;
  }
  </style>
  

• 修改helloWorld.vue

  <template>
  <div ref='mapcontainer' class="map">
      </div>
  </template>
  
  <script>
      import {Viewer,UrlTemplateImageryProvider ,Cartesian3} from '@/../node_modules/cesium/Source/Cesium.js';
      export default {
          name: 'HelloWorld',
          mounted(){
              const viewer = new Viewer(this.$refs.mapcontainer, {
                  // infoBox: false,
                  // selectionIndicator: false,
                  shadows: false,
                  shouldAnimate: true,
                  imageryProvider: new UrlTemplateImageryProvider({
                      url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
                      // url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
                  }),
                  // terrainProvider: this.terrainProvider,
                  maximumRenderTimeChange: 1,
                  infoBox: false,
                  baseLayerPicker: 1,
                  scene3DOnly: true,
                  sceneModePicker: false,
                  selectionIndicator: false
              })
              viewer.scene.globe.enableLighting = true
              viewer.scene.skyAtmosphere.show = false
  
              viewer.geocoder.container.style.display = 'none'
              viewer.cesiumWidget.creditContainer.style.display = 'none'
              viewer.homeButton.container.style.display = 'none'
              viewer.clock.onTick.addEventListener(function() {
                  if (viewer.camera.pitch > -0.5) {
                      viewer.scene.screenSpaceCameraController.enableTilt = false
                  }
              })
              viewer.camera.flyTo({
                  destination: new Cartesian3(
                      -2284843.6893539904,
                      5030084.459916646,
                      3197419.22233534
                  ),
                  orientation: {
                      heading: 5.9824121245820825,
                      pitch: -0.65321351463230544,
                      roll: 6.282263350033762
                  }
              })
          }
      }
  </script>
  
  <style lang="css">
    .map{
      width: 100% ;
      height: 100% ;
      margin: 0 ;
      padding: 0 ;
      overflow: hidden;
    }
  </style>
  

• 启动查看

  yarn serve 
  

访问 本地 localhost:8080