|
|
@@ -0,0 +1,52 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <!-- Include the CesiumJS JavaScript and CSS files -->
|
|
|
+ <script src="./js/Cesium.js"></script>
|
|
|
+ <link href="./js/widgets.css" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ #cesiumContainer {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ .cesium-viewer-toolbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="cesiumContainer"></div>
|
|
|
+ <script type="module">
|
|
|
+ // https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets
|
|
|
+ // Your access token can be found at: https://ion.cesium.com/tokens.
|
|
|
+ // Replace `your_access_token` with your Cesium ion access token.
|
|
|
+
|
|
|
+ Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxOGJlY2NkYy04NGZiLTQ2MzYtYWJmZi0xNzNlNDk0N2Q2YjAiLCJpZCI6MjUyOTI2LCJpYXQiOjE3MzA3ODY3MTN9.GiCzHsI5RCIWSPp5aiI7mvsu0emeCtjrTNOpwyIK7zw';
|
|
|
+
|
|
|
+ // window.CESIUM_BASE_URL = 'https://sandcastle.cesium.com/CesiumUnminified/';
|
|
|
+ // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
|
|
|
+ const viewer = new Cesium.Viewer('cesiumContainer', {
|
|
|
+ terrain: Cesium.Terrain.fromWorldTerrain(),
|
|
|
+ vrButton:true
|
|
|
+ });
|
|
|
+
|
|
|
+// Fly the camera to Denver, Colorado at the given longitude, latitude, and height.
|
|
|
+viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000)
|
|
|
+});
|
|
|
+
|
|
|
+// Add Cesium OSM Buildings.
|
|
|
+const buildingsTileset = await Cesium.createOsmBuildingsAsync();
|
|
|
+viewer.scene.primitives.add(buildingsTileset);
|
|
|
+ </script>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+</html>
|
