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>
最后运行：
