顯式聲明“movement”和“movement.endPosition”？

Question

Cesium Sandcastle 演示說明了使用“movement”和“movement.endPosition”來獲取鼠標移動的 Cartesian2 坐標。 一個例子是Sandcastle 中的“采摘”演示：

我是 Javascript 的新手。 到目前為止，隱式聲明和變量提升不是我的菜！

所以我的問題是：基於上面提供的 Picking Sandcastle 演示，為了在鼠標懸停時顯示經度/緯度的相同目的，我可以做什么來明確聲明“movement.endPosition”？ 我對沒有先明確聲明的“運動”對象出現感到不舒服。

我的研究使我找到了 Cesium.CameraEventAggregator 對象，其中包含一個名為“currentMousePosition”的方法。

第 25-27 行來自演示：

    // Mouse over the globe to see the cartographic position
    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function(movement) {
        var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);

我試圖替換“movement.endPosition”如下：

    // Mouse over the globe to see the cartographic position
    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function() {
        var mousePos = Cesium.CameraEventAggregator(scene.canvas); 
        var cartesian = viewer.camera.pickEllipsoid(mousePos.currentMousePosition, scene.globe.ellipsoid);

這導致鼠標懸停時不顯示任何信息。

非常感謝任何幫助，在此先感謝您，為冗長的問題陳述道歉！ 曼尼

Answer 1

ScreenSpaceEventHandler偵聽屏幕空間中發生的事件（即鼠標、觸摸和指針事件）。 當您調用.setInputAction ，您正在分配一個您希望調用以響應這些事件的回調函數。

JavaScript 允許將函數聲明為內聯，這可能是混淆的一部分。 下面，我重構了這個函數，將這個回調分解為一個名為onMouseMove的真實函數。

分解此函數后，可能會更清楚地看到將movement聲明為要傳遞給onMouseMove回調函數的唯一參數。

// Declare entity first.
var entity = viewer.entities.add({
    label : {
        show : false,
        //...
    }
});

// Declare function "onMouseMove" that takes one argument called "movement".
// This could be declared above, but, it makes use of the entity, so for
// code readability it should appear after "entity" is declared.
function onMouseMove(movement) {
    var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
    if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);

        // NOTE: Using "entity" from outer scope here.
        entity.position = cartesian;
        entity.label.show = true;
        entity.label.text = 'Lon: ' + ('   ' + longitudeString).slice(-7) + '\u00B0' + '\nLat: ' + ('   ' + latitudeString).slice(-7) + '\u00B0';
    } else {
        entity.label.show = false;
    }
}

// Construct a ScreenSpaceEventHandler.
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

// Finally, assign function "onMouseMove" as the callback for the event.
handler.setInputAction(onMouseMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

看看最后一行。 如果用整個函數聲明替換該行中的單詞onMouseMove ，則代碼將與 Sandcastle 上的原始代碼相同。

因此， movement是在ScreenSpaceEventHandler內部構造的一個對象，目的是將事件傳遞給回調函數。 在這種特定情況下， movement.endPosition是一個實例Cesium.Cartesian2對象，與x和y表示鼠標移動的屏幕空間中產生的位置值。

viewer.camera.pickEllipsoid(...函數可以采用您希望考慮的任何屏幕位置的任何Cesium.Cartesian2值。例如：

var myCustomScreenLocation = new Cesium.Cartesian2(300, 200);
var cartesian = viewer.camera.pickEllipsoid(myCustomScreenLocation, scene.globe.ellipsoid);

這將選擇距離 Cesium 窗口左側 300 像素、距離頂部 200 像素的位置。

---

編輯：這是另一個演示，展示了如何顯示當前鼠標/觸摸/指針坐標。

var viewer = new Cesium.Viewer('cesiumContainer');
var lastMousePosition;

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(movement) {
    lastMousePosition = movement.endPosition;

    document.getElementById('toolbar').innerHTML =
        'Mouse X: ' + lastMousePosition.x + ' Y: ' + lastMousePosition.y;

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);