コンテンツにスキップ

多角形の表示

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

  • 地図上に多角形を描画する方法
  • 地図上の多角形を削除する方法
  • 多角形の表示・非表示を操作する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

実装手順

  1. 地図を初期化します
  2. mapscript.object.Polygon オブジェクトを生成します
  3. addPolygon()関数（ Map クラス ） を用いて(2)で生成した多角形オブジェクトを地図上に追加します
    ※多角形を削除する場合は removePolygon()関数（ Map クラス ）をご利用ください
サンプルコード
<!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: 15 
                });
                // (2) 多角形オブジェクトを生成
                const polygon = new mapscript.object.Polygon({
                    // パス(必須)
                    paths: [
                        new mapscript.value.LatLng(35.691982, 139.771014),
                        new mapscript.value.LatLng(35.674311, 139.758945),
                        new mapscript.value.LatLng(35.679212, 139.779682)
                    ],
                    fillColor: new mapscript.value.Color(1, 0, 0, 0.4), // 塗りつぶし色
                    strokeColor: new mapscript.value.Color(1, 0, 0, 1), // 縁線の色
                });
                // (3) 多角形を地図に追加
                map.addPolygon(polygon);

                // 多角形を地図から削除
                // こちらのコードで動作を確認する場合は以下の1行をコメントアウトの上ご利用ください
                map.removePolygon(polygon);
            }
        </script>
    </head>

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

色の指定について

mapscript.object.Polygon オブジェクトでは、mapscript.value.Color オブジェクトを用いて多角形の色を指定することができます。
詳しくはこちらをご覧ください。

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

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

多角形の表示・非表示を切り替える

地図上に追加した多角形を非表示にしたい・表示したい場合は以下のような方法で実現が可能です。

サンプルコード
const polygon = new mapscript.object.Polygon(
    {
        paths: [
            new mapscript.value.LatLng(35.691982, 139.771014),
            new mapscript.value.LatLng(35.674311, 139.758945),
            new mapscript.value.LatLng(35.679212, 139.779682)
        ]
    }
);

// 多角形を非表示
polygon.hide();

// 多角形を表示
polygon.show();

// 表示状態を取得(trueなら表示、falseなら非表示の状態)
polygon.isVisible();

関連ページ