Display 3D Building on the earth with Mapray Cloud

Displays 3D building data uploaded to Mapray Cloud on the earth

display_3d_building_with_mapraycloud.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Display 3D Building on the earth with Mapray Cloud</title>
  <meta property="og:description" content="Displays 3D building data uploaded to Mapray Cloud on the earth " />
  <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
  <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
  <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
  </style>
</head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    async function main() {
        // Set up your Organization Token, which can be created in Mapray Cloud.
        const accessToken = "<YOUR_MAPRAY_ACCESS_TOKEN>";
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", accessToken, {
            dem_provider: new mapray.StandardDemProvider( {
                prefix:  "https://tiles.mapray.com/dem/",
                headers: { Authorization: "Bearer " + accessToken }
            } )
        } );

        const maprayApi = new mapray.cloud.CloudApiV2({
            tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
            token: accessToken
        });

        // Load the geojson with all features.
        const datasetId = "5090888661336064";
        const b3d = await fetchBuildingData( datasetId, accessToken );

        // Load the data using GeoJSONLoader.
        const provider = new mapray.StandardB3dProvider( b3d.url, ".bin", {
            meta_headers: {
                "Authorization": "Bearer " + accessToken,
            },
            tile_headers: {
                "Authorization": "Bearer " + accessToken,
            },
        });
        const b3dScene = uiviewer.viewer.b3d_collection.createScene( provider );

        uiviewer.setCameraPosition({
            longitude: 139.560079,
            latitude: 35.68,
            height: 300
        });

        uiviewer.setLookAtPosition({
            longitude: 139.560079,
            latitude: 35.708047,
            height: 0
        });
    }

    async function fetchBuildingData( datasetID, accessToken ) {
        try {
            const url = "https://api.mapray.com/b3ddatasets/v2/" + datasetID;

            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + accessToken
                }
            });

            if (!response.ok) {
                throw new Error(`response status: ${response.status}`);
            }

            return response.json();
        } catch (error) {
            console.error(error.message);
            throw error;
        }
     }

    main();
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudのアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。