コンテンツにスキップ

Flat DEM Provider

DEM データは地表面の高さ値を持ちますが、 FlatDemProvider を使用するとすべて 高さ0 として平坦な地表を表現できます。

FlatDemProvider

FlatDemProvider は地球上のどの地形に対しても 高さ0 を返す Provider です。 Mapray Cloud から DEM データを取得しないため通信が発生せず、高速に動作します。

バージョンによってAPIが若干ことなりますので 0.9.6と最新バージョンの２つで説明をします。

サンプルコード

サンプルでは、 StandardUIViewer のコンストラクタ引数で直接 FlatDemProvider を指定しています。 DEM Layer と同様に dem_layers.add() で追加することも可能です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Add Flat Dem</title>
        <meta property="og:description" content="Basic sample for adding Flat DEM to the virtual Earth" />
        <script src="./v0.10.6/mapray.min.js"></script>
        <script src="./v0.10.6/maprayui.min.js"></script>
        <link rel="stylesheet" href=".v0.10.6/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>
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
        dem_provider: new mapray.FlatDemProvider()
    });
</script>

FlatDemProvider自体はMapray Cloudにアクセスすることはないのですが、StandardUIViewer のコンストラクタの第2引数（Organization Token）の指定は必須になっています。 サンプルでは、 StandardUIViewer のコンストラクタ引数で直接 FlatDemProvider を指定しています。 DEM Layer と同様に dem_layers.add() で追加することも可能です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Add Flat Dem</title>
        <meta property="og:description" content="Basic sample for adding Flat DEM to the virtual 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>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

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

<script>

    // 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.FlatDemProvider()
    });
</script>

Info

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