HTML5/Cesium - создание плавающих элементов div над картой цезия

Я использую цезий: http://cesiumjs.org/, и я хотел, чтобы некоторые элементы div плавали по карте цезия, но я не могу заставить его работать.

Я попробовал следующий метод контейнера/тега на jsfiddle.net/j08691/dChUR/5/ - заменив изображение на div карты цезия, но это, похоже, не работает - div "tag" не отображается.

Любая помощь?


html cesium
person user967710    schedule 13.06.2014    source источник
comment
Вы пытались добавить z-индекс в свои div?   -  person Leon    schedule 13.06.2014
comment
Да - пробовал. Не работает. Я думаю, это что-то с цезием, который его блокирует.   -  person user967710    schedule 13.06.2014
comment
Не могли бы вы опубликовать ссылку с версией, использующей карту censium?   -  person Leon    schedule 13.06.2014

Ответы (2)


arrow_upward
2
arrow_downward

Вам нужно добавить position: absolute; и либо top, либо bottom в свой CSS, потому что виджет также использует абсолютное позиционирование. Добавление этого создает новый контекст стека, который переопределяет 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>

person emackey    schedule 13.06.2014

arrow_upward
3
arrow_downward

Чтобы добавить к ответу emackey, в дополнение к добавлению position: absolute в мой css мне нужно было добавить top:150px или bottom:150px. В основном все, что будет указывать позицию относительно родительского контейнера.

Несмотря на то, что используется абсолютное положение, виджет цезия, скорее всего, толкает его вниз, поскольку он занимает 100% высоты.

person Brian Olsen    schedule 19.08.2015
comment
О, хорошо, я отредактирую свой ответ, чтобы добавить это. Без top или bottom вертикальное позиционирование выполняется автоматически, что означает, что оно находится ниже виджета Cesium, а не накладывается на него, возможно, обрезано внизу страницы. - person emackey; 11.01.2016