Изменить размер программы просмотра Cesium
В настоящее время разрабатывается веб-приложение с использованием Cesium и Bootstrap.
Проблема в том, что размер программы просмотра Cesium нельзя изменить. Единственное решение, которое я нашел, чтобы ограничить его до 50% окна, - это overflow: hidden; в css. Вы поймете, что это может привести к ненужному использованию ресурсов, потому что мы делаем простую кеш-ошибку.
Есть какой-нибудь ключ к изменению размера программы просмотра Cesium?
var cesiumContainer = document.getElementById("cesiumContainer");
var ellipsoid = Cesium.Ellipsoid.WGS84;
var viewer = new Cesium.Viewer("cesiumContainer", {
sceneMode: Cesium.SceneMode.SCENE3D,
infoBox: false,
geocoder: false,
timeline: false,
animation: false,
homeButton: false,
scene3DOnly: true,
baseLayerPicker: false,
sceneModePicker: false,
fullscreenButton: false,
projectionPicker: false,
selectionIndicator: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false
});html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" href = "http://cesiumjs.org/releases/1.11/Build/Cesium/Widgets/widgets.css">
<script src = "http://cesiumjs.org/releases/1.11/Build/Cesium/Cesium.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>
</head>
<body>
<div class = "container-fluid">
<div id = "cesiumContainer"></div>
<div class = "col">
This must take 50% of height.
</div>
</div>
</body>
</html>Или вы можете поместить его в старые HTML-таблицы, у них все еще есть старые добрые параметры размера. Но на самом деле современный CSS должен уметь делать все, что нужно, я думаю, я не понимаю, что здесь нужно.
На самом деле, у программы просмотра Cesium есть фиксированное соотношение высоты / ширины. Так как сначала требуется разделенная ширина, он не соблюдает условие 50% высоты. Мне нужно переполнить: скрыть холст, чтобы ограничить его, но это не жизнеспособное решение, imo.
Поскольку скрытая команда будет скрывать части сложных 3D-моделей, проблема в том, что это может привести к чрезмерному использованию ресурсов ...
Это очень странно. У глобуса не должно быть фиксированного соотношения высоты и ширины. Можете ли вы выложить где-нибудь полный рабочий образец?
@emackey Я отредактировал вопрос рабочим сниппетом.
Ответы 1
Адаптивные DIV в CesiumViewer [CesiumJS]
Как я уже сказал здесь, где у меня очень похожая проблема, с помощью reactjs вы можете использовать цезий в качестве компонента реакции и визуализировать карту цезия и ее размер в зависимости от размера браузера.
Проблема в том, что я хочу делать цезий не полностью, а частично. Более того, ваш ответ лишь указывает на другой вопрос, на который не удалось ответить.
извините за непонятность enogh, чтобы иметь частичное окно со средством просмотра цезия, я решил использовать react js внутри моего приложения, таким образом я смог указать не только размер, который я хочу, но и я смог обмениваться данными с компонентом цезия намного проще
Меня смущает ваше упоминание «без изменения размера», когда вы изменяете его размер до 50% здесь, в своем вопросе. Вы имеете в виду, что он не будет автоматически изменяться? Это правда, но вы можете использовать внешнюю конструкцию, такую как Flex Box, для управления таким автоматическим изменением размера.