Implementace dynamických stylů pro interiérové mapy Creatoru

Článek
11/04/2021
2 min ke čtení

Pomocí služby Azure Mapy Creator Feature State můžete použít styly, které jsou založené na dynamických vlastnostech vlastností dat interiérových map. Můžete například vykreslit konferenční místnosti v zařízení s konkrétní barvou, aby odrážely stav obsazenosti. Tento článek popisuje, jak dynamicky vykreslovat funkce interiérových map pomocí služby Feature State a modulu Interiérový web.

Požadavky

Vytvoření účtu Azure Maps
Získejte primární klíč předplatného, označované také jako primární klíč nebo klíč předplatného.
Vytvoření prostředku Creator
Stáhněte si ukázkový balíček pro kreslení.
Vytvořte interiérovou mapu, abyste získali objekt a tilesetId statesetId .
Sestavte webovou aplikaci podle kroků v tématu Použití modulu Interiérová mapa.

V tomto kurzu se používá aplikace Postman, ale můžete zvolit jiné vývojové prostředí API.

Implementace dynamického stylu

Po splnění požadavků byste měli mít jednoduchou webovou aplikaci nakonfigurovanou s klíčem předplatného , a tilesetId statesetId .

Výběr funkcí

Aby bylo možné implementovat dynamické styly, musí být funkce , jako je například schůzka nebo konferenční místnost, odkazována pomocí funkce id . Pomocí funkce id můžete aktualizovat dynamickou vlastnost nebo stav této funkce. K zobrazení funkcí definovaných v datové sadě můžete použít jednu z následujících metod:

Rozhraní API WFS (Služba webových funkcí). K dotazování datových sad můžete použít rozhraní API WFS. WFS dodržuje Open Geospatial Consortium API. Rozhraní API WFS je užitečné pro dotazování funkcí v datové sadě. WFS můžete například použít k vyhledání všech konferenčních místností střední velikosti konkrétního zařízení a úrovně podlaží.
Implementujte přizpůsobený kód, který může uživatel použít k výběru funkcí na mapě pomocí webové aplikace. Tuto možnost používáme v tomto článku.

Následující skript implementuje událost kliknutí myší. Kód načte funkci na id základě bodu, na který jste klikli. Do aplikace můžete vložit kód za blok kódu interiérového manažera. Spusťte aplikaci a pak zkontrolujte konzolu, abyste získali funkci bodu, na id který jste klikli.

/* 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, "indoor");

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

Kurz Vytvoření interiérové mapy nakonfiguroval stavovou nabídku funkcí tak, aby přijímá aktualizace stavu pro occupancy .

V další části nastavíme stav obsazenosti kanceláře na a kancelář na UNIT26 true UNIT27 false .

Nastavení stavu obsazenosti

Teď aktualizujeme stav těchto dvou poboček a UNIT26 UNIT27 :

V aplikaci Postman vyberte Nový.
V okně Vytvořit nový vyberte Požadavek HTTP.
Zadejte název požadavku, například POST Data Upload.
Zadejte následující adresu URL rozhraní API stavů aktualizace funkcí (nahraďte primárním klíčem předplatného a {Azure-Maps-Primary-Subscription-key} statesetId parametrem statesetId ):
```
https://us.atlas.microsoft.com/featurestatesets/{statesetId}/featureStates/UNIT26?api-version=2.0&subscription-key={Your-Azure-Maps-Primary-Subscription-key}
```
Vyberte kartu Hlavičky.
V poli KLÍČ vyberte Content-Type . V poli HODNOTA vyberte application/json .
Vyberte kartu Text.
V rozevíracích seznamech vyberte raw a JSON.
Zkopírujte následující styl JSON a vložte ho do okna Text:
```
{
    "states": [
        {
            "keyName": "occupied",
            "value": true,
            "eventTimestamp": "2020-11-14T17:10:20"
        }
    ]
}
```
Důležité

Aktualizace se uloží jenom v případě, že se zveřejněné časové razítko nachází po časovém razítku použitém v předchozích žádostech o aktualizaci stavu funkce pro stejnou funkci ID .

Změňte adresu URL, kterou jste použili v kroku 7, UNIT26 nahrazením za UNIT27 :

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

Zkopírujte následující styl JSON a vložte ho do okna Text:

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