Question

我正在尝试右键单击导致div弹出。但是，单击将在铯窗口内，该窗口仅允许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，它显示在鼠标位置上单击鼠标右键的“测试”菜单。

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，然后单击

1 个答案: