DEM Layer¶

0.10.0

Mapray JS はベース地形を Mapray Cloud から取得して表示します。それ以外に Mapray Cloud にアップロードされた DEM をレイヤーとして重ねて表示することができます。

DEM データとは¶

DEM は数値標高モデルと呼ばれ、地表面を等間隔に区切り、それぞれの高さ数値を持たせたデータです。 Mapray Cloud で DEM データを作成するためには GeoTIFF ファイルをアップロードします。

GeoTIFF ファイルの条件¶

座標系¶

WGS84 (EPSG: 4326) のみ対応しています。

データタイプ¶

Float32 のみ対応しています。

Warning

この値はジオイド高を含まない標高値である必要があります。お持ちのデータがジオイド高を含んでいる（楕円体高）場合は、事前にジオイド高を引いておく必要があります。

RasterType¶

GeoTIFF ファイルに省略可能なプロパティ GTRasterTypeGeoKey が指定されている場合は Area である必要があります。

nodata¶

GeoTIFF の nodata 部分は除外され、透過のように扱われます。

Mapray Cloud へのアップロード¶

詳細は Mapray Cloud ドキュメントを参照してください。

サンプルコード¶

Mapray Cloud の DEM データを表示するサンプルです。見やすいようにワイヤフレーム表示にしています。

Mapray Cloud からデータを取得するには CloudApiV2 を利用します。 CloudApiV2 の getDemDatasetAsResource に利用したいデータセットの ID を指定することで、 Mapray Cloud を利用するためのリソースが取得できます。このリソースを StandardDemProvider のコンストラクタに指定することで、データプロバイダが作成されます。作成した Provider を Viewer の dem_layers に add することで表示されます。 dem_layers の実態は DemLayerCollection であり、各レイヤー（DemLayer）の取得や削除も行えます。 DemLayer では、 visibility により表示非表示の切り替えが可能です。

<!DOCTYPE html>
<html>
    <head>
        <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() {
           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.
        var uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
            dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() )
        } );

        // Change rendermode to wire frame.
        uiviewer.viewer.render_mode = mapray.Viewer.RenderMode.WIREFRAME;

        // Set up your dataset id, which can be created in Mapray Cloud.
        const datasetId = "5162077542940672";
        const resource = cloudApi.getDemDatasetAsResource( datasetId );

        const provider = new mapray.StandardDemProvider( resource );
        const dem = await uiviewer.viewer.dem_layers.add( provider );

        const bounds = dem.getBounds();
        uiviewer.startFlyCamera( {
            time: 3.0,
            iscs_end: bounds.getCenter(),
            end_altitude: 150,
            end_from_lookat: 300,
        });
    }

    main();
</script>

Info

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

Info

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