Spaces:
Sleeping
Sleeping
Added cesium app
Browse files- app.py +3 -1
- apps/cesium.py +8 -0
- data/html/sfo_buildings.html +34 -0
app.py
CHANGED
|
@@ -3,6 +3,7 @@ from multiapp import MultiApp
|
|
| 3 |
from apps import (
|
| 4 |
basemaps,
|
| 5 |
census,
|
|
|
|
| 6 |
deck,
|
| 7 |
device_loc,
|
| 8 |
gee,
|
|
@@ -35,7 +36,8 @@ apps.add_app("Heatmaps", heatmap.app)
|
|
| 35 |
apps.add_app("Add Web Map Service (WMS)", wms.app)
|
| 36 |
apps.add_app("Google Earth Engine (GEE)", gee.app)
|
| 37 |
apps.add_app("Awesome GEE Community Datasets", gee_datasets.app)
|
| 38 |
-
apps.add_app("
|
|
|
|
| 39 |
|
| 40 |
# The main app
|
| 41 |
apps.run()
|
|
|
|
| 3 |
from apps import (
|
| 4 |
basemaps,
|
| 5 |
census,
|
| 6 |
+
cesium,
|
| 7 |
deck,
|
| 8 |
device_loc,
|
| 9 |
gee,
|
|
|
|
| 36 |
apps.add_app("Add Web Map Service (WMS)", wms.app)
|
| 37 |
apps.add_app("Google Earth Engine (GEE)", gee.app)
|
| 38 |
apps.add_app("Awesome GEE Community Datasets", gee_datasets.app)
|
| 39 |
+
apps.add_app("Geolocation", device_loc.app)
|
| 40 |
+
apps.add_app("Cesium 3D Map", cesium.app)
|
| 41 |
|
| 42 |
# The main app
|
| 43 |
apps.run()
|
apps/cesium.py
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import leafmap
|
| 2 |
+
import streamlit as st
|
| 3 |
+
|
| 4 |
+
|
| 5 |
+
def app():
|
| 6 |
+
st.title("Cesium 3D Map")
|
| 7 |
+
html = "data/html/sfo_buildings.html"
|
| 8 |
+
leafmap.cesium_to_streamlit(html, height=800)
|
data/html/sfo_buildings.html
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8">
|
| 5 |
+
<!-- Include the CesiumJS JavaScript and CSS files -->
|
| 6 |
+
<script src="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Cesium.js"></script>
|
| 7 |
+
<link href="https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div id="cesiumContainer"></div>
|
| 11 |
+
<script>
|
| 12 |
+
// Your access token can be found at: https://cesium.com/ion/tokens.
|
| 13 |
+
// Replace `your_access_token` with your Cesium ion access token.
|
| 14 |
+
|
| 15 |
+
Cesium.Ion.defaultAccessToken = 'your_access_token';
|
| 16 |
+
|
| 17 |
+
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
|
| 18 |
+
const viewer = new Cesium.Viewer('cesiumContainer', {
|
| 19 |
+
terrainProvider: Cesium.createWorldTerrain()
|
| 20 |
+
});
|
| 21 |
+
// Add Cesium OSM Buildings, a global 3D buildings layer.
|
| 22 |
+
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
|
| 23 |
+
// Fly the camera to San Francisco at the given longitude, latitude, and height.
|
| 24 |
+
viewer.camera.flyTo({
|
| 25 |
+
destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
|
| 26 |
+
orientation : {
|
| 27 |
+
heading : Cesium.Math.toRadians(0.0),
|
| 28 |
+
pitch : Cesium.Math.toRadians(-15.0),
|
| 29 |
+
}
|
| 30 |
+
});
|
| 31 |
+
</script>
|
| 32 |
+
</div>
|
| 33 |
+
</body>
|
| 34 |
+
</html>
|