点击旁边弹出div绝对位置

Question

我正在尝试右键单击导致 div 弹出窗口。但是，点击将在铯 window 内，如果它具有绝对位置，它只会让 div 显示。是否可以用绝对位置编辑 div 的弹出位置？

现在，我的代码如下所示：

var editHandler = newCesium.ScreenSpaceEventHandler(scene.canvas);
editHandlersetInputAction(function(e){
  var shapeEditMenu = document.getElementById("shapeEditMenu");
  shapeEditMenu.style.display = "block";
  shapeEditMenu.style.left = e.clientX;
  shapeEditMenu.style.top = e.clientY;
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

#shapeEditMenu {
  position: absolute;
  display: none:
  top: 80px;
  height: 50px;
  width: 80px;
}

<div id="shapeEditMenu">
  Line thickness:
  <input type="number"> pt
</div>

它在这里不起作用，因为没有铯，但在我的实际代码中发生的是 div 在右键单击时弹出，但总是在相同的位置，而不是在右键点击的地方。

Answer 1

如评论中所述，此处存在一些 API 混乱。 clientX 是浏览器原生 API 的一部分，而不是 Cesium 的 API。由于您使用的是 Cesium 的事件处理系统，因此您可以从中获取事件 API。在这种情况下，您将使用 e.position.x 并在其后使用 + 'px' 来指示样式表的 CSS 像素单位。

还有你这里有几个错别字：

newCesium. 应该是 new Cesium.
editHandlersetInputAction 应该是 editHandler.setInputAction
display: none: 应该是 display: none;

这是一个 live Sandcastle demo，它显示鼠标所在位置的右键单击 "Testing" 菜单。

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

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

editHandler.setInputAction(function(e) {
  var shapeEditMenu = document.getElementById("toolbar");
  shapeEditMenu.textContent = 'Testing';
  shapeEditMenu.style.display = "block";
  shapeEditMenu.style.left = e.position.x + 'px';
  shapeEditMenu.style.top = e.position.y + 'px';
  shapeEditMenu.style.background = 'rgba(42, 42, 42, 0.8)';
  shapeEditMenu.style.border = '1px solid #888';
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

editHandler.setInputAction(function(e) {
  var shapeEditMenu = document.getElementById("toolbar");
  shapeEditMenu.style.display = "none";
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

点击旁边弹出div绝对位置

Pop up div with absolute position next to click

javascript

html

cesium