Cesium 画折线 polyline

Cesium 画折线非常简单， 鼠标点击获取经纬度， 把这些经纬度存放在数组中。 每次鼠标点击先清空之前画的折线，然后重新画。所用到的API 有Cesium.Cartesian3.fromDegreesArrayHeights。

完整代码如下：

<template>
  <div id="app">
    <div id="mapId"></div>
  </div>
</template>

<script>


export default {
  name: 'App',
  mounted() {
    this.polylineArr = []    
    this.init()
    this.click()
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVC'
      this.viewer = new Cesium.Viewer('mapId', {
        homeButton: true,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });
      setTimeout(() => {
        console.log("go to china")
        this.viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(113, 16, 2500000),
          orientation: {
            heading: Cesium.Math.toRadians(0),
            pitch: Cesium.Math.toRadians(-90),
            roll: 0

          }
        })
      }, 500);
    },
    click() {
      const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
      handler.setInputAction((movement) => {
        const lonLat =  this.getLonLatFromEllipsoid(movement)
        // this.addBillboard(lonLat) //画广告牌
        this.drawPolyline(lonLat)    //画折线
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    drawPolyline(lonLat){
      this.polylineArr.push(lonLat)
      const polylineIns = this.viewer.entities.getById("polylineId")
      if(polylineIns){
        //先清除之前画的折线
        this.viewer.entities.remove(polylineIns)
      }
      let positions = []
      this.polylineArr.forEach(item => {
        positions.push(item.longitude, item.latitude, item.altitude || 0)
      })
      this.viewer.entities.add({
        name: "折线",
        id: "polylineId",
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
          material: Cesium.Color.RED,
          width: 1
        }
      })
    },
    addBillboard(coordinate){
      const billboardOrigin = this.viewer.entities.getById("billboardId")
      if(billboardOrigin){
        //根据id, 清除之前创建的实体
        this.viewer.entities.remove(billboardOrigin)
      }
      const billboardEntity = new Cesium.Entity({
        id: 'billboardId',
        position: Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, 0),
        billboard: {
          image: '/static/logo.png',
          scale: 0.1
        },
        label: {
          text: `经度：${coordinate.longitude} \n 纬度：${coordinate.latitude}`,
          font: "2pt",
          fillColor: Cesium.Color.RED,
          show: true,
          pixelOffset: new Cesium.Cartesian2(0, -30),
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER
        }
      })
      this.viewer.entities.add(billboardEntity)
    },
    getLonLatFromEllipsoid(movement) {
      //获取椭球上点的经纬度
      let cartesian = this.viewer.camera.pickEllipsoid(movement.position);
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
      let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
      let alt = cartographic.height; // 高度，椭球面height永远等于0
      let coordinate = {
        longitude: Number(lng.toFixed(6)),
        latitude: Number(lat.toFixed(6)),
        altitude: Number(alt.toFixed(2))
      };      
      console.log('lonlat from Ellipsoid: ', coordinate)
      return coordinate
    },
  }
}
</script>

<style></style>

注意：在使用此代码时，需要替换自己的accessToken。