コンテンツにスキップ

ベクター地図の利用

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

  • ベクター地図を利用する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

ベクター地図を利用する

  1. 地図を初期化します
  2. mapscript.value.MapVectorConditionクラスを生成して、ベクター描画に関する情報を指定します
  3. setMapVectorCondition()関数(Mapクラス)を用いてベクター地図に切り替えます
サンプルコード
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>ベクター地図</title>
        <!-- APIの呼び出し -->
        <script src="https://{HOST}/{CID}/v2/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
        <script>
            const center = new mapscript.value.LatLng(35.68081, 139.76779)

            // 地図を初期化する関数
            function initMap() {
                // 地図を初期化
                const map = new mapscript.Map('{CID}', {
                    target: '#map', // 対象のDOM要素またはセレクタ（必須）
                    center: center, // 中心の緯度経度（必須）
                    zoomLevel: 15, // ズームレベル（必須）
                });

                // ベクター描画を利用
                map.setMapVectorCondition(new mapscript.value.MapVectorCondition({}));
            }
        </script>
    </head>
    <body onload="initMap()">
        <!-- 地図を表示する領域の確保 -->
        <div id="map" style="height: 500px; width: 500px;"></div>
    </body>
</html>

関連ページ