最新版cesium+vue3+ts+vite实现鼠标画点标记采集

效果图：

目标：
点击点采集，进行标记点，同时控制台输出点的经纬度
完整代码：

<script setup lang="ts">
import { onMounted, watch, ref } from "vue";
import * as Cesium from "cesium";
import initViewer from "@/cesium/initViewer";
// import MousePosition from '@/cesium/MousePosition'

let viewer: Cesium.Viewer | null = null;
//定义鼠标事件
let handler: Cesium.ScreenSpaceEventHandler | null = null;
//定义点集合
let pointArr = null;

onMounted(() => {
  // 加载底图
  viewer = initViewer();
  //根据鼠标移动获取经纬度
  // let mousePosition = new MousePosition(viewer);
});
const drawPoint = () => {
  // viewer是否为空
  if (viewer == null) {
    return;
  }
  //添加鼠标左键点击事件
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  //鼠标变成十字
  document.body.style.cursor = "crosshair";
  //鼠标左键点击事件
  handler.setInputAction((movement: any) => {
    if (viewer == null) {
      return;
    }
    // 获取经纬度和高程：地理坐标
    let ray: any = viewer.camera.getPickRay(movement.position); // 获取射线
    let cartesian = viewer.scene.globe.pick(ray, viewer.scene); // 获取地理坐标
    console.log("地理坐标：", cartesian);
    pointArr = viewer.entities.add({
      position: cartesian, //位置
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
      },
      label: {
        text: "紧贴地面（点）",
        font: "14pt sans-serif",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //高度参考
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平方向左对齐
        verticalOrigin: Cesium.VerticalOrigin.BASELINE, //垂直方向基线对齐
        pixelOffset: new Cesium.Cartesian2(20, 0), //偏移量 x,y
        fillColor: Cesium.Color.BLACK, //填充颜色
        showBackground: true,
        backgroundColor: new Cesium.Color(1, 1, 1, 0.5), //背景颜色
        backgroundPadding: new Cesium.Cartesian2(8, 4), //背景填充
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000), //距离显示条件 min,max单位米
        disableDepthTestDistance: Number.POSITIVE_INFINITY, //禁用深度测试距离
      },    
    });
    if (cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian); //将笛卡尔坐标转换为地理坐标
      const longitudeString = Cesium.Math.toDegrees(
        cartographic.longitude
      ).toFixed(5); //将弧度转为度的十进制度表示
      const latitudeString = Cesium.Math.toDegrees(
        cartographic.latitude
      ).toFixed(5); //将弧度转为度的十进制度表示
      console.log(
        "经度：" +
        longitudeString +
        "，纬度：" +
        latitudeString +
        "，经纬度：(" +
        longitudeString +
        "," +
        latitudeString +
        ")"
      );
    }
    //鼠标变成默认
    // document.body.style.cursor = "default";
    //移除鼠标左键点击事件
    // handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
const endDrewPoint = () => {
  //鼠标变成默认
  document.body.style.cursor = "default";
  //移除鼠标左键点击事件
  handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
</script>

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

  <div class="btndiv">
    <button class="drawPoint" @click="drawPoint">画点（点采集）</button>
    <button class="endDrewPoint" @click="endDrewPoint">画点结束</button>
  </div>
</template>

<style scoped>
#cesiumContainer {
  width: 100vw;
  /*屏幕宽度*/
  height: 100vh;
  /*屏幕高度*/
  overflow: hidden;
  /*隐藏滚动条*/
}

.btndiv {
  position: fixed;
  display: flex;
  width: 250px;
  top: 50px;
  flex-direction: column;
  align-items: center;
  z-index: 999;
}

.btndiv button {
  /* position: absolute; */
  margin-top: 50px;
  /*绝对定位*/
  /* background-color: darkcyan; */
  background: linear-gradient(315deg, #42d392 25%, #647eff);
  color: white;
  font-size: 20px;
  width: 200px;
  height: 50px;
  padding: 10px;
  top: 20px;
  left: 20px;
  z-index: 999;
  border-radius: 5px;
  border: none;
  opacity: 0.8;
}

button:hover {
  /* background-color: darkturquoise; */
  background: linear-gradient(315deg, #2d2adf 25%, #0c911e);
}

button:active {
  /* background-color: darkslategray; */
  background: linear-gradient(315deg, #2d2adf 25%, #0c911e);
  color: #cccec7;
}


</style>

备注：其他鼠标事件可以自行扩展
点标签和样式设置

 label: {
        text: "紧贴地面（点）",
        font: "14pt sans-serif",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //高度参考
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平方向左对齐
        verticalOrigin: Cesium.VerticalOrigin.BASELINE, //垂直方向基线对齐
        pixelOffset: new Cesium.Cartesian2(20, 0), //偏移量 x,y
        fillColor: Cesium.Color.BLACK, //填充颜色
        showBackground: true,
        backgroundColor: new Cesium.Color(1, 1, 1, 0.5), //背景颜色
        backgroundPadding: new Cesium.Cartesian2(8, 4), //背景填充
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000), //距离显示条件 min,max单位米
        disableDepthTestDistance: Number.POSITIVE_INFINITY, //禁用深度测试距离
      },   

鼠标样式

 //鼠标变成十字
  document.body.style.cursor = "crosshair";
//鼠标变成默认
// document.body.style.cursor = "default";

鼠标事件的控制

//移除鼠标左键点击事件
  handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);