1. 下载cesium

下载之前，我们肯定是已经创建vue3的项目了，并且已经申请了cesium的token。申请token很简单，去官网用邮箱注册账号，直接就能申请
官网：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。
• 必须在页面挂在前调用 cesium创建方法。
• 在cesium 中 用的都是 笛卡尔坐标 ，所以需要经纬度转笛卡尔坐标。
• 要取消地图左下角的 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 函数中调用
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, // 水面特效 对浏览器会有压力
    })
  });

  // 经纬度 转 笛卡尔坐标 返回的是 笛卡尔坐标 ( 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)
  // 弧度坐标 转 角度坐标(经纬度)
  let lon = Cesium.Math.toDegrees(cartographic.longitude)
  let lat = Cesium.Math.toDegrees(cartographic.latitude)

  console.log(lon,lat,cartographic.height); // 转换后的经纬度坐标
 
})

</script>

<style scoped>

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