1.安装cesium
npm install cesium@1.95.0 -s
2.安装loader
npm install @open-wc/webpack-import-meta-loader
3.vue.config.js 配置
const {defineConfig} = require('@vue/cli-service')//require 是 node 用来加载并执行其它文件导出的模块的方法。
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
let cesiumSource = "node_modules/cesium/Source";//定义 Cesium 源码路径
let cesiumWorkers = "Workers";
module.exports = defineConfig({
//默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项,以避免构建后的代码中出现未转译的第三方依赖。
transpileDependencies: true,
//是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。
//设置为 true 或 'warning' 时,eslint-loader 会将 lint 错误输出为编译警告。
lintOnSave: false,
//如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。
// 如果这个值是一个函数,则会接收被解析的配置作为参数。
configureWebpack: {
//externals防止将某些 import 的包(package)打包到 bundle 中,
// 而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)
externals: {
'cesium': 'Cesium',
},
//output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset
// 和其他你所打包或使用 webpack 载入的任何内容」
output: {
sourcePrefix: " ", //修改输出 bundle 中每行的前缀。让webpack 正确处理多行字符串配置 amd参数
},
//设置 require.amd 或 define.amd 的值。
amd: {
toUrlUndefined: true, // webpack在cesium中能友好的使用require //允许Cesium兼容 webpack的require方式
},
//配置模块如何解析。
resolve: {
//尝试按顺序解析这些后缀名。如果有多个文件有相同的名字,但后缀名不同,webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
extensions: ['.js', '.vue', '.json'],
//创建 import 或 require 的别名,来确保模块引入变得更简单。
alias: {
"@": path.resolve("src"),
cesium: path.resolve(__dirname, cesiumSource),//设置cesium别名
}
},
//plugins 选项用于以各种方式自定义 webpack 构建过程。
plugins: [
//一种webpack拷贝文件的插件CopyWebpackPlugin
new CopyWebpackPlugin({
patterns: [
{
from: path.join(cesiumSource, cesiumWorkers), // 拷贝来源
to: "Workers"//拷贝到的位置
},
{from: path.join(cesiumSource, "Assets"), to: "Assets"},
{from: path.join(cesiumSource, "Widgets"), to: "Widgets"},
{from: path.join(cesiumSource, "ThirdParty/Workers"), to: "ThirdParty/Workers"}
]
}),
//DefinePlugin 允许你创建可在编译时配置的全局常量
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify("./"),
}),
],
//这些选项决定了如何处理项目中的不同类型的模块。
module: {
//让webpack打印载入特定库时候告警
unknownContextCritical: false,
//regExp: 正则表达式.
unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
//创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。 这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
rules: [
{
test: /\.js$/,
use: {
loader: '@open-wc/webpack-import-meta-loader',
},
},
]
},
},
//通过 webpack-dev-server 的这些配置,能够以多种方式改变其行为
devServer: {
//启用 webpack 的 热模块替换 特性
// 模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中,替换、添加或删除 模块,而无需重新加载整个页面。
hot: true,
// 是否自动启动浏览器
//open: true,
// 当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时,代理某些 URL 可能会很有用。
proxy: {
//'/api': 'http://localhost:3000',对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users
'/api': {
后台接口域名
target: 'http://localhost:8888/',
//默认情况下,代理时会保留主机头的来源,可以将 changeOrigin 设置为 true 以覆盖此行为
是否跨域
changeOrigin: true,
//如果要代理 websockets,配置这个参数
ws: true,
//如果不希望传递/api,则需要重写路径
pathRewrite: {'^/api': ''}
}
},
//指定监听请求的端口号:
port: 7000,
}
})
4.main.js
import 'cesium/Widgets/widgets.css';
5.index.html
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
6.自己新建组件
<template>
<div id="cesiumContainer">
</div>
</template>
<script>
import * as Cesium from 'cesium/Cesium'
export default {
mounted(){
this.initCesium()
},
methods:{
initCesium(){
Cesium.Ion.defaultAccessToken='命令牌';//cesiu官网注册,然后自己新建一个或者用默认;
let viewer = new Cesium.Viewer('cesiumContainer');
// 去除logo
logoviewer.cesiumWidget.creditContainer.style.display = "none";
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#cesiumContainer{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
7.引用组件