cesium 3Dtiles、地图 自动旋转、罗盘控件

// 旋转地图
            rotateCamera: function (cesiumView, callback) {
                var pitch = Cesium.Math.toRadians(-25);
                // 给定飞行一周所需时间,比如10s, 那么每秒转动度数
                var angle = 360 / 100;
                // 给定相机距离点多少距离飞行,这里取值为5000m
                var distance = 280;
                var startTime = Cesium.JulianDate.fromDate(new Date());
                var stopTime = Cesium.JulianDate.addSeconds(startTime, 10, new Cesium.JulianDate());
                cesiumView.clock.startTime = startTime.clone(); // 开始时间
                cesiumView.clock.stopTime = stopTime.clone(); // 结速时间
                cesiumView.clock.currentTime = startTime.clone(); // 当前时间
                cesiumView.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
                cesiumView.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
                // 相机的当前heading
                var initialHeading = cesiumView.camera.heading;
                Exection = () => {
                    // 当前已经过去的时间,单位s
                    var delTime = Cesium.JulianDate.secondsDifference(cesiumView.clock.currentTime, cesiumView
                        .clock.startTime);
                    var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
                    cesiumView.scene.camera.setView({
                        destination: Cesium.Cartesian3.fromDegrees(center[0], center[1], 0), // 旋转中心点的坐标
                        orientation: {
                            heading: heading,
                            pitch: pitch
                        }
                    });
                    cesiumView.scene.camera.moveBackward(distance);
                    // 执行需要回调的函数
                    callback();
                };
                cesiumView.clock.onTick.addEventListener(Exection);
            },
setInterval(rotateCamera(cesiumView, callback), 1000);
函数封装(监听用户离开自动旋转)

    // 旋转地图
    rotateCamera() {
      var pitch = Cesium.Math.toRadians(-25);
      // 给定飞行一周所需时间,比如10s, 那么每秒转动度数
      var angle = 360 / 100;
      // 给定相机距离点多少距离飞行,这里取值为5000m
      var distance = 280;
      var startTime = Cesium.JulianDate.fromDate(new Date());
      var stopTime = Cesium.JulianDate.addSeconds(
        startTime,
        10,
        new Cesium.JulianDate()
      );
      cesiumView.clock.startTime = startTime.clone(); // 开始时间
      cesiumView.clock.stopTime = stopTime.clone(); // 结速时间
      cesiumView.clock.currentTime = startTime.clone(); // 当前时间
      cesiumView.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
      cesiumView.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
      // 相机的当前heading
      var initialHeading = cesiumView.camera.heading;
      var Exection = () => {
        // 当前已经过去的时间,单位s
        var delTime = Cesium.JulianDate.secondsDifference(
          cesiumView.clock.currentTime,
          cesiumView.clock.startTime
        );
        var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
        cesiumView.scene.camera.setView({
          destination: Cesium.Cartesian3.fromDegrees(
            cameras.lng,
            cameras.lat,
            1000
          ), // 旋转中心点的坐标
          orientation: {
            heading: heading,
            pitch: pitch,
          },
        });
        cesiumView.scene.camera.moveBackward(distance);
        // 执行需要回调的函数
        // callback();
      };
      cesiumView.clock.onTick.addEventListener(Exection);
      var timeinit=0 //时间累加器
      // 到规定时间后 说明用户没有操作 递归旋转函数
      var timeadd=null
      // 监听全局鼠标移动
      document.querySelector('html').addEventListener("mousemove",()=>{ 
        //监听移除地图旋转事件
        if (cesiumView && Exection) {
          cesiumView.clock.onTick.removeEventListener(Exection);
        }
        //当鼠标移动 清楚定时器 重新计时
        clearInterval(timeadd)
        timeinit=0
        timeadd=setInterval(() => {
        timeinit++;
        if(timeinit>=10){
          this.rotateCamera()
        }
      }, 1000);
      })
    },

罗盘控件

插件链接:https://pan.baidu.com/s/1quR4yRtVUFU2Qozms24hJw
提取码:2jak

引入
    <script src="<%= BASE_URL %>CesiumNavigation/CesiumNavigation.umd.js"></script>
    <link href="<%= BASE_URL %>CesiumNavigation/cesium-navigation.css" rel="stylesheet">



代码使用
 //注册导航栏
      let options = {};
      // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
      options.defaultResetView = {
        destination: Cesium.Cartesian3.fromDegrees(lng, lat, height),
        duration: 1,
        orientation: {
          // 指向
          heading: heading,
          // 视角
          pitch: pitch,
          roll: roll
        }
      };
      // 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
      options.enableCompass = true;
      // 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件将不会添加到地图中。
      options.enableZoomControls = false;
      // 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
      options.enableDistanceLegend = false;
      // 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
      options.enableCompassOuterRing = true;

      CesiumNavigation.umd(viewer, options);
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LBY_XK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值