チュートリアル:Azure Maps を使用してさまざまな移動モードのルートを検索して表示する

[アーティクル]
05/05/2024

このチュートリアルでは、Azure Maps の Route Service およびマップコントロールを使用して、自家用車と、積み荷の種類が USHazmatClass2 である営業車 (トラック) の両方の道順を表示する方法について説明します。

このチュートリアルでは、以下の内容を学習します。

マップコントロールを作成して Web ページに表示する
マップにリアルタイムのトラフィックデータをレンダリングする
自家用車および営業車のルートを要求してマップに表示する

前提条件

注意

Azure Maps での認証の詳細については、「Azure Maps での認証の管理」を参照してください。

マップコントロール API を使って新しい Web ページを作成する

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

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

マップにリアルタイムのトラフィックデータをレンダリングする

GetMap 関数で、マップを初期化した後、次の JavaScript コードを追加します。このコードは、マップコントロールの ready イベントハンドラーを実装します。
```
map.events.add("ready", function() {
    // Add Traffic Flow to the Map
    map.setTraffic({
        flow: "relative"
    });
});
```
上記の JavaScript について、次の点を理解しておく必要があります。
- このコードは、マップコントロールの ready イベントハンドラーを実装します。このチュートリアルの残りのコードは、ready イベントハンドラー内に配置されます。
- マップの ready イベントのハンドラーで、マップのトラフィックフロー設定を relative (フリーフローを基準とした道路の速度) に設定します。
- トラフィックオプションの詳細については、「TrafficOptions インターフェイス」を参照してください。
MapTruckRoute.html ファイルを保存し、ブラウザーでページを更新します。ロサンゼルスなどの任意の都市にズームインすると、街路が現在のトラフィックフローデータと共に表示されます。

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

このチュートリアルでは、マップ上で 2 つのルートが計算されます 1 つ目のルートは、自家用車 (乗用車) に対して計算されます。 2 つ目のルートは、営業車 (トラック) に対して計算され、結果の違いが示されます。レンダリングの際、マップには、ルートの起点と終点を表す記号アイコンが表示され、ルートの経路ごとに異なる色でルートの線のジオメトリが表示されます。線レイヤーの追加の詳細については、「マップに線レイヤーを追加する」を参照してください。シンボルレイヤーの詳細については、「マップにシンボルレイヤーを追加する」を参照してください。

マップコントロールの ready イベントハンドラーに次のコードを追加します。
```
//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: ['get', 'strokeColor'],
    strokeWidth: ['get', 'strokeWidth'],
    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 イベントハンドラーで、起点から終点までのルートを格納するためのデータソースが作成されます。
- 式を使って、線の幅と色をルートの線のフィーチャーに関するプロパティから取得します。
- ルートの線で道路のラベルが覆い隠されないようにするために、'labels' の値を持つ 2 番目のパラメーターを渡しました。
次に、シンボルレイヤーが作成され、データソースにアタッチされます。起点と終点のレンダリング方法は、このレイヤーで指定します。各ポイントオブジェクトのプロパティからアイコン画像とテキストラベル情報を取得するための式を追加しています。式の詳細については、データドリブンのスタイルの式に関するページをご覧ください。
次に、シアトルにある架空の会社 Fabrikam を起点とし、Microsoft のオフィスを終点に設定します。マップコントロールの ready イベントハンドラーに次のコードを追加します。
```
//Create the GeoJSON objects which represent the start and end point of the route.
var startPoint = new atlas.data.Feature(new atlas.data.Point([-122.356099, 47.580045]), {
    title: 'Fabrikam, Inc.',
    icon: 'pin-blue'
});

var endPoint = new atlas.data.Feature(new atlas.data.Point([-122.201164, 47.616940]), {
    title: 'Microsoft - Lincoln Square',
    icon: 'pin-round-blue'
});

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

