本文共 1939 字，大约阅读时间需要 6 分钟。

目录

一、新建项目

vue create webapp

版本：@vue/cli 4.5.9

二、下载 Cesium 

npm install cesium

版本：cesium@1.76.0

三、引入(全局)

新建 vue.config.js 文件

const CopyWebpackPlugin = require('copy-webpack-plugin')const webpack = require('webpack')const path = require('path') let cesiumSource = './node_modules/cesium/Source'let cesiumWorkers = '../Build/Cesium/Workers' module.exports = {  // 基本路径  3.6之前的版本是 baseUrl  publicPath: "./",  // 输出文件目录  outputDir: "dist",  // eslint-loader 是否在保存的时候检查  lintOnSave: false,  // webpack-dev-server 相关配置  devServer: {    open: process.platform === "darwin",    host: "0.0.0.0",    port: 8088,    https: false,    hotOnly: false  },  configureWebpack: {    output: {      sourcePrefix: ' '    },    amd: {      toUrlUndefined: true    },    resolve: {      alias: {        'vue$': 'vue/dist/vue.esm.js',        '@': path.resolve('src'),        'cesium': path.resolve(__dirname, cesiumSource)      }    },    plugins: [      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/Workers'), to: 'ThirdParty/Workers' }]),      new webpack.DefinePlugin({        CESIUM_BASE_URL: JSON.stringify('./')      })    ],    module: {      unknownContextCritical: /^.\/.*$/,      unknownContextCritical: false    }  }};

main.js 中使用

import Vue from 'vue'import App from './App.vue' //引入cesium相关文件var cesium = require('cesium/Cesium');var widgets= require('cesium/Widgets/widgets.css'); Vue.prototype.cesium = cesiumVue.prototype.widgets = widgets Vue.config.productionTip = falsenew Vue({  render: h => h(App),}).$mount('#app')

四、三维场景初始化

App.vue 文件，这里添加了天地图

注意：Cesium.Viewer 对象不要挂载 Vue data属性上，存在效率问题。推荐放在全局 window 中。

五、效果图

转载地址：http://yanii.baihongyu.com/