cesium实现点击地图上的图标飞向具体位置效果

想要实现飞行效果,首先要弄明白

1. 怎么获取到地图上图标的点击事件
2. 怎么飞

怎么获取到地图上图标的点击事件?

如果你看过我之前的# cesium广告牌渲染,快速学会在地图上使用图片添加标记, 那你可能已经会添加事件了,如果你没有,下面是我c过来的addAction方法,这里简单说一下,我用的是在全局的环境中添加事件,根据点击的视口位置获取该位置的实体,在对实体进行处理,如:获取实体信息,改变实体数据等

let action = {}
function addAction() {
  // 如果存在环境的监听器,将其销毁
  if (action.handler) {
    action.handler.destroy()
  }
  // 创建一个在cesium环境上的监听器
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  action.handler = handler
  
  // 给监听器添加回调
  action.handler.setInputAction((obj) => {
    // obj内存储有点击位置,通过位置和cesium自带的pick方法获取点击到的entity中的properties属性
    // properties属性存储了entity所在该元素的数据
    const item = viewer.scene.pick(obj.position)?.id?.properties
    if (!item) return
    flyTo(item)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

怎么飞

和我一样的小白首先要明白一件事,是什么在飞?是摄像头!核心就是window.viewer.camera!

function flyTo(data) {
  const {latitude, longitude} = data
  if(!latitude || !longitude) return
  let heading = 0,
      pitch = -90,
      roll = 0
  window.viewer.camera.flyTo({
    // 将经纬度转化为笛卡尔坐标
    destination: Cesium.Cartesian3.fromDegrees(
      longitude,
      latitude,
      height || 200.0
    ),
    orientation: {
      // 偏航角、俯仰角、翻滚角,具体值根据项目调整
      // (这三个值我是真搞不懂,都是瞎猜然后一点点试的,有时间去学一下
      heading: Cesium.Math.toRadians(heading),
      pitch: Cesium.Math.toRadians(pitch),
      roll: Cesium.Math.toRadians(roll)
    },
    // 还可以写其他设置,我就不写了
  });
}

取消选中时,向上飞

function cancelThenFly() {
  const [longitude, latitude, height] = cartesianToDegrees(viewer.camera.position)
  flyTo({
    longitude,
    latitude,
    height
  })
}