コンテンツにスキップ

ルート線の描画・削除

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

  • 地図上にルート線を描画する方法
  • 地図上のルート線を削除する方法
  • ルート線の表示・非表示を操作する方法

対象クラス

対象関数

実装サンプル

こちらをご覧ください。

実装方法

実装手順

  1. 地図を初期化します（ Mapクラス ）
  2. 描画するGeoJsonを用意します
  3. (2)を用いてmapscript.value.GeoJsonFigureConditionオブジェクトを生成します
  4. mapscript.util.locationsToLatLngRect()関数を用いて、LatLngRect オブジェクトを生成します
    moveBasedOnLatLngRect()関数を用いてルート形状の表示領域を調整します
  5. addGeoJsonFigure()関数（ Map クラス ） を用いて(3)で生成したルート線オブジェクトを地図上に追加します
    ※ルート線を削除する場合は removeGeoJsonFigure()関数（ 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）描画するGeoJsonを用意
                const geojson = {
                    type: "FeatureCollection",
                    features: [ /* 略 */],
                    bbox: [
                        139.576936,
                        35.631637,
                        139.749903,
                        35.661491
                    ]
                };
                // （3）ルート線オブジェクトを生成
                figure = new mapscript.value.GeoJsonFigureCondition(geojson, {
                    isRouteShape: true, // ルート線かどうか(ルート描画の場合は必須)
                });
                // (４） 表示領域の調整
                // bbox から LatLngRect オブジェクトを生成
                const [lng1, lat1, lng2, lat2] = geojson.bbox; 
                const rect = mapscript.util.locationsToLatLngRect([
                    new mapscript.value.LatLng(lat1, lng1),
                    new mapscript.value.LatLng(lat2, lng2)
                ]);
                // LatLngRectが画面内に収まる位置に移動
                map.moveBasedOnLatLngRect(rect, true); 
                // (5) ルート線を地図に追加
                map.addGeoJsonFigure(figure);

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

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

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

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

関連ページ