1. 下載cesium

下載之前，我們肯定是已經(jīng)創(chuàng)建vue3的項目了，并且已經(jīng)申請了cesium的token。申請token很簡單，去官網(wǎng)用郵箱注冊賬號，直接就能申請
官網(wǎng)：https://cesium.com/downloads/

# 直接下載默認版本的
 npm install cesium
# 也可以指定版本
npm install cesium@1.99 vite-plugin-cesium

2. 引入cesium

只需要再vite.config.js文件中加入兩句代碼

// 第一句
import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [
    cesium()  // 第二句
  ],
})

3. 使用地圖 與 初始化

• 首選需要再 html 寫一個標簽，用來當容器，然后在script標簽中引入 cesium。
• 必須在頁面掛在前調(diào)用 cesium創(chuàng)建方法。
• 在cesium 中 用的都是 笛卡爾坐標 ，所以需要經(jīng)緯度轉笛卡爾坐標。
• 要取消地圖左下角的 logo 圖標，可以直接在控制臺中選擇到那個標簽的類名，在css中將他隱藏，這個css可以寫在公共css文件中，也可以寫在 app.vue中。

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

<script setup>
import { ref ,onMounted} from 'vue'
// 引入cesium
import * as Cesium from 'cesium'
// onMounted 函數(shù)中調(diào)用
onMounted(()=>{
  // Cesium Token
  Cesium.Ion.defaultAccessToken = "這里就寫自己申請的token"
  // ArcGIS影像圖層 對瀏覽器會有壓力
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
    enablePickFeatures:false
  })

// 這是頁面上的控件顯示與否（初始化）
  const Viewer = new Cesium.Viewer('cesiumContainer',{
    timeline:false, // 時間軸控件
    animation:false, // 動畫控件
    geocoder:false, // 搜索控件
    homeButton:false, // 主頁控件
    sceneModePicker:false, // 投影方式控件
    baseLayerPicker:false, // 圖層選擇控件
    navigationHelpButton:false, // 幫助控件
    fullscreenButton:false, //全屏控件
    imageryProvider:esri ,// 自定義影像圖層 ,默認是谷歌的影像圖層
    terrainProvider:Cesium.createWorldTerrain({
      requestWaterMask:true, // 水面特效 對瀏覽器會有壓力
    })
  });

  // 經(jīng)緯度 轉 笛卡爾坐標 返回的是 笛卡爾坐標 ( Z != "高度" )
  const Carteaian1 =  Cesium.Cartesian3.fromDegrees(110,20,20)
  const Carteaian2 =  Cesium.Cartesian3.fromDegrees(110,20,30)
  console.log(Carteaian1,Carteaian2);

  // 笛卡爾 轉 弧度坐標
  let cartographic = Cesium.Cartographic.fromCartesian(Carteaian1)
  // 弧度坐標 轉 角度坐標(經(jīng)緯度)
  let lon = Cesium.Math.toDegrees(cartographic.longitude)
  let lat = Cesium.Math.toDegrees(cartographic.latitude)

  console.log(lon,lat,cartographic.height); // 轉換后的經(jīng)緯度坐標
 
})

</script>

<style scoped>

#cesiumContainer {
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>