Отзывчивые DIVs в CesiumViewer [CesiumJS] - PullRequest
Новая
       15

Отзывчивые DIVs в CesiumViewer [CesiumJS]

0 голосов
/ 13 ноября 2018

Я работаю над настройкой карты Цезия, которая имеет наложение с различной информацией внутри, стиль наложения, который я реализую с помощью bootsrap, к сожалению, элементы div, которые я помещаю, остаются в определенной позиции и игнорируют изменение размерастраница.Есть ли способ сделать 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, который мне нужен для наложения карты, вообще не отображается.Что я делаю не так?

1 Ответ

0 голосов
/ 21 ноября 2018

Я решу проблему, используя Reactjs для представления всех данных.Расширяя это: https://www.npmjs.com/package/cesium-react

...