//Fit the map window to the bounding box defined by the start and end positions.
map.setCamera({
    bounds: atlas.data.BoundingBox.fromData([startPoint, endPoint]),
    padding: 100
});
```
上記の JavaScript について:
- このコードにより、ルートの始点と終点を表す 2 つの GeoJSON ポイントオブジェクトが作成され、データソースに追加されます。
- 最後のコードブロックでは、始点と終点の緯度と経度を使用してカメラビューを設定します。
- 起点と終点をデータソースに追加します。
- 起点と終点の境界ボックスは、atlas.data.BoundingBox.fromData 関数を使用して計算されます。この境界ボックスと map.setCamera 関数を使用して、ルート全体にマップのカメラビューが設定されます。
- 記号アイコンのピクセル寸法を補正するためにパディングを追加しています。
- 詳細については、Microsoft のテクニカルドキュメントの「setCamera 関数」をご覧ください。
TruckRoute.html を保存し、ブラウザーを更新します。これで、マップの中心がシアトルに設定されました。涙形の青いピンは、始点をマークしています。円形の青いピンは、終点をマークしています。

自家用車および営業車のルートを要求してマップに表示する

このセクションでは、Azure Maps Route Service を使用して、輸送モードに基づいて、ある地点から別の地点への道順を取得する方法について説明します。 2 つの輸送モード (トラックと乗用車) を使用します。

ヒント

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

GetMap 関数で、コントロールの ready イベントハンドラー内に、次の JavaScript コードを追加して、起点から終点までのトラックのルートを作成します。このルートは、USHazmatClass2 に分類された積み荷を運搬するトラックに対して作成および表示されます。
```
//Start and end point input to the search route request
var query = startPoint.geometry.coordinates[1] + "," +
            startPoint.geometry.coordinates[0] + ":" +
            endPoint.geometry.coordinates[1] + "," +
            endPoint.geometry.coordinates[0];
//Make a search route request for a truck vehicle type
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
fetch(truckRouteUrl, {
    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 the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#2272B9",
            strokeWidth: 9
        }),
        0
    );
});
```
上記の JavaScript について:
- このコードでは、Azure Maps Route Directions API を介して Azure Maps Route Service に対してクエリを実行します。
- その後、応答からの各ターンの座標から、ルートの線が作成されます。
- その後、ルートの線がデータソースに追加されます。
- トラックのルートの線には、線の色 #2272B9 (青) と幅 (9 ピクセル) という 2 つのプロパティを追加します。
- ルートの線には 0 のインデックスが付けられ、トラックのルートがデータソース内の他のすべての線の前にレンダリングされるようにします。これは、トラックのルート計算が乗用車のルート計算よりも時間がかかることが多いためです。トラックのルートの線が乗用車のルートよりも遅れてデータソースに追加された場合、その上にレンダリングされてしまいます。
ヒント

Azure Maps Route Directions API で使用可能なすべてのオプションと値を確認するには、郵送ルートの道順の URI パラメーターを参照してください。

次に、次の JavaScript コードを追加して、自家用車のルートを作成します。

var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
fetch(carRouteUrl, {
    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 the route line to the data source. This will add the car route after the truck route.
    datasource.add(
        new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
            strokeColor: "#B76DAB",
            strokeWidth: 5
        })
    );
});

上記の JavaScript について:

このコードでは、Azure Maps Route Directions API メソッドを介して Azure Maps ルーティングサービスに対してクエリを実行します。
その後、ルートの線が、各ターンの座標から作成され、データソースに追加されます。
トラックのルートの線には、線の色 #B76DAB (紫) と幅 (5 ピクセル) という 2 つのプロパティを追加します。

TruckRoute.html ファイルを保存し、Web ブラウザーを更新します。これで、マップにトラックと自家用車の両方のルートが表示されます。
- トラックのルートは濃い青の線を使用して表示され、自家用車のルートは薄い紫の線を使用して表示されます。
- 自家用車のルートは、I-90 経由でワシントン湖を渡っています。この道路は住宅地の下のトンネルを通過します。このトンネルは住宅地にあるため、危険廃棄物の積み荷が制限されています。トラックのルートは、積み荷の種類を USHazmatClass2 に指定したので、この制限がない別のルートを使うようにルート指定されています。

このチュートリアルで使用する完成したコードについては、GitHub の「Truck Route」チュートリアルをご覧ください。
このサンプルをライブで表示するには、Azure Maps コードサンプルのサイトで、移動モード別の複数のルートをご覧ください。
データドリブンのスタイルの式を使用することもできます。

次の手順

次のチュートリアルでは、Azure Maps を使用して簡単なストアロケーターを作成する手順を紹介します。

Azure Maps を使用してストアロケーターを作成する