gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:06:09 26 4
gpt4 key购买 nike

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

这导致鼠标悬停时不显示任何信息。

非常感谢任何帮助,在此先感谢您,对于冗长的问题陈述深表歉意!曼尼

最佳答案

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.endPositionCesium.Cartesian2 对象的实例,具有 xy表示鼠标移动在屏幕空间中的结果位置的值。

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

关于javascript - 显式声明 "movement"和 "movement.endPosition"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58970034/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com