Cesium显示经纬度,海拨,方向,俯仰角,帧速等信息

为了方便看到鼠标所指向的经纬度、高度、方向等信息，需要在地图界面上添加对应信息的显示，效果如下所示，在地图的底部有一个黑色的状态栏显示对应的经纬度,海拨,方向,俯仰角,帧速等信息：平台还在努力开发中，可以先预览下效果。cgis

详细信息

1.添加鼠标MOUSE_MOVE事件

在cesium中，添加鼠标事件，都是使用ScreenSpaceEventHandler这个类，该类主要是用于处理用户输入事件，首先进行实例化，然后再调用setInputAction函数来添加相应的事件，如下所示：

var handler =new Cesium.ScreenSpaceEventHandler(scene.canvas);
        const mouseOverHandler = function(movement){
            let endPosition = movement.endPosition;
        }
        handler.setInputAction(mouseOverHandler, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

通过endPosition来获取当前点的坐标。

2.获取经纬度和高度

主要是通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标，然后再将弧度转为度的十进制度表示。如下所示：

      //得到当前三维场景的椭球体
        var ellipsoid = this.scene.globe.ellipsoid;
        var viewer = this.scene;
        var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        if (cartesian) {
            //将笛卡尔坐标转换为地理坐标
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            //将弧度转为度的十进制度表示
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            //获取高度
            var height = Math.ceil(viewer.camera.positionCartographic.height);
        }

3.获取方向和俯仰角

获取方向和俯仰角主要是获取camera中pitch和heading的值。

//俯仰角
var pitch = Number(_scene.camera.pitch).toFixed(2);
//方向
 var heading =  Number(_scene.camera.heading).toFixed(2);

4.获取帧速

在源码中已经有了获取帧速的相关代码，通过如下方式可以开启：

viewer.scene.debugShowFramesPerSecond = true;

但为了统一UI，就不用系统自带的样式了，而是复用里面的代码。代码在Cesium/Source/Scene/PerformanceDisplay.js中的update中，通过改造后如下所示：

const updateFrame = ()=>{
                let _fpsFrameCount = 0,
                    _lastFpsSampleTime = 0,
                    _msFrameCount = 0,
                    _lastMsSampleTime = 0;
                _scene.updateFrame = (renderedThisFrame) => {
                    var time = Date.now();
                    var updateDisplay = renderedThisFrame;
                    _fpsFrameCount++;
                    var fpsElapsedTime = time - _lastFpsSampleTime;
                    if (fpsElapsedTime > 1000) {
                        var fps = "N/A";
                        if (updateDisplay) {
                            fps = ((_fpsFrameCount * 1000) / fpsElapsedTime) | 0;
                        }
                        data.fps = fps;
                        _lastFpsSampleTime = time;
                        _fpsFrameCount = 0;
                    }
                    _msFrameCount++;
                    var msElapsedTime = time - _lastMsSampleTime;
                    if (msElapsedTime > 200) {
                        var ms = "N/A";
                        if (updateDisplay) {
                            ms = (msElapsedTime / _msFrameCount).toFixed(2);
                        }
                        data.ms = ms;
                        _lastMsSampleTime = time;
                        _msFrameCount = 0;
                    }
                }
            }

然后在Cesium/Source/Scene/Scene.js中的updateDebugShowFramesPerSecond函数中调用改造后的函数。

function updateDebugShowFramesPerSecond(scene, renderedThisFrame) {
  if(scene.updateFrame){
      scene.updateFrame(renderedThisFrame)
  }