I add zoom control button set to fixed height values: 10km, 100km, 500km, 1000km, 2500km, 25000km.
1) Is there a way to make the (zoom) transition between fixed heights more fluid?
2) Why can not I scroll over cesium globe? Is there a way to solve this issue to scroll all page, over the globe too?
(Note: in my js I add this line of code
viewer.scene.screenSpaceCameraController.enableZoom = false;
to prevent zoom in cesium iframe when I use mouse wheel to scroll up and down.)
3) I use a KML file to add markers on globe. These markers are grouped in some different folder (<folder> kml tag). Is there a way to create a html structure like this (see below) to select (with checkbox) different folders?
<div>
<ul>
<li>
<input type="checkbox"><label>title folder 1</label>
</li>
<li>
<input type="checkbox"><label>title folder 2</label>
</li>
<li>
<input type="checkbox"><label>title folder 3</label>
</li>
</ul>
</div>
This is my example page
https://quilled-collision.glitch.me/
Many thanks,
Andrea
This is my js code (of the original globe map page contained into my iframe):
var rectangle = Cesium.Rectangle.fromDegrees(-20, 75, 40, 15)
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = rectangle;
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,
timeline: false,
geocoder: false
});
viewer.scene.screenSpaceCameraController.enableZoom = false;
var cartographic = new Cesium.Cartographic();
var cartesian = new Cesium.Cartesian3();
var camera = viewer.scene.camera;
var ellipsoid = viewer.scene.mapProjection.ellipsoid;
var toolbar = document.getElementById('toolbar');
toolbar.innerHTML = '<div id="hud"></div>' +
'<button type="button" class="cesium-button" id="h1km">1km height</button></br>' +
'<button type="button" class="cesium-button" id="h2km">2km height</button></br>' +
'<button type="button" class="cesium-button" id="h10km">10km height</button></br>' +
'<button type="button" class="cesium-button" id="h100km">100km height</button></br>' +
'<button type="button" class="cesium-button" id="h500km">500km height</button></br>' +
'<button type="button" class="cesium-button" id="h1000km">1000km height</button></br>' +
'<button type="button" class="cesium-button" id="h2500km">2500km height</button></br>' +
'<button type="button" class="cesium-button" id="h25000km">25000km height</button>';
toolbar.setAttribute('style', 'background: rgba(42,42,42,0.9); border-radius: 5px;');
var hud = document.getElementById('hud');
viewer.clock.onTick.addEventListener(function(clock) {
ellipsoid.cartesianToCartographic(camera.positionWC, cartographic);
hud.innerHTML =
'Lon: ' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(3) + ' deg<br/>' +
'Lat: ' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(3) + ' deg<br/>' +
'Alt: ' + (cartographic.height * 0.001).toFixed(1) + ' km';
});
function setHeightKm(heightInKilometers) {
ellipsoid.cartesianToCartographic(camera.position, cartographic);
cartographic.height = heightInKilometers * 1000; // convert to meters
ellipsoid.cartographicToCartesian(cartographic, cartesian);
camera.position = cartesian;
}
document.getElementById('h1km').addEventListener('click', function() {
setHeightKm(1);
}, false);
document.getElementById('h2km').addEventListener('click', function() {
setHeightKm(2);
}, false);
document.getElementById('h10km').addEventListener('click', function() {
setHeightKm(10);
}, false);
document.getElementById('h100km').addEventListener('click', function() {
setHeightKm(100);
}, false);
document.getElementById('h500km').addEventListener('click', function() {
setHeightKm(500);
}, false);
document.getElementById('h1000km').addEventListener('click', function() {
setHeightKm(1000);
}, false);
document.getElementById('h2500km').addEventListener('click', function() {
setHeightKm(2500);
}, false);
document.getElementById('h25000km').addEventListener('click', function() {
setHeightKm(25000);
}, false);
viewer.dataSources.add(Cesium.KmlDataSource.load(‘https://cdn.glitch.com/465e4861-b3fc-4dfd-ab9d-61c71b9ec3be%2Frete-commerciale.kml?1550702366054’,
{
camera: viewer.scene.camera,
canvas: viewer.scene.canvas
})
);
viewer.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-20, 75, 40, 15)
});