CesiumViewer 中的响应式 DIV [CesiumJS]
Responsive DIVs in CesiumViewer [CesiumJS]
我正在定制一个 Cesium 地图,它有一个叠加层,里面有各种信息,我正在使用 bootsrap 实现的叠加层样式,不幸的是,我放置的 divs 仍然在具体位置并忽略页面的大小调整。有没有办法让添加到铯查看器的 DIV 响应?
我现在做的是
var position = Cesium.Cartesian3.fromDegrees(-76.59777, 39.03883);
var scratch = new Cesium.Cartesian2();
var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);
viewer.scene.preRender.addEventListener(function () {
if (Cesium.defined(canvasPosition)) {
htmlOverlayBoxInfo.style.left = '600px';
htmlOverlayBoxInfo.style.top = '180px';
}
});
<div id="box-info" style="position: absolute" class="circles push-50 visibility">
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn">
<span class="circle circle-0"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="100">
<span class="circle circle-1"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="200">
<span class="circle circle-2"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="300">
<span class="circle circle-3"></span>
</div>
<div class="visibility-hidden " data-toggle="appear" data-class="animated fadeIn" data-timeout="400">
<span class="circle circle-4"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="500">
<span class="circle circle-5"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="600">
<span class="circle circle-6"></span>
</div>
<span class="circle circles-main-content visibility-hidden" data-toggle="appear"
data-class="animated fadeIn" data-timeout="100">
<h4>
New </h4>
</span>
</div>
我被迫放[style="position: absolute"] 否则我需要覆盖地图的div根本不显示。我做错了什么?
我将使用Reactjs 来解决所有数据呈现问题。扩展这个:
https://www.npmjs.com/package/cesium-react
我正在定制一个 Cesium 地图,它有一个叠加层,里面有各种信息,我正在使用 bootsrap 实现的叠加层样式,不幸的是,我放置的 divs 仍然在具体位置并忽略页面的大小调整。有没有办法让添加到铯查看器的 DIV 响应?
我现在做的是
var position = Cesium.Cartesian3.fromDegrees(-76.59777, 39.03883);
var scratch = new Cesium.Cartesian2();
var canvasPosition = viewer.scene.cartesianToCanvasCoordinates(position, scratch);
viewer.scene.preRender.addEventListener(function () {
if (Cesium.defined(canvasPosition)) {
htmlOverlayBoxInfo.style.left = '600px';
htmlOverlayBoxInfo.style.top = '180px';
}
});
<div id="box-info" style="position: absolute" class="circles push-50 visibility">
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn">
<span class="circle circle-0"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="100">
<span class="circle circle-1"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="200">
<span class="circle circle-2"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="300">
<span class="circle circle-3"></span>
</div>
<div class="visibility-hidden " data-toggle="appear" data-class="animated fadeIn" data-timeout="400">
<span class="circle circle-4"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="500">
<span class="circle circle-5"></span>
</div>
<div class="visibility-hidden" data-toggle="appear" data-class="animated fadeIn" data-timeout="600">
<span class="circle circle-6"></span>
</div>
<span class="circle circles-main-content visibility-hidden" data-toggle="appear"
data-class="animated fadeIn" data-timeout="100">
<h4>
New </h4>
</span>
</div>
我被迫放[style="position: absolute"] 否则我需要覆盖地图的div根本不显示。我做错了什么?
我将使用Reactjs 来解决所有数据呈现问题。扩展这个: https://www.npmjs.com/package/cesium-react