Cesium.js获取视野边界坐标

本文没有太多需要手写的逻辑,只是对Cesium理解不够深、没有中文文档的情况下,查询起来比较费时,下面就是总结出来的方法。转载需注明出处。

1. 利用屏幕坐标转换

用百度搜索到的大部分雷同的博文(都是抄同一个人的)都是基于这个方法,这个方法适用于屏幕坐标落在球体上的情况,如果屏幕坐标落在球体之外,屏幕坐标转世界坐标会出错算出undefined。以下代码示例引自Super洛伽博客。

// 屏幕坐标转世界坐标
var pick= new Cesium.Cartesian2(window.innerWidth,window.innerHeight);
var cartesian = scene.globe.pick(viewer.camera.getPickRay(pick), scene);

// 世界坐标转地理坐标(弧度)
var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
// 或
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);

//地理坐标(弧度)转经纬度坐标
var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];

2. 利用方法viewer.camera.computeViewRectangle

因为要考虑屏幕点落在球体外的情况,我选择了google…然后找到了这个方法computeViewRectangle:计算视野矩形四条边界的地理坐标(弧度)。
得到的返回值示例:

result = { west: 2.024049072178046, south: 0.6802243852966677, east: 2.025114792449733, north: 0.681132284488564 }

然后通过弧度转经纬度,即可获取视野边界的经纬度坐标。
代码示例如下:

var rectangle = viewer.camera.computeViewRectangle();
// 弧度转为经纬度,west为左(西)侧边界的经度,以下类推
var west =rectangle.west / Math.PI * 180;
var north = rectangle.north / Math.PI * 180;
var east = rectangle.east / Math.PI * 180;
var south = rectangle.south / Math.PI * 180;
// 鉴于高德、leaflet获取的边界都是southwest和northeast字段来表示,本例保持一致性
var bounds = {
    southwest: {
        lng: west,
        lat: south
    },
    northeast: {
        lng: east,
        lat: north
    }
}
return bounds;

这个故事告诉我们善用google…

本文榕树岛原创,转载需注明出处。