為了方便看到鼠標所指向的經(jīng)緯度、高度、方向等信息，需要在地圖界面上添加對應(yīng)信息的顯示，效果如下所示，在地圖的底部有一個黑色的狀態(tài)欄顯示對應(yīng)的經(jīng)緯度,海撥,方向,俯仰角,幀速等信息：平臺還在努力開發(fā)中，可以先預(yù)覽下效果。cgis

詳細信息

1.添加鼠標MOUSE_MOVE事件

在cesium中，添加鼠標事件，都是使用ScreenSpaceEventHandler這個類，該類主要是用于處理用戶輸入事件，首先進行實例化，然后再調(diào)用setInputAction函數(shù)來添加相應(yīng)的事件，如下所示：

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

通過endPosition來獲取當前點的坐標。

2.獲取經(jīng)緯度和高度

主要是通過指定的橢球或者地圖對應(yīng)的坐標系，將鼠標的二維坐標轉(zhuǎn)換為對應(yīng)橢球體三維坐標，然后再將弧度轉(zhuǎn)為度的十進制度表示。如下所示：

      //得到當前三維場景的橢球體
        var ellipsoid = this.scene.globe.ellipsoid;
        var viewer = this.scene;
        var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        if (cartesian) {
            //將笛卡爾坐標轉(zhuǎn)換為地理坐標
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            //將弧度轉(zhuǎn)為度的十進制度表示
            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.獲取幀速

在源碼中已經(jīng)有了獲取幀速的相關(guān)代碼，通過如下方式可以開啟：

viewer.scene.debugShowFramesPerSecond = true;

但為了統(tǒng)一UI，就不用系統(tǒng)自帶的樣式了，而是復(fù)用里面的代碼。代碼在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函數(shù)中調(diào)用改造后的函數(shù)。

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