Implémenter des styles dynamiques pour les cartes d’intérieur du Créateur

Vous pouvez utiliser le service Feature State d’Azure Maps Creator pour appliquer des styles basés sur les propriétés dynamiques des caractéristiques des données de cartes d’intérieur. Par exemple, vous pouvez afficher des salles de réunion d’un bâtiment dans une couleur spécifique reflétant leur état d’occupation. Cet article explique comment afficher de façon dynamique des caractéristiques de carte d’intérieur avec le service État de la fonctionnalité et le module web Intérieur.

Prérequis

• Un statesetId. Pour plus d’informations, consultez le guide pratique pour créer un ensemble d’états de caractéristiques.
• une application web. Pour plus d’informations, consultez le guide pratique pour utiliser le module Indoor Maps.

Cet article utilise l’application Postman, mais vous pouvez choisir un autre environnement de développement d’API.

Implémenter l’application de style dynamique

Une fois les prérequis remplis, vous devez disposer d’une application web simple configurée avec votre clé d’abonnement et statesetId.

Sélectionner les caractéristiques

Vous devez référencer une caractéristique comme une salle de réunion ou de conférence par son ID pour implémenter un style dynamique. Utilisez l’ID de caractéristique pour mettre à jour la propriété dynamique ou l’état de cette caractéristique. Pour afficher les caractéristiques définies dans un jeu de données, utilisez l’une des méthodes suivantes :

• API WFS (service de caractéristique web). Utilisez l’API WFS pour interroger des jeux de données. L’API de service de caractéristique web suit les caractéristiques de l’API Open Geospatial Consortium. L’API de service de caractéristique web est utile pour interroger des caractéristiques à l’intérieur d’un jeu de données. Par exemple, vous pouvez utiliser WFS pour rechercher toutes les salles de réunion de taille moyenne d’un bâtiment et d’un étage particuliers.

• Implémentez du code personnalisé qu’un utilisateur peut utiliser pour sélectionner des caractéristiques sur une carte à l’aide de votre application web, comme illustré dans cet article.

Le script suivant implémente l’événement de clic de souris. Le code récupère l’ID de caractéristique en fonction du point cliqué. Dans votre application, vous pouvez insérer le code après le bloc de code du gestionnaire d’intérieur. Exécutez votre application, puis consultez la console pour obtenir l’ID de caractéristique du point cliqué.

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

Le tutoriel Créer une carte d’intérieur a configuré le stateset de caractéristique pour accepter les mises à jour d’état pour occupancy.

Dans la section suivante, vous allez définir l’état d’occupation du bureau UNIT26 sur true et du bureau UNIT27 sur false.

Définir l’état d’occupation

Mettez à jour l’état des deux bureaux, UNIT26 et UNIT27 :

1. Dans l’application Postman, sélectionnez New (Nouveau).

2. Dans la fenêtre Create New (Créer), sélectionnez HTTP Request (Requête HTTP).

3. Entrez un Request name (Nom de demande) pour la demande, par exemple POST Data Upload.

4. Entrez l’URL suivante pour l’API des états de mise à jour des fonctionnalités (remplacez {Azure-Maps-Subscription-key} par votre clé d’abonnement Azure Maps et statesetId par le statesetId) :

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

5. Sélectionnez l’onglet En-têtes.

6. Dans le champ KEY (CLÉ), sélectionnez Content-Type. Dans le champ VALUE (VALEUR), sélectionnez application/json.

   

7. Sélectionnez l’onglet Corps .

8. Dans les listes déroulantes, sélectionnez raw (brut) et JSON.

9. Copiez le style JSON suivant, puis collez-le dans la fenêtre Body (Corps) :

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

   Important

   La mise à jour n’est enregistrée que si l’horodatage de publication est postérieur à celui utilisé dans les demandes de mise à jour d’état de caractéristique précédentes pour le même ID de caractéristique.

10. Modifiez l’URL que vous avez utilisée à l’étape 7 en remplaçant UNIT26 par UNIT27 :

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

11. Copiez le style JSON suivant, puis collez-le dans la fenêtre Body (Corps) :

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

Visualiser des styles dynamiques sur une carte

L’application web que vous avez précédemment ouverte dans un navigateur doit maintenant refléter l’état mis à jour des caractéristiques de carte :

• Le bureau UNIT27 (142) doit apparaître en vert.
• Le bureau UNIT26 (143) doit apparaître en rouge.

Voir la démonstration en direct

Étapes suivantes

Pour en savoir plus, consultez :

[Qu’est-ce qu’Azure Maps Creator ?]

Créateur pour cartes d’intérieur