前言

本文中，我們主要介紹 Cesium 在 Vue 3運(yùn)行環(huán)境的配置，以及 Cesium 實(shí)例中控件的顯隱設(shè)置，本文是后續(xù)文章內(nèi)容的基礎(chǔ)，項(xiàng)目代碼在此查看；通過(guò)本文，我們可以得到一個(gè)純凈的 cesium 項(xiàng)目，后續(xù)的操作我們就可以在此基礎(chǔ)上進(jìn)行；

一. 地圖初始化

1 .Vue 項(xiàng)目創(chuàng)建

首先，我們需要?jiǎng)?chuàng)建一個(gè)新的 Vue 項(xiàng)目。本項(xiàng)目基于 pnpm 安裝，也可使用其他包管理器進(jìn)行安裝，如 npm 或 yarn；pnpm 結(jié)合了前兩者的優(yōu)點(diǎn)，它能夠快速安裝依賴并節(jié)省磁盤(pán)空間。

打開(kāi)終端，輸入以下命令來(lái)創(chuàng)建一個(gè)新的 Vue 項(xiàng)目：

pnpm create vite

接著輸入項(xiàng)目名 init-map，并根據(jù)自己的需求進(jìn)行配置。我的配置如下圖所示：

創(chuàng)建項(xiàng)目后，就需要移動(dòng)到項(xiàng)目文件夾，然后安裝必備的庫(kù)，啟動(dòng)項(xiàng)目。按照系統(tǒng)提示的代碼，進(jìn)行安裝：

安裝完成后，啟動(dòng)項(xiàng)目，可以看到項(xiàng)目已經(jīng)啟動(dòng)在本地服務(wù)器上。復(fù)制鏈接在瀏覽器打開(kāi)即可看到：

看到這個(gè)頁(yè)面說(shuō)明項(xiàng)目啟動(dòng)成功。

2 . 運(yùn)行環(huán)境配置

接下來(lái)，我們需要進(jìn)行 cesium 庫(kù)以及其他依賴庫(kù)的安裝。按下 Ctrl+C 暫時(shí)關(guān)閉項(xiàng)目，然后輸入以下命令進(jìn)行 cesium 的安裝：

pnpm install cesium@1.99 vite-plugin-cesium

文件較大，稍等片刻即可安裝成功！(這里圖片漏了一個(gè)，不用太在意??)；

接著我們對(duì)項(xiàng)目文件進(jìn)行配置，修改 vite. Config. Js 文件為（增加了 cesium 插件）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()]
})

修改文件代碼之前，我們需要?jiǎng)h掉不需要的組件與代碼，保留純凈的項(xiàng)目結(jié)構(gòu)。

這里我建議讀者安裝一個(gè)插件 Vetur。使用這個(gè)插件可以快速地幫助用戶構(gòu)建 vue 代碼結(jié)構(gòu)。當(dāng)用戶輸入 v 時(shí)，便會(huì)彈出選擇框。我們選擇 setup 的組合式 API 即可：

讀者需要?jiǎng)h除所有存在的 component 組件，然后修改樣式 style. Css 為：

* {
  margin: 0;
  padding: 0, ;
  box-sizing: border-box
}

這一步主要是將所有元素的外邊距和內(nèi)邊距默認(rèn)為 0。因?yàn)樵卮笮?= 元素本身大小+外邊距+內(nèi)邊距+邊框粗細(xì)；設(shè)定元素盒子大小為 border-box 即只保留元素本身大??；避免受到其他元素的影響；設(shè)定好文檔結(jié)構(gòu)如下：

3. 地圖初始化

現(xiàn)在我們開(kāi)始初始化地圖。我們這里默認(rèn)將 cesium 實(shí)例在根組件 App. Vue 中進(jìn)行初始化。下面是具體代碼：

Html 部分：

<template>
  <div id="cesiumContainer"></div>
</template>

