目錄
一、準(zhǔn)備工作
1、新建vue項(xiàng)目
解決報(bào)錯(cuò)：使用nvm后找不到vue -V找不到版本
2、安裝Cesium插件
3、安裝 Element Plus、unplugin-vue-components 和 unplugin-auto-import
4、按需自動(dòng)導(dǎo)入element-plus
測(cè)試按需自動(dòng)導(dǎo)入element-plus是否配置成功
二、項(xiàng)目代碼部分
1、引入sichuan.json文件
2、配置main.js文件
3、配置vue.config.js
4、配置App.vue
5、配置CesiumScene.vue
6、新建common文件夾
三、測(cè)試
一、準(zhǔn)備工作
1、新建vue項(xiàng)目
首先進(jìn)入【D:\my\vue-code】路徑下（此處創(chuàng)建在D:\my\vue-code下，請(qǐng)根據(jù)自身實(shí)際情況更改），然后進(jìn)入此文件夾的cmd命令行窗口。
執(zhí)行如下命令創(chuàng)建一個(gè)名為【vue3-cesium-start-master】的Vue項(xiàng)目，
直接選擇第一個(gè)選項(xiàng)，點(diǎn)擊回車后，會(huì)自動(dòng)下載所需文件（包括node_modules），創(chuàng)建成功后，用vscode打開(kāi)文件夾。
解決報(bào)錯(cuò)：使用nvm后找不到vue -V找不到版本
場(chǎng)景復(fù)現(xiàn)：因?yàn)榻邮值捻?xiàng)目有多個(gè)node版本不一致，后來(lái)就用了nvm 的node.js管理工具，安裝好后覺(jué)得方便許多，這兩天準(zhǔn)備搭建一個(gè)vue3的項(xiàng)目，但是在cmd輸入vue -V 就看不到版本，報(bào)了一個(gè)“vue不是內(nèi)部或外部命令”。
原因：nvm中的nodejs版本找不到啟動(dòng)vue的路徑，所以報(bào)這個(gè)錯(cuò)誤。
解決方法：
（1）找到vue.cmd把對(duì)應(yīng)的路徑，復(fù)制到我們的環(huán)境變量中
配置完然后重新打開(kāi)cmd 看看就可以了。
2、安裝Cesium插件
首先要下載安裝Cesium，安裝命令：
cnpm i -g cesium
或者在終端中進(jìn)入Vue項(xiàng)目目錄，運(yùn)行以下命令，利用npm引入Cesium插件，
npm i cesium vite-plugin-cesium vite -D然后，安裝成功后，前端項(xiàng)目中package.json會(huì)自動(dòng)注冊(cè)，?
3、安裝 Element Plus、unplugin-vue-components 和 unplugin-auto-import
?Element Plus
官網(wǎng)地址：https://element-plus.gitee.io/zh-CN/guide/
（1）使用包管理器（如 NPM、Yarn 或 pnpm）安裝 Element Plus，
此處我使用的是npm安裝，
npm install element-plus --save
?（2）還需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件 ，
npm install -D unplugin-vue-components unplugin-auto-import
（3）安裝成功后，前端項(xiàng)目中package.json會(huì)自動(dòng)注冊(cè)，?
4、按需自動(dòng)導(dǎo)入element-plus
地址：快速開(kāi)始 | Element Plus
?此處，我是把下列代碼插入到我的 Webpack 的配置文件中，
const { defineConfig } = require("@vue/cli-service");
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, // 新增代碼
// 對(duì)webpack配置
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
});
測(cè)試按需自動(dòng)導(dǎo)入element-plus是否配置成功
在App.vue中， 添加一個(gè)按鈕，用來(lái)測(cè)試是否配置成功，
<template>
<el-button type="primary">按鈕</el-button>
<router-view />
</template>
<style lang="scss"></style>在瀏覽器打開(kāi)http://localhost:8080/進(jìn)行訪問(wèn)，效果如下圖所示：?
?ok，配置成功了，說(shuō)明按需自動(dòng)導(dǎo)入element-plus已經(jīng)生效了。
二、項(xiàng)目代碼部分
1、引入sichuan.json文件
sichuan.json下載地址：DataV.GeoAtlas地理小工具系列
2、配置main.js文件
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
const app = createApp(App)
app.use(ElementPlus)
app.mount("#app")3、配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
amd: {
toUrlUndefined: true,
},
module: {
unknownContextCritical: false,
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: 'node_modules/cesium/Build/Cesium/Workers',
to: 'cesium/Workers',
},
{
from: 'node_modules/cesium/Build/Cesium/ThirdParty',
to: 'cesium/ThirdParty',
},
{
from: 'node_modules/cesium/Build/Cesium/Assets',
to: 'cesium/Assets',
},
{
from: 'node_modules/cesium/Build/Cesium/Widgets',
to: 'cesium/Widgets',
},
],
}),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('./cesium'),
}),
],
},
})
4、配置App.vue
<template>
<div id="app">
<CesiumScene />
</div>
</template>
<script>
import CesiumScene from './components/CesiumScene.vue'
export default {
name: 'App',
components: {
CesiumScene
}
}
</script>
<style>
html, body, #app {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
5、配置CesiumScene.vue
<template>
<div style="height: 100vh">
<el-button type="primary" @click="addGeoJson()" round>addGeoJson</el-button>
<div id="cesiumContainer" style="height: 100%"></div>
</div>
</template>
<script>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { CesiumIonDefaultAccessToken } from '@/common/js/config'
// 沒(méi)有CesiumIonDefaultAccessToken則使用官方示例中的Token
Cesium.Ion.defaultAccessToken =
CesiumIonDefaultAccessToken ||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmRiNjM4MC1kMDZkLTQ2NDQtYjQ3My0xZDI4MDU0MGJhZDciLCJpZCI6MzIxMzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTY1MjM4NzZ9.A3FBZ6HjKkTsOGnjwWWeO9L10HQ9c-wcF4c3dtTc4gQ'
// let viewer = null
// const initCesium = () => new Cesium.Viewer('cesiumContainer')
// onMounted(() => {
// viewer = initCesium()
// })
export default {
data() {
return {
viewer: {},
};
},
mounted() {
this.viewer = new Cesium.Viewer("cesiumContainer");
},
methods: {
// 給圖層添加顏色
async addGeoJson() {
// 這里的load（）函數(shù)返回的是一個(gè)promise
let res = await Cesium.GeoJsonDataSource.load("sichuan.json", {
stroke: Cesium.Color.WHITE,
fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：顏色必須大寫(xiě)，即不能為blue
strokeWidth: 5,
});
console.log(res)
// cesium提供的api加載方式
this.viewer.dataSources.add(res);
let entities = res.entities.values;
let colorHash = {};
for (let i = 0; i < entities.length; i++) {
let entity = entities[i];
let name = entity.name;
let color = colorHash[name];
if (!color) {
color = Cesium.Color.fromRandom({
alpha: 1,
});
colorHash[name] = color;
}
entity.polygon.material = color;
entity.polygon.outline = false;
entity.polygon.extrudedHeight = entity.properties.childrenNum * 5000; //高度擴(kuò)大5000倍，便于觀察
}
},
},
};
</script>
<style scoped>
@import 'cesium/widgets.css';
#cesiumContainer {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
6、新建common文件夾
common文件夾的目錄結(jié)果如下：
?其中有兩個(gè)文件：
?
?
三、測(cè)試
首先vscode進(jìn)入【D:\my\vue-code\vue3-cesium-start-master】文件夾，目前的目錄結(jié)構(gòu)，如下所示：
?然后vscode進(jìn)入此文件夾的終端命令行窗口，執(zhí)行如下指令運(yùn)行該項(xiàng)目：
npm run serve
?
在瀏覽器打開(kāi)http://localhost:8080/進(jìn)行訪問(wèn)，效果如下圖所示：?
點(diǎn)擊按鈕之后，效果如下圖所示：?
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-500203.html
如上圖，說(shuō)明項(xiàng)目啟動(dòng)成功了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500203.html
到了這里，關(guān)于VUE3-Cesium（加載GeoJSON數(shù)據(jù)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
