vue+cesium初探（一） 加載cesium

參考文章1：https://www.cnblogs.com/laixiangran/p/4984522.html

參考文章2：https://blog.csdn.net/weixin_41940497/article/details/107904575?spm=1001.2014.3001.5501

參考文章3：https://blog.csdn.net/seelingzheng/article/details/105020577?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

1.創建Vue項目

這個不必多說

2.安裝cesium 依賴

npm i cesium --save
或
yarn add cesium

3.在項目根目錄新增配置文件 vue.config.js,如下

 主要看 1,2,3,4 部分，屬於配置cesium的

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const cesiumSource = './node_modules/cesium/Source'

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  // 打包后運行環境目錄
  publicPath: process.env.NODE_ENV === "production" ? "/projectName/" : "/",

  lintOnSave: true, // eslint-loader 是否在保存的時候檢查
  productionSourceMap: false, // 生產環境是否生成 sourceMap 文件
  filenameHashing: true, // 文件hash
  devServer: {
    // port: 3306,
    open: true,
    proxy: {
      "/api": {
        // target: "http://xxx.xxx.xx.xxx:xxxx/", // 開發地址及端口號
        // target: "http://xxx.xxx.xx.xxx:xxxx/", // 測試地址
        target: "http://xxx.xxx.xx.xxx:xxxx/", // 正式服務器地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {
        }
      },
      "/LocalDemoApi": {
        target: "http://localhost:8080", // 路徑指向本地主機地址及端口號
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/LocalDemoApi": "/DemoData" // 路徑轉發代理
        }
      },
    }
  },
  /*
    配置vue-cli3項目，可以說是all in vue.config.js的。
    當然，封裝、就一定會留個口給用戶，去對底層進行自定義操作。
    vue.config.js的配置項中，有兩個口，configureWebpack和chainWebpack。
    configureWebpack:
        是調整webpack配置最簡單的一種方式，可以新增也可以覆蓋cli中的配置。
    可以是一個對象：被 webpack-merge 合並到webpack 的設置中去
    也可以是一個函數：如果你需要基於環境有條件地配置行為，就可以進行一些邏輯處理，可以直接修改或
    新增配置，(該函數會在環境變量被設置之后懶執行)。該方法的第一個參數會收到已經解析好的配置。
    在函數內，你可以直接修改配置，或者返回一個將會被合並的對象。
    chainWebpack:
        這個庫提供了一個 webpack 原始配置的上層抽象，使其可以定義具名的 loader 規則
    和具名插件，可以通過其提供的一些方法鏈式調用，在cli-service中就使用了這個插件
  */
  configureWebpack: {
    output: {
      sourcePrefix: ' ' // 1 讓webpack 正確處理多行字符串配置 amd參數
    },
    amd: { // 2
      toUrlUndefined: true // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'cesium': path.resolve(__dirname, cesiumSource) // 3 定義別名cesium后，cesium代表了cesiumSource的文件路徑
      }
    },
    plugins: [ // 4
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), 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/Workers'), to: 'ThirdParty/Workers' }]),
      new webpack.DefinePlugin({ // 5
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    // module: {
    //   unknownContextRegExp: /^.\/.*$/,
    //   unknownContextCritical: false // 6 不讓webpack打印載入特定庫時候的警告
    // }
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: false,
            parse: {},
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          },
        }),
      ]
    },
  },

  chainWebpack: config => {
    // 配置import 和 require 等路徑別名,webpack中是通過 resolve.alias 來實現此功能的,通過set方法添加修改想要的alias 配置
    config.resolve.alias
      .set("@", resolve("src"))
      .set("spatial", resolve("public/SpatialData"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"));
  },

  // 修改瀏覽中的標簽logo
  pwa: {
    iconPaths: {
      favicon32: "favicon.ico",
      favicon16: "favicon.ico",
      appleTouchIcon: "favicon.ico",
      maskIcon: "favicon.ico",
      msTileImage: "favicon.ico"
    }
  },

  // 多頁面方式
  // pages: {
  //   index: {
  //     entry: './src/main',
  //     template: './public/index.html',
  //     fileName: 'index.html',
  //   },
  //   weui: {
  //     entry: './src/wmain',
  //     template: './public/windex.html',
  //   }
  // },

  css: {
    loaderOptions: {
      sass: {
        // implementation: require('sass'), // This line must in sass option
        // prependData: `@import "@/assets/scss/mixin.scss";` //引入全局變量
      },
    },
  },

};

4.配置main.js全局引入cesium相關文件

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 引入cesium相關文件
var cesium = require('cesium/Cesium.js');
var widgets = require('cesium//Widgets/widgets.css');

// 如果vue.config.js中不配置別名，就要用下面的方式按路徑引入
// var cesium = require('cesium/Build/Cesium/Cesium.js');
// var widgets = require('cesium/Build/Cesium/Widgets/widgets.css');

Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

5.修改helloWorld.vue

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
    }
  },
  methods: {
    init () {
      const Cesium = this.cesium
      const viewer = new Cesium.Viewer('cesiumContainer');
      viewer._cesiumWidget._creditContainer.style.display = "none";// 隱藏版權
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="scss">
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

 

 最后運行：