【问题标题】:HTML5/Cesium - making divs float over cesium mapHTML5/Cesium - 使 div 漂浮在 cesium 地图上
【发布时间】:2014-06-13 13:16:55
【问题描述】:

我正在使用铯:http://cesiumjs.org/ 我想让一些 div 漂浮在铯地图上,但我无法让它工作。

我在 jsfiddle.net/j08691/dChUR/5/ 尝试了以下容器/标签方法 - 用铯映射 div 替换图像 - 但它似乎不起作用 - “标签” div 没有显示.

有什么帮助吗?

【问题讨论】:

  • 你试过给你的 div 添加一个 z-index 吗?
  • 是的 - 试过了。没用。我认为它是用铯阻挡它的东西。
  • 你能发布一个使用 censium 地图的版本的链接吗?

标签: html cesium


【解决方案1】:

您需要将position: absolute;topbottom 添加到您的CSS,因为小部件也使用绝对定位。添加它会创建一个新的stacking context,它会覆盖z-index

这是一个工作示例,点击底部的“运行代码片段”:

Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;

var viewer = new Cesium.Viewer('cesiumContainer', {
  timeline: false,
  animation: false,
  navigationHelpButton: false
});

var skyAtmosphere = viewer.scene.skyAtmosphere;
var skyCheckbox = document.getElementById('skyCheckbox');

skyCheckbox.addEventListener('change', function() {
  viewer.scene.skyAtmosphere = skyCheckbox.checked ? skyAtmosphere : undefined;
}, false);
html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif; color: #edffff;
}
#controlPanel {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(42, 42, 42, 0.8);
  padding: 5px 8px;
  border-radius: 5px;
}
label {
  cursor: pointer;
}
label:hover span {
  text-decoration: underline;
}
<link href="http://cesiumjs.org/releases/1.15/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.15/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="controlPanel">
  This is a floating control panel<br/>
  with a translucent background color.
  <p>
    <label>
      <input id="skyCheckbox" type="checkbox" checked />
      <span>Enable atmospheric effect</span>
    </label><br/>
    <button class="cesium-button">Button 1</button>
    <button class="cesium-button">Button 2</button>
  </p>
</div>

【讨论】:

    【解决方案2】:

    要添加到emackey 的答案,除了将position: absolute 添加到我的css 之外,我还必须添加top:150pxbottom:150px。基本上任何将指定相对于父容器的位置的东西。

    即使使用绝对位置,它也很可能被 cesium 小部件向下推,因为它占据了 100% 的高度。

    【讨论】:

    • 哦,好点,我将编辑我的答案以添加它。如果没有topbottom,垂直定位是自动的,这意味着它在Cesium 小部件下方而不是覆盖它,可能会从页面底部裁剪掉。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-09-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多