目錄前言一. 地圖初始化1 .Vue 項(xiàng)目創(chuàng)建2 . 運(yùn)行環(huán)境配置3. 地圖初始化二、地圖控件補(bǔ)充

前言

本文中，我們主要介紹 Cesium 在 Vue 3運(yùn)行環(huán)境的配置，以及 Cesium 實(shí)例中控件的顯隱設(shè)置，本文是后續(xù)文章內(nèi)容的基礎(chǔ)，項(xiàng)目代碼在此查看；通過本文，我們可以得到一個(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é)省磁盤空間。

打開終端，輸入以下命令來(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ù)制鏈接在瀏覽器打開即可看到：

看到這個(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 [email protected] vite-plugin-cesium

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