来源文章
来源文章
安装cesium 依赖
npm i cesium --save
或
yarn add cesium
在项目根目录新增配置文件 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,
productionSourceMap: false,
filenameHashing: true,
devServer: {
open: true,
proxy: {
"/api": {
target: "http://xxx.xxx.xx.xxx:xxxx/",
ws: true,
changeOrigin: true,
pathRewrite: {
}
},
"/LocalDemoApi": {
target: "http://localhost:8080",
ws: true,
changeOrigin: true,
pathRewrite: {
"^/LocalDemoApi": "/DemoData"
}
},
}
},
configureWebpack: {
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'cesium': path.resolve(__dirname, cesiumSource)
}
},
plugins: [
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({
CESIUM_BASE_URL: JSON.stringify('./')
})
],
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']
}
},
}),
]
},
},
chainWebpack: config => {
config.resolve.alias
.set("@", resolve("src"))
.set("spatial", resolve("public/SpatialData"))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"));
},
pwa: {
iconPaths: {
favicon32: "favicon.ico",
favicon16: "favicon.ico",
appleTouchIcon: "favicon.ico",
maskIcon: "favicon.ico",
msTileImage: "favicon.ico"
}
},
css: {
loaderOptions: {
sass: {
},
},
},
};
配置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
var cesium = require('cesium/Cesium.js');
var widgets = require('cesium//Widgets/widgets.css');
Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
修改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 {
100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.box {
height: 100%;
}
</style>