需求：vue项目中使用Cesium，右侧一个标记图标，点击即可在地球任意位置做标记

首先需要在 Vue 项目中安装 Cesium，可以通过以下命令进行安装：

npm install cesium --save

然后在需要使用 Cesium 的组件中引入 Cesium：

import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

接着，在组件的 `mounted` 钩子函数中创建 CesiumViewer：

mounted() {
  // 创建Cesium Viewer
  this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    terrainProvider: Cesium.createWorldTerrain()
  })
}

其中，`this.$refs.cesiumContainer` 是一个 DOM 元素，代表了 Cesium 的容器。

接下来，我们可以在组件中添加一个标记图标，并且添加点击事件：

<template>
  <div class="cesium-container" ref="cesiumContainer"></div>
  <div class="marker" @click="addMarker"></div>
</template>

<style>
  .cesium-container {
    height: 500px;
  }
  .marker {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 50px;
    height: 50px;
    background-image: url(./marker.png);
    cursor: pointer;
  }
</style>

在 `addMarker` 函数中，我们可以使用 Cesium 的 `pickPosition` 方法获取鼠标点击位置的经纬度，并且在地球上添加一个标记：

methods: {
  addMarker() {
    const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)

    // 点击事件处理
    handler.setInputAction((click) => {
      const cartesian = this.viewer.camera.pickEllipsoid(click.position, this.viewer.scene.globe.ellipsoid)
      if (cartesian) {
        // 获取经纬度
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
        const longitude = Cesium.Math.toDegrees(cartographic.longitude)
        const latitude = Cesium.Math.toDegrees(cartographic.latitude)

        // 创建标记
        const marker = this.viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
          point: {
            pixelSize: 10,
            color: Cesium.Color.YELLOW
          }
        })

        // 销毁事件处理
        handler.destroy()
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  }
}

最后，在组件的 `beforeDestroy` 钩子函数中销毁 CesiumViewer：

beforeDestroy() {
  if (this.viewer) {
    this.viewer.destroy()
  }
}

完整的代码如下：

<template>
  <div class="cesium-container" ref="cesiumContainer"></div>
  <div class="marker" @click="addMarker"></div>
</template>

<script>
import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    // 创建Cesium Viewer
    this.viewer = new Cesium.Viewer(this.$refs.cesiumContainer, {
      animation: false,
      baseLayerPicker: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
      terrainProvider: Cesium.createWorldTerrain()
    })
  },
  methods: {
    addMarker() {
      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)

      // 点击事件处理
      handler.setInputAction((click) => {
        const cartesian = this.viewer.camera.pickEllipsoid(click.position, this.viewer.scene.globe.ellipsoid)
        if (cartesian) {
          // 获取经纬度
          const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
          const longitude = Cesium.Math.toDegrees(cartographic.longitude)
          const latitude = Cesium.Math.toDegrees(cartographic.latitude)

          // 创建标记
          const marker = this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
            point: {
              pixelSize: 10,
              color: Cesium.Color.YELLOW
            }
          })

          // 销毁事件处理
          handler.destroy()
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    }
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy()
    }
  }
}
</script>

<style>
  .cesium-container {
    height: 500px;
  }
  .marker {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 50px;
    height: 50px;
    background-image: url(./marker.png);
    cursor: pointer;
  }
</style>