チュートリアル:Azure Maps Route Service とマップコントロールを使用してルートの道順を表示する方法

[アーティクル]
09/03/2024

このチュートリアルでは、Azure Maps Route Service API とマップコントロールを使用して、始点から終点までのルートの道順を表示する方法について説明します。このチュートリアルでは、次の方法について説明します。

マップコントロールを作成して Web ページに表示します。
シンボルレイヤーと線レイヤーを定義して、ルートの表示レンダリングを定義します。
GeoJSON オブジェクトを作成し、始点と終点を表すようにマップに追加します。
Get Route Directions API を使用して、始点と終点からのルートの道順を取得します。

ソースコードについては、GitHub の「Route」チュートリアルを参照してください。ライブサンプルについては、「Route to a destination」を参照してください。

前提条件

マップコントロールを作成して表示する

次の手順では、マップコントロールを作成して Web ページに表示する方法について説明します。

ローカルコンピューターに新しいファイルを作成し、名前を MapRoute.html にします。

次の HTML をファイルに追加します。

<!DOCTYPE html>
<html>
<head>
    <title>Map Route</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource, client;

        function GetMap() {
            //Add Map Control JavaScript code here.
        }
    </script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="myMap"></div>
</body>
</html>

この HTML について、次の点を理解しておく必要があります。

HTML ヘッダーには、Azure マップコントロールライブラリによってホストされる CSS および JavaScript のリソースファイルが含まれています。
ページ本体の onload イベントは、ページの本体の読み込みが完了すると、GetMap 関数を呼び出します。
GetMap 関数には、Azure Maps API にアクセスするために使うインライン JavaScript コードが含まれます。この関数は、次の手順で追加されます。

次に、次の JavaScript コードを GetMap 関数の、最後の手順で追加したコードのすぐ下に追加します。このコードは、マップコントロールを作成し、指定した Azure Maps のサブスクリプションキーを使用して初期化します。文字列 <Your Azure Maps Key> を、Maps アカウントからコピーした Azure Maps の主キーに置き換えてください。
```
//Instantiate a map object
var map = new atlas.Map('myMap', {
    // Replace <Your Azure Maps Key> with your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
       authType: 'subscriptionKey',
       subscriptionKey: '<Your Azure Maps Key>'
    }
});
```
この JavaScript について、次の点を理解しておく必要があります。
- これは、GetMap 関数のコアであり、Azure Maps アカウントキーのマップコントロール API を初期化します。
- atlas は、Azure Maps API および関連するビジュアルコンポーネントを含む名前空間です。
- atlas.Map は、ビジュアルと対話型 Web マップに対するコントロールを提供します。
変更をファイルに保存し、ブラウザーで HTML ページを開きます。表示されるマップは最も基本的なマップです。これを作成するには Azure Maps アカウントサブスクリプションキーを使って atlas.Map を呼び出します。

ルート表示レンダリングを定義する

このチュートリアルでは、ラインレイヤーを使用してルートをレンダリングします。始点と終点は、シンボルレイヤーを使ってレンダリングされます。線レイヤーの追加の詳細については、「マップに線レイヤーを追加する」を参照してください。シンボルレイヤーの詳細については、「マップにシンボルレイヤーを追加する」を参照してください。

