文
章
目
录
章
目
录
本文主要讲解关于Cesium+vue2 环境搭步骤建相关内容，让我们来一起学习下吧！
1.安装Cesium
建议指定1.95.0版本
npm install cesium@1.95.0 -s
2.安装loader
npm install @open-wc/webpack-import-meta-loader
3.安装webpack
npm install copy-webpack-plugin@10.2.4
4.vue.config.js配置
"use strict";
const { defineConfig } = require("@vue/cli-service");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "Workers";
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.NODE_ENV === "production" ? "/distBulletinBoard" : "/distBulletinBoard",
outputDir: "dist",
// 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
// 本地服务器配置
devServer: {
port: 8888,
host: "0.0.0.0",
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: "https://kwyd.hyyun.com/community",
changeOrigin: true,
ws: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",
},
},
},
},
configureWebpack: {
externals: {
cesium: "Cesium"
},
output: {
sourcePrefix: " ", // 让webpack 正确处理多行字符串配置 amd参数
},
amd: {
toUrlUndefined: true, // webpack在cesium中能友好的使用require
},
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
alias: {
"@": path.resolve("src"),
cesium: path.resolve(__dirname, cesiumSource),
},
},
plugins: [
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",
},
],
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify("./"),
}),
new CompressionPlugin({
test: /.js$|.html$|.css/,
threshold: 10240,
deleteOriginalAssets: false,
}),
],
module: {
unknownContextCritical: false,
unknownContextRegExp:
//cesium/cesium/Source/Core/buildModuleUrl.js/,
rules: [
{
test: /.js$/,
use: {
loader: "@open-wc/webpack-import-meta-loader",
},
},
{
exclude: /node_modules/,
include: /src/,
test: /.js$/,
use: "babel-loader",
},
],
},
}
});
5.创建Cesium
<template>
<div class="commonCesium">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
import * as Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
export default {
name: "CommonCesium",
data() {
return {
viewer: null, // viewer对象
};
},
mounted() {
this.$nextTick(()=>{
this.initCesium();
})
},
methods: {
initCesium() {
// Token
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4NGZjZDNmOC0zNTgwLTQxNTUtYWIxMS0zMGY5ZjVjNmU0ZjQiLCJpZCI6MTgyNzEzLCJpYXQiOjE3MDE4MjU1Mjh9.tJzjAxvinhK-2f4T3qzTjeArrzToKdWEhCegJw0zO-I";
// 创建Viewer对象
this.viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false,
animation: false, // 是否显示动画控件
homeButton: false, // 是否显示home键
geocoder: false, // 是否显示地名查找控件
baseLayerPicker: false, // 是否显示图层选择控件
timeline: false, // 是否显示时间线控件
fullscreenButton: false, // 是否全屏显示
sceneModePicker: false, // 是否显示投影方式控件 三维/二维
navigationInstructionsInitiallyVisible: false,
navigationHelpButton: false, // 是否显示帮助信息控件
orderIndependentTranslucency: false, //设置背景透明
shouldAnimate: true,
scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
selectionIndicator: false, // 取消点击有绿框
});
// 多余样式隐藏
this.viewer.cesiumWidget.creditContainer.style.display = "none";
// 地形遮挡
this.viewer.scene.globe.depthTestAgainstTerrain = false;
// 开启抗锯齿
this.viewer.scene.postProcessStages.fxaa.enabled = true;
// 获取可视区域
this.rectangle = this.viewer.camera.computeViewRectangle();
// 转地理坐标
// const east = Cesium.Math.toDegrees(this.rectangle.east).toFixed(6);
// console.log(this.rectangle, east);
// 设置初始位置（经度、纬度和高度）
// this.viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
// orientation: {
// heading: Cesium.Math.toRadians(0.0),
// pitch: Cesium.Math.toRadians(-15.0),
// },
// });
// 加载3dtiles数据
this.loadTilesetOnlineData();
},
// 模型加载[在线/本地数据]
loadTilesetOnlineData() {
const tileset = new Cesium.Cesium3DTileset({
// 模型要放到public目录
url: "3dtis/tileset.json",
// url: "http://123.57.148.132/newzhsq/tileset.json",
maximumScreenSpaceError: 2, //最大的屏幕空间误差
maximumNumberOfLoadedTiles: 5000, //最大加载瓦片个数
});
this.viewer.scene.primitives.add(tileset);
this.viewer.flyTo(tileset);
},
// 模型加载[Cesium官网数据]
loadTilesetData() {
const cesium3DTileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(75343),
maximumScreenSpaceError: 2, //最大的屏幕空间误差
maximumNumberOfLoadedTiles: 10000, //最大加载瓦片个数
});
const tileset = this.viewer.scene.primitives.add(cesium3DTileset);
// 移动到建筑位置
this.viewer.flyTo(tileset);
const tileset3DTile = this.viewer.scene.primitives.add(tileset);
tileset3DTile.readyPromise.then(() => {
tileset3DTile.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Height} >= 300", "rgba(67,241,30,0.8)"],
["${Height} >= 200", "rgba(17,131,255,0.8)"],
["${Height} >= 100", "rgba(241,103,32,0.8)"],
["${Height} >= 50", "rgba(241,160,101,0.8)"],
["${Height} >= 0", "rgba(240,255,0,0.8)"],
],
},
});
});
},
},
};
</script>
<style scoped lang="scss">
.commonCesium {
width: 100%;
height: 100%;
// 视图的大小
#cesiumContainer {
width: 100%;
height: 100%;
}
}
</style>
以上就是关于Cesium+vue2 环境搭建步骤相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！
