vue+supermap超图实现点击地图添加点

点击地图加点并添加图标（已规划导航路线选取终点起点为例）

首先是点击获取坐标

getPosition(item) {
   this.point = item  // item 接受两个字符串 'start', 'end' 用来区分起点和终点
   const that = this 
   that.pickState = true // 加点时开关，为true时点击地图调用加点方法加点，
   const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
   handler.setInputAction(function(movement) {
     viewer.scene.globe.depthTestAgainstTerrain = true
     // position 拿到点击获取的笛卡尔坐标
     var position = viewer.scene.pickPosition(movement.position) 
     if (that.pickState) {
       showPointRouteOnMap(that.point, position) // 调用加点方法，传入point和position
     }
     that.pickState = false // 点击地图加点后关闭开关，防止多次点击地图后重复加点
     viewer.scene.globe.depthTestAgainstTerrain = false
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK) // 监听左键点击事件
 }

拿到笛卡尔坐标后加点

const endFlag = 'end'
const startFlag = 'start'
// imgType用于拼接店家图标路径，position用于确定加点位置
function showPointRouteOnMap(imgtype, position) {
  return new Promise((resolve, reject) => {
    try {
      if (startFlag === imgtype) { // 如果传入的是起点'start'，
        removeDataSource('start-end' + 'start') // 就删除之前已经添加的起点，重新添加
      }
      if (endFlag === imgtype) { // 同上防止多个终点的出现，添加新的终点前删除之前的终点
        removeDataSource('start-end' + 'end')
      }
      viewer = window.viewer
      const sourceName = 'start-end' + imgtype // 给点位起名字，用字符串拼接防止重复
      const dataSource = new Cesium.CustomDataSource(sourceName) // 将点放进dataSource中
      const image = `img/marker/resource/${imgtype}.png` // 图标本地的路径，图片放在public
      dataSource.entities.add({ // add方法添加点
        position: position, // 笛卡尔坐标
        billboard: { // 图标配置项
          image: image, // 图标图片
          scale: 1, // 图片大小
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 贴地
        }
      })
      viewer.dataSources.add(dataSource)
    } catch (e) {
      reject(e)
    }
  })
}