Image Layer¶

Mapray JS は地表面に表示する画像について、タイル画像として任意の画像を表示できます。また、レイヤーとしてタイル画像を重ねることも可能です。

タイル画像とは¶

Image Layer で使用するデータはタイル状に画像を並べたものです。国土地理院の地理院タイルと互換性があり、簡単に表示できます。

地図画像変更サンプルコード¶

Mapray JS ではデフォルトの地図画像として国土地理院の全国最新写真を表示しています。

ここでは標準地図に変更する例を示します。変更するには StandardUIViewer のコンストラクタの引数として指定します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <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, {
        image_provider: new mapray.StandardImageProvider( {
            url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
            format: ".png",
            min_level: 0,
            max_level: 18
        })
    });

    uiviewer.setCameraPosition({
        longitude: 138.73133611,
        latitude: 35.35990555,
        height: 5000000
    });

    uiviewer.setLookAtPosition({
        longitude: 138.73133611,
        latitude:  35.35990555,
        height: 3776
    });
</script>

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

Note

Viewer.setImageProvider を用いて、動作中に地図画像を切り替えることもできます

Layer 表示サンプルコード¶

ここでは、国土地理院の標準地図をレイヤーに追加して表示する例を示します。またレイヤーの透過度を 50% に設定します。

StandardImageProvider の引数として、使用するタイル画像の拡張子（.png または .jpg）とズームレベルを指定しています。

<!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 apikey, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";

        // The StandardUIViewer in the ui package includes mouse-based camera manipulation.
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

        await uiviewer.addLayer( new mapray.StandardImageProvider( {
            url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
            format: ".png",
            min_level: 2,
            max_level: 18
        }));

        uiviewer.viewer.layers.getLayer(0).setOpacity( 0.5 );

        uiviewer.setCameraPosition({
            longitude: 138.73133611,
            latitude: 35.35990555,
            height: 5000000
        });

        uiviewer.setLookAtPosition({
            longitude: 138.73133611,
            latitude:  35.35990555,
            height: 3776
        });
    }

    main();
</script>

Info

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

Warning

レイヤー追加は非同期で処理されるため、 await や then で追加処理完了を待ってからレイヤーに対する処理を行う必要があります。

Image Layer¶

タイル画像とは¶

地図画像変更サンプルコード¶

Layer 表示サンプルコード¶

実行結果¶