Building¶

Mapray JS は Mapray Cloud へアップロードした Building データを表示することができます。

Mapray Cloud へのアップロード¶

サンプルコード¶

Mapray Cloud からデータを取得するには CloudApiV2 を利用します。バージョンによってサポートされているAPIの違いにより取得方法が違いますので、 0.9.6と最新バージョンの２つで説明をします。

Info

Mapray JSには提供方法で複数のバージョンがあります。 Latest VersionではAccess Tokenを簡単に利用できるAPIを準備しているため、そちらのAPIの利用をおすすめしていますので、 Local Latest Versionにサンプルを掲載します。

バージョン	提供方法	アクセス方法	備考
0.9.6	CDN / npm packages	API Key	実装がシンプルなため、本ドキュメントでは主にこの形で説明
0.10.x以上	ローカル配布（利用は要問い合わせ） / Github packages	Access Token	APIにより簡単かつセキュアに利用可能。ローカル配布版で説明を行うが、package版でも利用可能

Local Latest Version CDN 0.9.6

CloudApiV2 の getB3dDatasetAsResource に利用したいデータセットの ID を指定することで、 Mapray Cloud を利用するためのリソースが取得できます。

このリソースを StandardB3dProvider のコンストラクタに指定することで、データプロバイダが作成され、それを Viewer の b3d_collection.createScene に指定することで、Building が表示されます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="./v0.10.0/mapray.min.js"></script>
        <script src="./v0.10.0/maprayui.min.js"></script>
        <link rel="stylesheet" href="./v0.10.0/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

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

<script>
    async function main() {
        // Set up your access token, which can be created in Mapray Cloud.
        const cloudApi = new mapray.cloud.CloudApiV2({
            tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
            token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
            });
             // The StandardUIView in the ui package includes mouse-based camera manipulation.
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", { 
            dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
        } );

        await uiviewer.viewer.init_promise;

        // Load the geojson with all features.
        const datasetId = "5090888661336064";
        const resource = cloudApi.getB3dDatasetAsResource( datasetId );

        // Load the data using GeoJSONLoader.
        const provider = new mapray.StandardB3dProvider( resource );
        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
        });
    }
    main();
</script>

Info

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

Info

datasetIdは、あなたがアップロードしたデータセットのIDに置き換えて下さい。

Web API、Mapray Cloud APIを呼び出すことで、建物データをMapray Cloudから取得することができます。まず、建物データのDatasetの情報を取得し、その情報の中に、実データへのURLが記載されているので、それをStandardB3dProviderに入力します。するとデータプロバイダが作成され、それを Viewer の b3d_collection.createScene に指定することで、Building が表示されます。

<!DOCTYPE html>
<html>
    <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 apikey, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

        // Wait for the initialization process to complete.
        await uiviewer.viewer.init_promise;

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

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

        // Load the data using GeoJSONLoader.
        const provider = new mapray.StandardB3dProvider( b3d.url, ".bin", {
            meta_headers: {
                "X-API-Key": apikey,
            },
            tile_headers: {
                "X-API-Key": apikey,
            },
        });
        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, apikey) {
        try {
            const url = "https://api.mapray.com/b3ddatasets/v2/" + datasetID;

            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'X-Api-Key': apikey
                }
            });

            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_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。

Note

datasetId にアップロードしたデータセットの ID を指定します。

Building 表示の変更¶

LOD の変更¶

b3d_collection.createScene で生成される B3dScene に対して、 LOD を指定することができます。 LOD の値は、小さいと表示の詳細度が高くなり、大きいと低くなります。デフォルト値は 2.0 となっています。

b3dScene.setLodFactor( 1.0 );