cesium模仿百度地图二三维切换

最新推荐文章于 2024-07-29 14:45:57 发布

ZSZhen

最新推荐文章于 2024-07-29 14:45:57 发布

阅读量1.8k

点赞数 1

分类专栏： Cesium 文章标签： 3d vue

本文链接：https://blog.csdn.net/shenzhenzhao/article/details/127930328

版权

Cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百度地图二三维切换效果感觉比cesium自带的更平滑

不过百度地图的二三维切换只是简单的三维视角切换，二维是垂直视角

    
    //传入viewer和要切换的维数    
    onChange2D3DClick(viewer,index) {
       //获取屏幕中心视点坐标
      let centerResult = viewer.camera.pickEllipsoid(
        new Cesium.Cartesian2(
          viewer.canvas.clientWidth / 2,
          viewer.canvas.clientHeight / 2,
        ),
      )
      if (index === 2) {
        // 切到二维地图，如果设置到-90度，视角会自动跳转到正北，所以只设置到-88度
        this.rotateCamera(centerResult,-88);
      } else {
        // 切到三维地图
        this.rotateCamera(centerResult,-30);
      }
    },
    //根据视点切换垂直视角
    rotateCamera(options,num) {
      const viewer = map3d.getViewer();
      var position = options;
      // 给定切换所需时间，比如0.5s
      var flytime = 0.5;
      var initialPitch = viewer.camera.pitch;
      var pitch3d=Cesium.Math.toRadians(num);
      var angle = (pitch3d-initialPitch)/flytime;//每秒转动的度数
      // 获取相机和视点距离
      var distance = Cesium.Cartesian3.distance(options, viewer.scene.camera.positionWC);
      var startTime = Cesium.JulianDate.fromDate(new Date());

      var stopTime = Cesium.JulianDate.addSeconds(startTime, flytime, new Cesium.JulianDate());

      viewer.clock.startTime = startTime.clone();  // 开始时间
      viewer.clock.stopTime = stopTime.clone();     // 结速时间
      viewer.clock.currentTime = startTime.clone(); // 当前时间
      viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
      viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
      // 相机的当前heading
      var initialHeading = viewer.camera.heading;

      var Exection = function TimeExecution() {
        // 当前已经过去的时间，单位s
        var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
        // 根据过去的时间，计算偏航角的变化
        var heading = initialHeading;
        // 相机看点的角度，如果大于0那么则是从地底往上看，所以要为负值，这里取-30度
        var pitch = delTime * angle + initialPitch;

        viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(heading, pitch, distance));
        //解除目标锁定
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
        if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
          viewer.clock.onTick.removeEventListener(Exection);
        }
      };
      viewer.clock.onTick.addEventListener(Exection);
    },