cesium-获取视野中心点，并设置顶视图视角

该功能需要注意的点：

1. camera设置视角需要笛卡尔坐标系坐标，以及pitch、heading、roll三值。
2. 获取视野中心点坐标需要屏幕中心像素坐标转笛卡尔坐标转经纬度坐标，此时获取到中心点x，y坐标。
3. 以当前camera高度为准获取z坐标（或者其他合适的z坐标）。
4. 将视野中心的x，y结合camera当前的z，将经纬度转为笛卡尔坐标系。
5. 设置pitch为-1.5702046740690863，heading和roll取camera 当前值。
6. 以上组成的一组数据{x,y,z,heading,pitch,roll}设置camera视角

获取中心点坐标

    // 获取中心点笛卡尔坐标
    const center = viewer.camera.pickEllipsoid(
         new Cesium.Cartesian2(
           viewer.canvas.clientWidth / 2,
           viewer.canvas.clientHeight / 2
         )
     );
    //将笛卡尔坐标转化为经纬度坐标
    const cartographic = Cesium.Cartographic.fromCartesian(center);
    const longitude = Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = Cesium.Math.toDegrees(cartographic.latitude); 

以当前camera高度作为z坐标

    const cameracartographic = Cesium.Cartographic.fromCartesian(
          scene.camera.position
    );
    const height = cameracartographic.height;

结合中心点坐标和camera高度，转换笛卡尔坐标系

   const position = Cesium.Cartesian3.fromDegrees(
      longitude,
      latitude,
      height
    );

组合一组camera视角参数，并设置camera

   const view = {
      ...position,
      heading: scene.camera.heading,
      pitch: -1.5702046740690863,
      roll: scene.camera.roll,
    };
   setView(view);
   //封装设置camera视角函数
   const setView = （viewData, duration = 1.5）=>{
       viewer.scene.camera.flyTo({
           destination: new Cesium.Cartesian3(viewData.x, viewData.y, viewData.z),
           orientation: {
               heading: viewData.heading,
               pitch: viewData.pitch,
               roll: viewData.roll,
           },
           duration: duration,
   }

实现效果

总结

• 笛卡尔坐标系的xyz中z坐标不可以随意组合，（不能将中心点笛卡尔坐标系的xy和camera笛卡尔坐标系的z结合）需要进行经纬度转换后再组合，然后再反转为笛卡尔坐标系。