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

Question

Cesium SandcaSTLe demo说明了使用“movement”和“movement.endPosition”来获取 鼠标移动的 Cartesian2 坐标。一个例子是 "Picking" demo in 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);

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

---

编辑:这里是 another demo显示如何显示当前鼠标/触摸/指针坐标。

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