任意タイルの追加

任意タイル追加機能をご利用いただく場合

任意タイルを描画する機能はオプション扱いとなります。
利用をご希望される場合は、営業担当もしくはサポートまでご連絡ください。

※任意タイルを利用する場合は、事前にその利用規約の確認や許諾が必要です。

このページでは以下の方法について説明しています。

地図上に任意タイルを描画する方法
地図上の任意タイルを削除する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

実装手順

地図の初期化時点で利用する任意タイルのサーバ情報を設定します
地図に表示したいタイミングで、mapscript.value.AdditionTileConditionオブジェクトを生成します
(1)で生成したオブジェクトをMap#setAdditionTileCondition()で追加します
非表示にする場合は、Map#clearAdditionTileCondition()に対象のキー名を指定します

サンプルコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>任意タイルの追加</title>
        <!-- APIの呼び出し -->
        <script src="https://{HOST}/{CID}/v2/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
        <script>
            function getMap() {
                // (1)地図の初期化時点で利用する任意タイルのサーバ情報を設定します
                const tile = mapscript.types.AdditionTileServerInfo = {
                    requestUrl: 'https://XXXXXXXXX/{Z}/{X}/{Y}.png'
                };
                const center = new mapscript.value.LatLng(35.56060783, 139.67621635);
                const map = new mapscript.Map('{CID}', {
                    target: '#map',
                    center: center,
                    zoomLevel: 10,
                    options: {
                        additionTileOptions: {
                            serverInfoList: {
                                // 任意の文字列をキーとしサーバ情報を設定
                                // キー名は表示・非表示時にも利用するため定数として定義することを推奨
                                'flood': tile
                            }
                        }
                    }
                });

                // (2)地図に表示したいタイミングで、mapscript.value.AdditionTileConditionオブジェクトを生成
                const condition = new mapscript.value.AdditionTileCondition({
                    // 表示するズームレベル範囲。APIにより対応範囲が決まっているため仕様を確認
                    zoomRange: new mapscript.value.ZoomRange(2, 17),
                    // (Optional) レイヤーの不透明度(0以上1以下)
                    transparency: 0.6,
                    // (Optional) レイヤー描画優先度
                    priority: 2,
                });

                // (3) (1)で生成したオブジェクトをMap#setAdditionTileCondition()で追加
                // Conditionを設定し表示
                map.setAdditionTileCondition('flood', condition);

                // 非表示にする場合はキーを指定
                // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください
                map.clearAdditionTileCondition('flood');
            }
        </script>
    </head>
    <body onload="getMap()">
        <div id="map" style="height: 500px; width: 500px;"></div>
    </body>
</html>

オブジェクトを作成するときのパラメータについて

mapscript.value.AdditionTileCondition オブジェクトを作成する際 zoomRangeの指定は必須となりますが、他にもオプショナルで指定できるパラメータがあります。
詳しくはこちらをご覧ください。