如何在vue3的<script setup>中使用cesium，实现点击地球保存并绘制该点位置，用虚线将该点与北极点连接，但不绘制北极点的位置，以及虚线的长度只有点击保存的那个点开始到北极点的1000米

在Vue3的<script setup>中使用Cesium需要先安装Cesium和@vue-cesium组件库：

npm install cesium --save
npm install @vue-cesium/vue3-cesium --save

然后在组件中引入Cesium和@vue-cesium：

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

<script setup>
import * as Cesium from "cesium/Cesium";
import { VcViewer } from "@vue-cesium/vue3-cesium";

const options = {
  animation: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infoBox: false,
  sceneModePicker: false,
  selectionIndicator: false,
  timeline: false,
  navigationHelpButton: false,
  shouldAnimate: true,
  vrButton: false,
};

const viewer = new Cesium.Viewer("cesiumContainer", options);
const vcViewer = new VcViewer(viewer);
</script>

接着，我们可以使用Cesium的API来实现点击地球保存并绘制该点位置，并用虚线将该点与北极点连接，但不绘制北极点的位置，以及虚线的长度只有点击保存的那个点开始到北极点的1000米。

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

<script setup>
import * as Cesium from "cesium/Cesium";
import { VcViewer } from "@vue-cesium/vue3-cesium";

const options = {
  animation: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  geocoder: false,
  homeButton: false,
  infoBox: false,
  sceneModePicker: false,
  selectionIndicator: false,
  timeline: false,
  navigationHelpButton: false,
  shouldAnimate: true,
  vrButton: false,
};

const viewer = new Cesium.Viewer("cesiumContainer", options);
const vcViewer = new VcViewer(viewer);

// 添加鼠标单击事件监听器
vcViewer.cameraChanged.addEventListener(() => {
  const picked = viewer.scene.pickPosition(event.position);
  if (Cesium.defined(picked)) {
    const position = viewer.scene.globe.ellipsoid.cartesianToCartographic(picked);
    const lon = Cesium.Math.toDegrees(position.longitude);
    const lat = Cesium.Math.toDegrees(position.latitude);
    const height = position.height;

    // 绘制点
    const entity = viewer.entities.add({
      position: picked,
      point: {
        pixelSize: 10,
        color: Cesium.Color.YELLOW,
      },
    });

    // 计算北极点的位置
    const northPole = Cesium.Cartesian3.fromDegrees(0, 90, 0);

    // 计算虚线的端点
    const point1 = picked;
    const point2 = Cesium.Cartesian3.fromRadians(northPole.longitude, northPole.latitude, 1000);

    // 绘制虚线
    const polyline = viewer.entities.add({
      polyline: {
        positions: [point1, point2],
        width: 5,
        material: new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.RED,
        }),
      },
    });
  }
});
</script>