Spaces:
Sleeping
Sleeping
File size: 5,626 Bytes
c294196 ab9815e daa3184 7c2bb42 daa3184 ab9815e daa3184 7c2bb42 ab9815e daa3184 ab9815e 6154d79 ab9815e 7c2bb42 daa3184 7c2bb42 daa3184 7c2bb42 ab9815e 37e0c6d ab9815e c294196 daa3184 6154d79 daa3184 c294196 ab9815e 7c2bb42 37e0c6d 7c2bb42 c294196 7c2bb42 37e0c6d 7c2bb42 37e0c6d ca8b54c 6154d79 ab9815e 7c2bb42 8e04eab 7c2bb42 6154d79 7c2bb42 6154d79 7c2bb42 6154d79 2799b4c 7c2bb42 c294196 37e0c6d 7c2bb42 37e0c6d 6154d79 7c2bb42 c294196 7c2bb42 c294196 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Globe with Sea Level</title>
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Cesium.js"></script>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #1a1a1a;
}
#cesiumContainer {
width: 100%;
height: 80vh;
position: relative;
border: 2px solid #444;
}
#sliderContainer {
position: absolute;
top: 10px;
right: 150px;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#seaLevelSlider {
width: 200px;
cursor: pointer;
}
#seaLevelLabel {
font-size: 14px;
margin-top: 10px;
color: #333;
}
.cesium-viewer-toolbar {
display: block !important;
right: 10px;
top: 10px;
}
.cesium-viewer-navigationContainer {
display: block !important;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="sliderContainer">
<input type="range" id="seaLevelSlider" min="0" max="100" value="0" step="1">
<div id="seaLevelLabel">Sea Level: 0m</div>
</div>
<script>
// Set Cesium token from Flask template variable
Cesium.Ion.defaultAccessToken = "{{ cesium_token | safe }}";
// Async function to initialize Cesium Viewer
async function initializeViewer() {
try {
// Load Cesium World Terrain
const terrainProvider = await Cesium.createWorldTerrainAsync({
requestWaterMask: true,
requestVertexNormals: true
});
// Initialize Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: terrainProvider,
baseLayerPicker: false,
geocoder: false,
animation: false,
timeline: false,
sceneModePicker: true,
navigationHelpButton: true,
fullscreenButton: true
});
// Add a semi-transparent water plane
const waterPlane = viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
-180, -90,
180, -90,
180, 90,
-180, 90
]),
height: 0, // Start at current sea level (0m)
material: Cesium.Color.BLUE, //.withAlpha(0.7), // Increased opacity for visibility
outline: true,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2
}
});
// Ensure terrain depth testing is enabled
viewer.scene.globe.depthTestAgainstTerrain = true;
// Slider interaction
const slider = document.getElementById('seaLevelSlider');
const label = document.getElementById('seaLevelLabel');
slider.addEventListener('input', function() {
const seaLevel = parseFloat(slider.value);
// Update water plane height using a Property
waterPlane.polygon.height = new Cesium.ConstantProperty(seaLevel);
// Update label
label.textContent = `Sea Level: ${seaLevel}m`;
// Debug: Log the sea level to confirm updates
console.log(`Sea Level updated to: ${seaLevel}m`);
console.log(waterPlane.polygon.height.getValue())
});
// Set initial view (global view)
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(0, 0, 10000000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90)
}
});
// Zoom to a specific area to make sea level rise more noticeable (e.g., low-lying coastal area)
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-80, 25, 50000), // Near Florida, a low-lying area
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-45)
},
duration: 3
});
} catch (error) {
console.error('Failed to initialize viewer:', error);
document.getElementById('cesiumContainer').innerHTML =
'<div style="color: red; text-align: center; padding: 20px;">Error loading terrain. Please check CESIUM_TOKEN and try again.</div>';
}
}
// Call the async initialization function
initializeViewer();
</script>
</body>
</html> |