cesium怎么点击获取自己标记线的多段经纬度

要获取自己标记线的多段经纬度，您可以在Cesium中使用以下代码：

var positions = [];

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(click) {
    var ray = viewer.camera.getPickRay(click.position);
    var position = viewer.scene.globe.pick(ray, viewer.scene);
    if (Cesium.defined(position)) {
        positions.push(position);
        console.log(positions); // 打印经纬度数组
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

这段代码将在地球上单击时记录每个单击位置的经纬度，并将其存储在一个数组中（`positions`）。您可以使用这些经纬度坐标来创建标记线或其他任何您想要的内容。

相关问题

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

是，您可以在 addMarker 函数中使用 Cesium 的 pickPosition 方法获取鼠标点击位置的经纬度，并且使用 Entity API 在地球上添加一个标记。下面是一个示例代码：

function addMarker() {
  // 获取鼠标点击位置的经纬度
  var position = viewer.scene.pickPosition(window.event.position);
  if (!Cesium.defined(position)) {
    return;
  }

  // 添加标记
  var marker = viewer.entities.add({
    position: position,
    point: {
      pixelSize: 10,
      color: Cesium.Color.YELLOW,
      outlineWidth: 1,
      outlineColor: Cesium.Color.BLACK
    }
  });
}

这个函数首先使用 Cesium 的 pickPosition 方法获取鼠标点击位置的经纬度，并检查位置是否存在。如果位置存在，它会使用 Entity API 在地球上添加一个黄色的标记。这个标记是一个点，大小为10个像素，颜色为黄色，周围有一个黑色的轮廓线。

需求：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>