Creator の屋内マップに動的スタイル設定を実装する

[アーティクル]
03/13/2023

Azure Maps Creator Feature State サービスを使用すると、屋内マップデータ地物の動的プロパティに基づくスタイルを適用できます。たとえば、施設の会議室を特定の色でレンダリングして、占有状態を反映できます。この記事では、Feature State サービスと Indoor Web モジュールを使用して、屋内マップ地物を動的にレンダリングする方法について説明します。

前提条件

statesetId。詳細については、地物の状態セットを作成する方法に関する記事を参照してください。
Web アプリケーション。詳細については、Indoor Map モジュールの使用方法に関する記事を参照してください。

この記事では Postman アプリケーションを使用していますが、別の API 開発環境を選択することもできます。

動的スタイル設定を実装する

前提条件を完了すると、サブスクリプションキーおよび statesetId を使用して構成された単純な Web アプリケーションが作成されます。

機能を選択する

会議室やカンファレンスルームなどの地物をその ID から参照して、動的スタイル設定を実装します。地物 ID を使用して、その地物の動的プロパティまたは "状態" を更新します。データセットで定義されている地物を表示するには、次のいずれかの方法を使用します。

WFS API (Web Feature サービス)。 WFS API を使用して、データセットのクエリを実行できます。 WFS は、Open Geospatial Consortium API の機能に従います。 WFS API は、データセット内の地物のクエリに役立ちます。たとえば、WFS を使用して、特定の施設とレベルの中規模の会議室をすべて検索することができます。
この記事で説明されているように、ユーザーが Web アプリケーションを使用してマップ上の地物を選択できるようにするカスタマイズされたコードを実装します。

次のスクリプトでは、マウスクリックイベントを実装します。このコードでは、クリックされたポイントに基づいて地物 ID を取得します。アプリケーションでは、Indoor Manager コードブロックの後にコードを挿入できます。アプリケーションを実行した後、コンソールを確認して、クリックしたポイントの地物 ID を取得します。

/* Upon a mouse click, log the feature properties to the browser's console. */
map.events.add("click", function(e){

    var features = map.layers.getRenderedShapes(e.position, "unit");

    features.forEach(function (feature) {
        if (feature.layer.id == 'indoor_unit_office') {
            console.log(feature);
        }
    });
});

屋内マップの作成チュートリアルでは、occupancy の状態の更新を受け入れるように地物状態セットを構成しました。

次のセクションでは、オフィス UNIT26 の占有 "状態" を true に設定し、オフィス UNIT27 を false に設定します。

占有状態を設定する

以下を実行して、2 つのオフィス UNIT26 と UNIT27 の状態を更新します。

Postman アプリ内で [新規] を選択します。
[新規作成] ウィンドウで [HTTP 要求] を選択します。
要求の [要求名] を入力します (POST Data Upload など)。
Feature Update States API に対する次の URL を入力します ({Azure-Maps-Subscription-key} を実際の Azure Maps サブスクリプションキーに置き換え、statesetId を statesetId に置き換えます)。
```
https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}
```
[Headers](ヘッダー) タブを選択します。
[キー] フィールドで、Content-Type を選択します。 [値] フィールドで、application/json を選択します。
[Body] タブを選択します。
ドロップダウンリストで、 [raw] と [JSON] を選択します。
次の JSON スタイルをコピーして、 [本文] ウィンドウに貼り付けます。
```
{
    "states": [
        {
            "keyName": "occupied",
            "value": true,
            "eventTimestamp": "2020-11-14T17:10:20"
        }
    ]
}
```
重要

POST されたタイムスタンプが、同じ地物 ID に対する以前の地物状態の更新要求で使用されたタイムスタンプより後の場合にのみ、更新は保存されます。

ステップ 7 で使用した URL を変更し、UNIT26 を UNIT27 に置き換えます。

https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT27?api-version=2.0&subscription-key={Your-Azure-Maps-Subscription-key}

次の JSON スタイルをコピーして、 [本文] ウィンドウに貼り付けます。

{
    "states": [
        {
            "keyName": "occupied",
            "value": false,
            "eventTimestamp": "2020-11-14T17:10:20"
        }
    ]
}

マップ上で動的スタイルを視覚化する

以前にブラウザーで開いた Web アプリケーションには、マップ地物の更新された状態が反映されているはずです。

オフィス UNIT27(142) が緑で表示されます。
オフィス UNIT26(143) が赤で表示されます。

Free room in green and Busy room in red

ライブデモを見る

次のステップ

詳細については、次を参照してください。

[Azure Maps Creator とは]

屋内マップ用の Creator