在查看cesium文档时,根本找不到对应的获取层级的api,因为在三维区域只能获取到相机的高度,为此通过相机高度计算level层。具体代码去下:
在onUnmounted中定义鼠标事件
const viewer = cesiumGather.cesiumViewer;
const handle3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//监听鼠标滚轮事件
handle3D.setInputAction(() => {
var level = Math.ceil(viewer.camera.positionCartographic.height);
getHeightByLevel(level);
getViewExtend();
}, Cesium.ScreenSpaceEventType.WHEEL);
通过相机高度计算层级
// 获取level层
const getHeightByLevel = (level) => {
var A = 40487.57;
var B = 0.00007096758;
var C = 91610.74;
var D = -40467.74;
console.log(
"获取level层级" + Math.round(D + (A - D) / (1 + Math.pow(level / C, B)))
);
return Math.round(D + (A - D) / (1 + Math.pow(level / C, B)));
};
获取当前屏幕的可视区域的经纬度
// 获取当前屏幕的可视区域的经纬度【2D和3D】
const getViewExtend = () => {
let params = {};
const viewer = cesiumGather.cesiumViewer;
let extend = viewer.camera.computeViewRectangle();
if (typeof extend === "undefined") {
//2D下会可能拾取不到坐标,extend返回undefined,所以做以下转换
let canvas = window.cesiumViewer.scene.canvas;
let upperLeft = new Cesium.Cartesian2(0, 0); //canvas左上角坐标转2d坐标
let lowerRight = new Cesium.Cartesian2(
canvas.clientWidth,
canvas.clientHeight
); //canvas右下角坐标转2d坐标
let ellipsoid = window.cesiumViewer.scene.globe.ellipsoid;
let upperLeft3 = window.cesiumViewer.camera.pickEllipsoid(
upperLeft,
ellipsoid
); //2D转3D世界坐标
let lowerRight3 = window.cesiumViewer.camera.pickEllipsoid(
lowerRight,
ellipsoid
); //2D转3D世界坐标
let upperLeftCartographic =
window.cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
upperLeft3
); //3D世界坐标转弧度
let lowerRightCartographic =
window.cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(
lowerRight3
); //3D世界坐标转弧度
let minx = Cesium.Math.toDegrees(upperLeftCartographic.longitude); //弧度转经纬度
let maxx = Cesium.Math.toDegrees(lowerRightCartographic.longitude); //弧度转经纬度
let miny = Cesium.Math.toDegrees(lowerRightCartographic.latitude); //弧度转经纬度
let maxy = Cesium.Math.toDegrees(upperLeftCartographic.latitude); //弧度转经纬度
params.minx = minx;
params.maxx = maxx;
params.miny = miny;
params.maxy = maxy;
} else {
//3D获取方式
params.maxx = Cesium.Math.toDegrees(extend.east);
params.maxy = Cesium.Math.toDegrees(extend.north);
params.minx = Cesium.Math.toDegrees(extend.west);
params.miny = Cesium.Math.toDegrees(extend.south);
}
console.log(params, "---------------ssss-----");
return params; //返回屏幕所在经纬度范围
};