Contour Layer¶

地形に対して等高線のように一定の高さの位置に線を表示することができます。 Image Layer と同じくレイヤーとして重ねて表示します。

パラメータ¶

内容	ContourLayer.Option	ContourLayerメソッド	引数
可視性フラグ	visibility	setVisibility	true / false
不透明度	opacity	setOpacity	0.0 ~ 1.0
表示間隔（高さ [m] ）	interval	setInterval	0.0 ~
線の太さ [px]	line_width	setLineWidth	1.0 ~ 5.0
線の表示色	color	setColor	RGBA 各 0.0 ~ 1.0 (Vector4)

サンプルコード¶

レイヤーの追加時に type: mapray.Layer.Type.CONTOUR を指定する必要があります。その他のパラメータについては mapray.ContourLayer.Option を参照してください。

レイヤー作成後に ContourLayer クラスのメソッドでパラメータの変更ができます。

<!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() {
        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.addLayer({
            type: mapray.Layer.Type.CONTOUR,
            visibility: true,
            opacity: 1.0,
            interval: 100,
            line_width: 1.0,
            color: [0.0, 0.5, 1.0, 1.0]
        });

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

    main();
</script>

Info

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

Warning

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