コンテンツにスキップ

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.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>
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
        dem_provider: new mapray.FlatDemProvider()
    });
</script>

FlatDemProvider自体はMapray Cloudにアクセスすることはないのですが、Mapray Cloud API Keyの設定は必須になっています。 サンプルでは、 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 apikey, which can be created in Mapray Cloud.
    const apikey = "<YOUR_MAPRAY_API_KEY>";
    const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey, {
        dem_provider: new mapray.FlatDemProvider()
    });
</script>

Info

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