這里必須要確定一個(gè)元素作為 cesium 實(shí)例的承載容器。這里我們?cè)O(shè)定該元素 id 為 cesiumContainer，也可自行設(shè)定；只要在實(shí)例化的時(shí)候填對(duì)即可。

Javascript 部分：

因?yàn)榈貓D數(shù)據(jù)較大，考慮到性能和用戶體驗(yàn)，我們不采用響應(yīng)式的 Pinia存放地圖實(shí)例；為了讓其他的組件可以訪問(wèn)到 cesium 實(shí)例，我們可以使用 vue 的 getCurrentInstance方案。GetCurrentInstance 允許開(kāi)發(fā)者在 setup 函數(shù)或生命周期鉤子中訪問(wèn)組件實(shí)例。具體信息如下：

• getCurrentInstance() 方法用于在 setup 函數(shù)中訪問(wèn)當(dāng)前組件實(shí)例。它返回一個(gè)包含當(dāng)前組件實(shí)例的對(duì)象，開(kāi)發(fā)者可以使用該對(duì)象來(lái)訪問(wèn)當(dāng)前組件實(shí)例上的屬性和方法。
• 開(kāi)發(fā)者可以通過(guò) getCurrentInstance() 方法間接訪問(wèn)應(yīng)用程序?qū)嵗娜謱傩浴?getCurrentInstance() 獲得當(dāng)前組件實(shí)例后，可以通過(guò)其 appContext 屬性來(lái)訪問(wèn)全局應(yīng)用程序?qū)嵗＠^而可以使用 appContext.config.globalProperties 來(lái)訪問(wèn)應(yīng)用程序?qū)嵗娜謱傩浴?/li>
• appContext 是 getCurrentInstance() 方法返回的對(duì)象中的一個(gè)屬性。它代表當(dāng)前組件所屬的全局應(yīng)用程序上下文。每個(gè)組件實(shí)例上都有這個(gè)屬性；在根組件或父組件中創(chuàng)建 cesium 實(shí)例，然后通過(guò) getCurrentInstance 方式將 cesium 實(shí)例作為公共 api。如此一來(lái)，其余組件就可以通過(guò)這個(gè)方式訪問(wèn)到這個(gè) cesium 實(shí)例。

本質(zhì)上就是將cesium實(shí)例作為一個(gè)全局屬性進(jìn)行存儲(chǔ)，通過(guò)組件進(jìn)行創(chuàng)建和獲?。凰薪M件共享cesium；

import * as Cesium from "cesium";
import { onMounted, getCurrentInstance } from "vue";
//
const { appContext } = getCurrentInstance();
const global = appContext.config.globalProperties;
//必須在掛載后引入cesium地圖組件
onMounted(() => {
  Cesium.Ion.defaultAccessToken ="<your cesium token>";
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    enablePickFeatures: false,
  });
  const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: esri, //默認(rèn)的谷歌地圖影像  影像圖層 ImageryLayer,這里是esri的影像圖層
    //地形圖層TerrainProvider
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, //水面特效
    }), //viewer是所有api的入口
  });
  global.$viewer = viewer;
});

• new Cesium. Viewer 中，參數(shù) 1 為必選參數(shù)，為 cesium 承載容器的 id 名；參數(shù) 2 為可選參數(shù)，為 cesium 實(shí)例的詳細(xì)配置；
• 這里我們對(duì)該實(shí)例進(jìn)行配置，分別設(shè)定底圖為 ESRI，加入了帶有水面動(dòng)態(tài)效果的地形圖層；配置可以根據(jù)自己的需求進(jìn)行修改；具體配置過(guò)程我會(huì)在下一篇文章中詳細(xì)講解；

其他組件可以通過(guò)以下代碼獲取 cesium 實(shí)例：

const { appContext } = getCurrentInstance();
const global = appContext.config.globalProperties;
const $viewer = global.$viewer; //獲取全局變量viewer

Css 部分：

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

