Implementare stili dinamici per le piante di interni

  • Articolo

È possibile usare il servizio Mappe di Azure Stato funzionalità creatore per applicare stili basati sulle proprietà dinamiche delle caratteristiche dei dati della mappa di interni. È, ad esempio, possibile eseguire il rendering delle sale riunioni con un colore specifico in modo che indichino se sono o meno occupate. Questo articolo descrive come eseguire il rendering dinamico delle funzionalità della mappa interna con il servizio Stato funzionalità e il modulo Web Indoor.

Prerequisiti

Questo articolo usa l'applicazione Postman , ma è possibile scegliere un ambiente di sviluppo api diverso.

Implementare stili dinamici

Dopo aver completato i prerequisiti, è necessario avere una semplice applicazione Web configurata con la chiave di sottoscrizione e statesetId.

Selezione delle funzionalità

Si fa riferimento a una funzionalità, ad esempio una sala riunioni o una sala riunioni, in base al relativo ID per implementare lo stile dinamico. Usare l'ID funzionalità per aggiornare la proprietà dinamica o lo stato di tale funzionalità. Per visualizzare le funzionalità definite in un set di dati, usare uno dei metodi seguenti:

  • API WFS (servizio funzionalità Web). Usare l'API WFS per eseguire query sui set di dati. Il servizio WFS è conforme alle funzionalità dell'API Open Geospatial Consortium. L'API WFS è utile per eseguire query sulle funzionalità all'interno di un set di dati. Ad esempio, è possibile usare WFS per trovare tutte le sale riunioni di medie dimensioni di una struttura e un livello di piano specifici.

  • Implementare codice personalizzato che un utente può usare per selezionare le funzionalità in una mappa usando l'applicazione Web, come illustrato in questo articolo.

Lo script seguente implementa l'evento click del mouse. Il codice recupera l'ID funzionalità in base al punto selezionato. Nell'applicazione è possibile inserire il codice dopo il blocco di codice di Indoor Manager. Eseguire l'applicazione e quindi controllare la console per ottenere l'ID funzionalità del punto selezionato.

/* 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);
        }
    });
});

Nell'esercitazione Creare una pianta di interni è stato configurato il valore stateset della funzionalità in modo da accettare gli aggiornamenti di stato relativi ad occupancy.

Nella sezione successiva si imposta lo stato di occupazione dell'ufficio UNIT26 su true e ufficio UNIT27 su false.

Impostare lo stato di occupazione

Aggiornare lo stato dei due uffici e UNIT26UNIT27:

  1. Nell'app Postman selezionare Nuovo.

  2. Nella finestra Crea nuovo selezionare Richiesta HTTP.

  3. Immettere un nome di richiesta per la richiesta, ad esempio POST Data Upload.

  4. Immettere l'URL seguente per l'API Stati aggiornamento funzionalità (sostituire {Azure-Maps-Subscription-key} con la chiave di sottoscrizione Mappe di Azure e statesetId con ):statesetId

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

  5. Selezionare la scheda Intestazioni.

  6. Nel campo CHIAVE selezionare Content-Type. Nel campo VALORE selezionare application/json.

    Header tab information for stateset creation.

  7. Selezionare la scheda Corpo.

  8. Negli elenchi a discesa selezionare raw e JSON.

  9. Copiare lo stile JSON seguente e incollarlo nella finestra Corpo :

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

    Importante

    L'aggiornamento verrà salvato solo se il timestamp registrato è dopo il timestamp usato nelle richieste di aggiornamento dello stato della funzionalità precedenti per lo stesso ID funzionalità.

  10. Modificare l'URL usato nel passaggio 7 sostituendo UNIT26 con UNIT27:

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

  11. Copiare lo stile JSON seguente e incollarlo nella finestra Corpo :

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

Visualizzare gli stili dinamici in una mappa

L'applicazione Web aperta in precedenza in un browser dovrebbe ora riflettere lo stato aggiornato delle funzionalità della mappa:

  • Office UNIT27(142) dovrebbe essere verde.
  • Office UNIT26(143) dovrebbe essere rosso.

Free room in green and Busy room in red

Vedere la demo live

Passaggi successivi

Per altre informazioni, vedere:

[Che cos'è Mappe di Azure Creator?]

Creator per piante di interni