6

Build Your Google Earth 3D Web App

 1 year ago
source link: https://levelup.gitconnected.com/build-your-google-earth-3d-web-app-390346188e16
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Urban Digital Twins

Build Your Google Earth 3D Web App

Utilizing Photorealistic 3D Tiles and CesiumJS Technology

1*cWZodK4bTr-oRjJUlCOQUQ.png
HFT Stuttgart Campus in 3D web app using Photorealistic 3D Tiles and CesiumJS (by Author)

We are thrilled to see Google’s launch of the Photorealistic 3D Tiles (May 2023), a major breakthrough in the open 3D geospatial world. It’s a truly revolutionary moment with Google’s 3D geospatial datasets now open to everyone to use outside the Google Earth for the first time. The Photorealistic 3D Tiles allows developers to access over 2,500 cities and explore their creativity through the features of the Cesium ecosystem to create web applications via CesiumJS and game-engine applications via Cesium for Game Engine. The Photorealistic 3D Tiles are available to use immediately via the Google Maps API. Moreover, you can also incorporate your own dataset with the Cesium Ion API.

In this article, we will give a tutorial on how to use the Photorealistic 3D Tiles with CesiumJS — creating with just a single HTML script.

1*vnAI0tYUvO-UF92ft_17Ig.png

Let’s get started!

Prerequisites

  • Google Map API key which you can get from here. After creating the API, make sure you enable the Map Tiles API.
1*e7jNKphaRz-_V1YDyELpEw.png
  • CesiumJS API key which you can get from here.

Create an HTML file to load Photorealistic 3D Tiles

After your tokens are ready, you can create an empty index.html file with the following script and then insert your Cesium & Google Maps API Token.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.105.1/Build/Cesium/Widgets/widgets.css"
        rel="stylesheet">
</head>

<body style="margin:0px">
    <div id="cesiumContainer" style="height:100vh;"></div>
    <script>

Cesium.Ion.defaultAccessToken = '<Your CesiumIon Token>';
        Cesium.GoogleMaps.defaultApiKey = '<Your Google Map API Token>';
        // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
        const viewer = new Cesium.Viewer('cesiumContainer', {
            globe: false,
        });
        // add a global layer of Photorealistic 3D Tiles to our scene.
        // Add Photorealistic 3D Tiles
        async function addGoogleP3T() {
            try {
                const tileset = await Cesium.createGooglePhotorealistic3DTileset();
                viewer.scene.primitives.add(tileset);
            } catch (error) {
                console.log(`Error loading Photorealistic 3D Tiles tileset. ${error}`);
            }
        }
        addGoogleP3T();
        // Point the camera at the HFT Stuttgart (Change to yours!)
        viewer.camera.setView({ "destination": { "x": 4157461.4563741013, "y": 671341.0061027076, "z": 4774675.061607998 }, "orientation": { "direction": { "x": -0.9961029219201177, "y": 0.04678777747726383, "z": 0.07476545205468949 }, "up": { "x": 0.08148125542536441, "y": 0.1636911012978059, "z": 0.9831408995511365 } } })
    </script>
    </div>
</body>
</htm!l>

Now, you can easily get it up and running in any web server. In my case, I use the VS Code extension, “Live Server”. All you need to do is one click, and you’re ready to go!

1*r4g8ywgOQQpH3B8xDTaIZA.png
1*G_V6zwCviDQZesIAsF_nfA.png

If you prefer a more traditional approach, you can always use your favorite web server technology, be it Python, NodeJS, Apache, or any other.

And, that’s it. Just wow.

1*Ecwr_Y8EV_2xReCgY2mjtw.gif
HFT Stuttgart Campus in 3D web app using Photorealistic 3D Tiles and CesiumJS (by Author)

Now, it is your turn, Try and Enjoy it yourself 😃

With the possibilities that come with this, I’m eager to see what developers will create. This unlocks a whole world of potential, and I’m sure we’ll soon be seeing some amazing applications built from it.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK