VUE3-Cesium（控制相机运动、加载本地地形切片）

目录

1.控制键盘运动

1.1 移动：viewer.camera.move及相关方法：

 1.2 旋转：viewer.camera.rotate及相关方法​

​1.3 顺/逆时针旋转：viewer.camera.twistLeft/.twistRight​

2.加载本地地形切片

2.1 数据下载

 2.2 DEM数据处理

 2.3 实现代码

---

1.控制键盘运动

设计思路：

获取按键（键盘）所对应的id或值，进行判断，通过viewer.camera提供的方法进行实现。

1.1 移动：viewer.camera.move及相关方法：

 1.2 旋转：viewer.camera.rotate及相关方法

1.3 顺/逆时针旋转：viewer.camera.twistLeft/.twistRight

示例如下：

// 通过键盘移动相机查看视域,w,s,a,d
  document.addEventListener("keydown", function (e) {
    // console.log(e);
    //  获取相机离地面的高度
    var height = viewer.camera.positionCartographic.height;
    // console.log(height);
    // 设置相机移动的比例
    var moveRate = height / 100;
    if (e.key == "a") {
      // A键左移
      viewer.camera.moveLeft(moveRate);
    } else if (e.key == "w") {
      //w键向前移动相机
      // console.log("上");
      //
      viewer.camera.moveForward(moveRate);
    } else if (e.key == "d") {
      // d键右移
      viewer.camera.moveRight(moveRate);
    } else if (e.key == "s") {
      // s键后移动相机
      viewer.camera.moveBackward(moveRate);
    } else if (e.key == "q") {
      // q键向左旋转相机
      // 相机绕地球旋转
      // viewer.camera.rotateLeft(Cesium.Math.toRadians(10));
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key == "e") {
      // 相机绕地球旋转
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
    } else if (e.key == "r") {
      // r键向上旋转相机
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1));
    } else if (e.key == "f") {
      // f键向下旋转相机
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
    } else if (e.key == "z") {
      // z键向上移动相机
      viewer.camera.moveUp(moveRate);
    } else if (e.key == "x") {
      // x键向下移动相机
      viewer.camera.moveDown(moveRate);
    } else if (e.key == "g") {
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key == "h") {
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
    }
  });

2.加载本地地形切片

 地形数据下载网站：地理空间数据云

CesumLab下载地址：Cesium实验室官网

实现流程：可通过地理空间数据云平台下载DEM数据，将DEM数据导入CesiumLab软件中进行三维地形切边，生成三维地形切片数据，通过 new Cesium.CesiumTerrainProvider（{}）进行加载本地地形数据。

2.1 数据下载

进入地理空间数据云官网，注册账号，可以下载免费DEM数字高程模型数据。

 选择某一系列产品数据，输入相应的精度或维度，下载某一区域数据：

 点击侧边信息按钮，可查看所选区域是否符合要求,用户可根据要求进行下载某一区域数据,符合要求后可点击右侧下载按钮进行下载。

 2.2 DEM数据处理

用户将下载后的DEM数据进行解压，下载安装CesiumLab软件，注册登录，选择数据处理-地形切片功能，添加刚才下载好的DEM高程数据，进行切片。

切片后可在CesiumLab中发布该切片服务，以便于数据调用，也可以将切片数据放入项目中，或使用其他数据服务器如tomcat、nginx等进行挂载数据，通过服务器地址进行调用。

 2.3 实现代码

var viewer = new Cesium.Viewer("cesiumContainer", {
    //设置地形
    terrainProvider: new Cesium.CesiumTerrainProvider({
      url: "./terrains/gz",//DEM地形切片数据地址
    }),
  });