目录
1.1 移动:viewer.camera.move及相关方法:
1.2 旋转:viewer.camera.rotate及相关方法
1.3 顺/逆时针旋转:viewer.camera.twistLeft/.twistRight
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地形切片数据地址
}),
});