GetMap 関数で、マップを初期化した後、次の JavaScript コードを追加します。
```
//Wait until the map resources are ready.
map.events.add('ready', function() {

    //Create a data source and add it to the map.
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a layer for rendering the route lines and have it render under the map labels.
    map.layers.add(new atlas.layer.LineLayer(datasource, null, {
        strokeColor: '#2272B9',
        strokeWidth: 5,
        lineJoin: 'round',
        lineCap: 'round'
    }), 'labels');

    //Add a layer for rendering point data.
    map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: ['get', 'icon'],
            allowOverlap: true
       },
        textOptions: {
            textField: ['get', 'title'],
            offset: [0, 1.2]
        },
        filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer.
    }));
});
```
この JavaScript について、次の点を理解しておく必要があります。
- このコードは、マップコントロールの ready イベントハンドラーを実装します。このチュートリアルの残りのコードは、ready イベントハンドラー内に配置されます。
- マップコントロールの ready イベントハンドラーで、始点から終点までのルートを格納するためのデータソースが作成されます。
- ルートの線のレンダリング方法を定義するために、線レイヤーが作成され、データソースにアタッチされます。ルートの線で道路のラベルが覆い隠されないようにするために、2 番目のパラメーターを 'labels' の値で渡します。
次に、シンボルレイヤーが作成され、データソースにアタッチされます。起点と終点のレンダリング方法は、このレイヤーで指定します。各ポイントオブジェクトのプロパティからアイコン画像とテキストラベル情報を取得するための式が追加されました。式の詳細については、データドリブンのスタイルの式に関するページをご覧ください。
次に、Microsoft を始点として、シアトルにあるガソリンスタンドを終点として設定します。スタートとポイントは、Map コントロールの ready イベントハンドラーに次のコードを追加することによって作成されます:
```
//Create the GeoJSON objects which represent the start and end points of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.130137, 47.644702]), {
    title: "Redmond",
    icon: "pin-blue"
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.3352, 47.61397]), {
    title: "Seattle",
    icon: "pin-round-blue"
});

//Add the data to the data source.
datasource.add([startPoint, endPoint]);

map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 80
});
```
この JavaScript について、次の点を理解しておく必要があります。
- このコードにより、ルートの始点と終点を表す 2 つの GeoJSON ポイントオブジェクトが作成され、データソースに追加されます。
- 最後のコードブロックでは、始点と終点の緯度と経度を使用してカメラビューを設定します。
- 起点と終点をデータソースに追加します。
- 起点と終点の境界ボックスは、atlas.data.BoundingBox.fromData 関数を使用して計算されます。この境界ボックスと map.setCamera 関数を使用して、ルート全体にマップのカメラビューが設定されます。
- 記号アイコンのピクセル寸法を補正するためにパディングを追加しています。
マップコントロールの setCamera プロパティの詳細については、setCamera(CameraOptions | CameraBoundsOptions と AnimationOptions) プロパティを参照してください。
MapRoute.html を保存し、ブラウザーを更新します。これで、マップの中心がシアトルに設定されました。涙形の青いピンは、始点をマークしています。円形の青いピンは、終点をマークしています。

ルートの道順を取得する

このセクションでは、Azure Maps Route Directions API を使用して、ルートの道順と、特定ポイント間の推定到着時間を取得する方法について説明します。

ヒント

Azure Maps Route Service には、距離、渋滞状況、使用する輸送モードに基づく、"最速"、"最短"、"エコ"、"スリリング" などのさまざまなルートの種類を基にルートを計画できる API シリーズが用意されています。また、このサービスを使用すると、ユーザーは過去の渋滞状況に基づいて今後のルートを計画することもできます。ユーザーは、指定された任意の時刻におけるルート所要時間の予測を確認できます。詳しくは、Get Route Directions API に関する記事をご覧ください。

GetMap 関数のコントロールの ready イベントハンドラー内で、JavaScript コードに以下を追加します。

var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
var url = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;

//Make a search route request
fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var route = response.routes[0];
    //Create an array to store the coordinates of each turn
    var routeCoordinates = [];
    route.legs.forEach((leg) => {
        var legCoordinates = leg.points.map((point) => {
            return [point.longitude, point.latitude];
        });
        //Add each turn to the array
        routeCoordinates = routeCoordinates.concat(legCoordinates);
    });
    //Add route line to the datasource
    datasource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
});

この JavaScript について、次の点を理解しておく必要があります。

このコードにより、始点から終点までのルートが構築されます。
url は、Azure Maps Route Service API に対して、ルートの道順を計算するよう、問い合わせます。
座標の配列が応答から抽出され、データソースに追加されます。

MapRoute.html ファイルを保存し、Web ブラウザーを更新します。マップに、始点から終点までのルートが表示されます。

このチュートリアルで使用する完成したコードについては、GitHub の「Route」チュートリアルを参照してください。
このサンプルをライブで表示するには、Azure Maps コードサンプルのサイトで、行き先へのルートの決定に関するページを参照してください。

次のステップ

次のチュートリアルでは、移動モードや積み荷の種類など、制限付きのルートクエリを作成する方法について説明します。その後、同じマップに複数のルートを表示できます。

異なる移動モードでルートを検索する

次の方法で共有

チュートリアル:Azure Maps Route Service とマップコントロールを使用してルートの道順を表示する方法

前提条件

マップコントロールを作成して表示する

ルート表示レンダリングを定義する

ルートの道順を取得する

次のステップ

フィードバック

その他のリソース

次の方法で共有

チュートリアル:Azure Maps Route Service とマップ コントロールを使用してルートの道順を表示する方法

前提条件

マップ コントロールを作成して表示する

ルート表示レンダリングを定義する

ルートの道順を取得する

次のステップ

フィードバック

その他のリソース

チュートリアル:Azure Maps Route Service とマップコントロールを使用してルートの道順を表示する方法

マップコントロールを作成して表示する