• 這里我們?cè)O(shè)定了 cesium 容器的高度和寬度鋪滿屏幕；并且隱藏因?yàn)槟承┣闆r超出的部分；
• scoped 表示當(dāng)前樣式作用范圍只有當(dāng)前組件，不會(huì)傳播到其他組件

至此，我們項(xiàng)目基礎(chǔ)配置基本完成。再次 pnpm dev 啟動(dòng)項(xiàng)目, 可看到項(xiàng)目頁(yè)面：

二、地圖控件

仔細(xì)觀察地圖，我們可以看到頁(yè)面上存在的地圖控件，但在實(shí)際開(kāi)發(fā)中，我們并不需要這些地圖控件，我們可以在配置 cesium 實(shí)例時(shí)，默認(rèn)關(guān)掉它們；代碼如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: esri, //默認(rèn)的谷歌地圖影像  影像圖層 ImageryLayer,這里是esri的影像圖層
    //地形圖層TerrainProvider
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, //水面特效
    }), 
    //圖層控件顯隱控制
    timeline: false, //隱藏時(shí)間軸
    animation: false, //隱藏動(dòng)畫(huà)控制器
    geocoder: false, //隱藏地名查找控制器
    homeButton: false, //隱藏Home按鈕
    sceneModePicker: false, //隱藏投影方式控制器
    baseLayerPicker: false, //隱藏圖層選擇控制器
    navigationHelpButton: false, //隱藏幫助按鈕
    fullscreenButton: false, //隱藏全屏按鈕
  });

這些配置選項(xiàng)默認(rèn)為 true，處于啟動(dòng)狀態(tài)，我們將其復(fù)制為 false, 關(guān)閉即可，刷新頁(yè)面可以看到，地圖控件已被隱藏；但是 cesium 的 Logo 還是在左下角，這個(gè) Cesium 官方并沒(méi)有提供配置選項(xiàng)，這里我們可以設(shè)置 CSS 樣式來(lái)進(jìn)行隱藏；代碼如下：

:deep(.cesium-viewer-bottom){
	display: none;
}

如此以來(lái)，我們便得到了一個(gè)純凈的 cesium 實(shí)例，后續(xù)的開(kāi)發(fā)工作將在此基礎(chǔ)上進(jìn)行；全部代碼如下所示(別忘記修改token哦??)：

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import { onMounted, getCurrentInstance } from "vue";
const { appContext } = getCurrentInstance();
const global = appContext.config.globalProperties;
//必須在掛載后引入cesium地圖組件
onMounted(() => {
  Cesium.Ion.defaultAccessToken = "your cesium token";
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    enablePickFeatures: false,
  });
  const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: esri, 
    //地形圖層TerrainProvider
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, //水面特效
    }), 
    //圖層控件顯隱控制
    timeline: false, //隱藏時(shí)間軸
    animation: false, //隱藏動(dòng)畫(huà)控制器
    geocoder: false, //隱藏地名查找控制器
    homeButton: false, //隱藏Home按鈕
    sceneModePicker: false, //隱藏投影方式控制器
    baseLayerPicker: false, //隱藏圖層選擇控制器
    navigationHelpButton: false, //隱藏幫助按鈕
    fullscreenButton: false, //隱藏全屏按鈕
  });
  global.$viewer = viewer;
});
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
:deep(.cesium-viewer-bottom){
display: none;
}
</style>

補(bǔ)充

代碼中還是有些許不足，主要有以下幾點(diǎn)：

token 應(yīng)該在項(xiàng)目根目錄下新建一個(gè).env 的環(huán)境變量文件存儲(chǔ)，各個(gè)組件中只需要通過(guò) import.meta.env. 變量名; 來(lái)調(diào)用；cesium 實(shí)例應(yīng)該放在一個(gè)專(zhuān)門(mén)存放全局屬性的組件中，而非根組件;

項(xiàng)目地址：

Github地址

Gitee地址

拓展閱讀

到此這篇關(guān)于Vue3中Cesium地圖初始化及地圖控件配置的文章就介紹到這了,更多相關(guān)vue初始化Cesium地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論