郵便番号ポリゴンの表示

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

郵便番号に基づいたポリゴンを地図上に描画する方法
郵便番号ポリゴンの表示条件をクリアする方法
ポリゴンのスタイルを個別に変更する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

実装手順

地図を初期化します
mapscript.PostalCodePolygonCondition オブジェクトを生成します
setPostalCodePolygonCondition()関数（ Map クラス）を用いて(2)で生成した表示条件を地図に設定します
※表示条件をクリアする場合は clearPostalCodePolygonCondition()関数（ Map クラス）をご利用ください
addPostalCodePolygons()関数（ Map クラス）で表示する郵便番号を追加します
※ mode が 'all' の場合は表示範囲内の全郵便番号が自動表示されるため、この手順は不要です

サンプルコード

<!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 initMap(){
                // (1) 地図を初期化
                const map = new mapscript.Map('{CID}', {
                    target: '#map',
                    center: new mapscript.value.LatLng(35.681109, 139.767165),
                    zoomLevel: 14
                });
                // (2) 郵便番号ポリゴン表示条件を生成
                const condition = new mapscript.PostalCodePolygonCondition({
                    mode: 'selective',
                    defaultPolygonStyleOptions: {
                        fillColor: new mapscript.value.Color(0, 0, 1, 0.3),
                        strokeColor: new mapscript.value.Color(0, 0, 1, 1),
                        strokeWeight: 2
                    }
                });
                // (3) 郵便番号ポリゴン表示条件を地図に設定
                map.setPostalCodePolygonCondition(condition);
                // (4) 表示する郵便番号を追加
                map.addPostalCodePolygons(['100-0004', '100-0005', '100-0006']);

                // 表示条件をクリアする場合
                // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください
                // map.clearPostalCodePolygonCondition();
            }
        </script>
    </head>

    <!-- 初期化関数の呼び出し -->
    <body onload="initMap()">
        <div id="map" style="height: 500px; width: 500px;"></div>
    </body>
</html>

表示モードについて

setPostalCodePolygonCondition() では mode オプションで表示モードを切り替えられます。
'selective'（デフォルト）は addPostalCodePolygons() で追加した郵便番号のみ表示し、'all' は表示範囲内の全郵便番号を自動表示します。
詳しくはこちらをご覧ください。

表示条件のパラメータについて

mapscript.PostalCodePolygonCondition オブジェクトを作成する際に指定できるオプションについてはこちらをご覧ください。

ポリゴンのスタイルを個別に変更する

特定の郵便番号のポリゴンスタイルを変更したい場合は以下のような方法で実現が可能です。