显式声明 "movement" 和 "movement.endPosition"？

Question

Cesium Sandcastle 演示说明了使用 "movement" 和 "movement.endPosition" 来获取鼠标移动的 Cartesian2 坐标。一个例子是 "Picking" demo in Sandcastle:

我是 Javascript 的新手。到目前为止，隐式声明和变量提升不是我的菜！

所以我的问题是：基于上面提供的 Picking Sandcastle 演示，为了在鼠标悬停时显示 longitude/latitude 的相同目的，我可以做什么来显式声明 "movement.endPosition"？我不喜欢 "movement" 对象在没有首先明确声明的情况下出现。

我的研究使我找到了 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 侦听屏幕中发生的事件-space（即鼠标、触摸和指针事件）。当您调用 .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 值表示鼠标移动在屏幕中的结果位置 space。

viewer.camera.pickEllipsoid(... 函数可以采用您要考虑的任何屏幕位置的任何 Cesium.Cartesian2 值。例如：

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

这会选择距离左侧 300 像素、距离 Cesium 顶部 200 像素的位置 window。

编辑：another demo 显示了如何显示当前 mouse/touch/pointer 坐标。

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);

显式声明 "movement" 和 "movement.endPosition"？

Explicitly declare "movement" and "movement.endPosition"?

javascript

cesium