cesium模仿百度地图二三维切换-Toy模板网

这篇具有很好参考价值的文章主要介绍了cesium模仿百度地图二三维切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

不过百度地图的二三维切换只是简单的三维视角切换，二维是垂直视角文章来源地址https://www.toymoban.com/news/detail-512014.html

    
    //传入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);
    },

到了这里，关于cesium模仿百度地图二三维切换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！