Vue2中配置Cesium全过程
作者：愿为浪漫渡此劫
这篇文章主要介绍了Vue2中配置Cesium全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于Vue2配置Cesium
本文是关于基于Vue2，对Cesium，进行在线使用和离线（内网）使用配置
一、安装Cesium依赖
npm i Cesium
二、在线Cesimu配置（在vue.config.js文件中进行如下配置）
const path = require("path");
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: "./portal", // 打包
publicPath: "./",
runtimeCompiler: true,
// 输出文件目录
outputDir: "dist",
configureWebpack: {
output: {
sourcePrefix: "", // 1 让webpack 正确处理多行字符串配置 amd参数
},
amd: {
toUrlUndefined: true, // webpack在cesium中能友好的使用require
},
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": path.resolve("src"),
components: path.resolve("src/components"),
assets: path.resolve("src/assets"),
views: path.resolve("src/views"),
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("./"), // 本地
//CESIUM_BASE_URL: JSON.stringify("./portal"), // 打包后
}),
],
// 导致打包出现length undefined
// // webpack在cesium中能友好的使用import.meta
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "@open-wc/webpack-import-meta-loader",
},
},
],
}
},
assetsDir: "assets",
filenameHashing: false,
lintOnSave: process.env.NODE_ENV !== "production",
// lintOnSave: false,
productionSourceMap: false,
devServer: {
host: "0.0.0.0",
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
proxy: {
"/pre": {
target: "http://192.168.102.54:8733/",
changeOrigin: true,
pathRewrite: {
"^/pre": "",
},
},
},
},
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目录文件
},
},
},
};三、离线Cesium配置
1、将Cesium资源文件夹
放在public/libs/Cesium，如图所示
这个Cesium文件夹来源于，node-modules下的，如图所示
2、单页面 public/index.html引入
<script src="./libs/Cesium/Cesium.js" type="text/javascript"></script>
3、vue.config.js 如下配置
const path = require("path");
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: "./portal", // 打包
publicPath: "./",
runtimeCompiler: true,
// 输出文件目录
outputDir: "dist",
configureWebpack: {
output: {
sourcePrefix: "", // 1 让webpack 正确处理多行字符串配置 amd参数
},
amd: {
toUrlUndefined: true, // webpack在cesium中能友好的使用require
},
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": path.resolve("src"),
components: path.resolve("src/components"),
assets: path.resolve("src/assets"),
views: path.resolve("src/views"),
cesium: path.resolve(__dirname, cesiumSource),
},
},
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/cesium/Build/Cesium',
to: 'libs/Cesium',
filter: (resourcePath) => {
if (/cesium[\\/]Build[\\/]Cesium[\\/]Cesium.js$/.test(resourcePath)) {
return false;
} else if (/cesium[\\/]Build[\\/]Cesium[\\/]Cesium.d.ts$/.test(resourcePath)) {
return false;
}
return true;
},
},
]),
new webpack.DefinePlugin({
// CESIUM_BASE_URL: JSON.stringify("./"), // 本地
CESIUM_BASE_URL: JSON.stringify('libs/Cesium'),
//CESIUM_BASE_URL: JSON.stringify("./portal"), // 打包后
}),
],
optimization : {
splitChunks : {
chunks : "all",
cacheGroups : {
cesium: {
name: 'Cesium',
priority: 30,
test: /[\\/]node_modules[\\/]@smart[\\/]cesium[\\/]Build[\\/]Cesium[\\/]Cesium.js/
},
}
}
},
// 导致打包出现length undefined
// // webpack在cesium中能友好的使用import.meta
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "@open-wc/webpack-import-meta-loader",
},
},
],
}
},
assetsDir: "assets",
filenameHashing: false,
lintOnSave: process.env.NODE_ENV !== "production",
// lintOnSave: false,
productionSourceMap: false,
devServer: {
host: "0.0.0.0",
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
proxy: {
"/sso": {
target: "http://192.168.102.194:8098/",
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
"^/sso": "", //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
},
},
// 共享中心
"/pre": {
target: "http://192.168.102.54:8733/", // zk
// target: "http://192.168.102.43:8733/", // s
changeOrigin: true,
pathRewrite: {
"^/pre": "",
},
},
"/zk": {
target: "http://192.168.102.54:8736/",
changeOrigin: true,
pathRewrite: {
"^/zk": "",
},
},
"/scene": {
target: "http://192.168.102.43:8070/",
changeOrigin: true,
pathRewrite: {
"^/scene": "",
},
},
},
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目录文件
},
},
},
};4、在Cesium初始化时
如下使用
init() {
const Cesium = this.cesium;
this.highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
this.normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
this.viewer = new Cesium.Viewer("cesiumContainer", {
//先行禁止infoBox弹出
selectionIndicator: false,
infoBox: false,
geocoder: false,
homeButton: false,
sceneModePicker: false,
fullscreenButton: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fulllscreenButtond: false,
vrButton: false,
// 加载本地离线Cesium资源
imageryProvider: new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
}),
});
this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。