Meilleures pratiques pour le kit de développement logiciel (SDK) Web Azure Maps

Ce document se concentre sur les meilleures pratiques pour le kit de développement logiciel (SDK) Web Azure Maps, mais la plupart des meilleures pratiques et optimisations présentées peuvent être appliquées à tous les autres kits de développement logiciel (SDK) Azure Maps.

Le kit de développement logiciel (SDK) Web Azure Maps fournit un canevas puissant pour le rendu de grands jeux de données spatiales de différentes façons. Dans certains cas, il existe plusieurs façons de restituer les données de la même manière, mais selon la taille du jeu de données et les fonctionnalités souhaitées, une méthode peut être plus performante que les autres. Cet article met en évidence les meilleures pratiques et conseils et astuces pour optimiser les performances et créer une expérience utilisateur fluide.

En général, lorsque vous cherchez à améliorer les performances de la carte, recherchez le moyen de réduire le nombre de couches et de sources, ainsi que la complexité des jeux de données et des styles de rendu utilisés.

Bonnes pratiques de sécurité

Pour plus d’informations sur les bonnes pratiques de sécurité, consultez Bonnes pratiques relatives à l’authentification et l’autorisation.

Utiliser les versions les plus récentes d’Azure Maps

Les kits SDK Azure Maps font régulièrement l’objet de tests de sécurité, ainsi que toutes les bibliothèques de dépendances externes qu’ils utilisent. Tout problème de sécurité connu est résolu en temps opportun et mis en production. Si votre application pointe vers la dernière version majeure de la version hébergée du SDK Azure Maps web, elle reçoit automatiquement toutes les mises à jour de version mineure qui incluent des correctifs de sécurité.

Si vous auto-hébergez le SDK Azure Maps web via le module npm, veillez à utiliser le symbole du signe insertion (^) avec le numéro de version du package Azure Maps npm dans votre fichier package.json afin de le faire pointer vers la dernière version mineure.

"dependencies": {
  "azure-maps-control": "^3.0.0"
}

Conseil

Utilisez toujours la dernière version du contrôle npm Azure Maps. Pour plus d’informations, consultez azure-maps-control dans la documentation npm.

Optimiser le chargement de mappage initial

Lors du chargement d’une page Web, l’une des premières choses que vous souhaitez est l’obtention d’un affichage dès que possible afin que l’utilisateur ne visualise pas un écran vide.

Regarder l’événement ready des mappages

De même, lorsque la carte se charge pour la première fois, le chargement le plus rapide possible des données est souvent souhaité pour ne pas que l’utilisateur soit pas face à une carte vide. Étant donné que le mappage charge les ressources de façon asynchrone, vous devez attendre qu’il soit prêt à interagir avec avant d’essayer de générer vos propres données sur celui-ci. Il existe deux événements que vous pouvez attendre, un événement load et un événement ready. L’événement de chargement est déclenché une fois que le mappage a fini de charger complètement l’affichage de la carte initiale et que chaque mosaïque a été chargée. Si vous voyez une erreur « Le chargement du style n’est pas terminé », vous devez utiliser l’événement load et attendre que le style soit entièrement chargé.

L’événement ready se déclenche quand les ressources de carte minimales nécessaires pour commencer à interagir avec la carte sont là. Plus précisément, l’événement ready est déclenché lorsque la carte charge les données de style pour la première fois. L’événement ready peut souvent se déclencher dans la moitié de l’événement de charge et vous permettre ainsi de commencer à charger vos données dans le mappage plus tôt. Évitez de changer le style ou la langue de la carte pour le moment, car cela peut déclencher un rechargement de style.

Chargement différé dans le kit de développement logiciel (SDK) Web Azure Maps

Si vous n’avez pas besoin tout de suite de la carte, chargez le SDK Azure Maps web en différé. Cela retarde le chargement des fichiers JavaScript et CSS utilisés par le SDK web Azure Maps aussi longtemps que nécessaire. Cela se produit généralement lorsque le mappage est chargé dans un onglet ou un panneau de menu volant qui n’est pas affiché lors du chargement de la page.

L’exemple de code Lazy Load the Map montre comment retarder le chargement du kit de développement logiciel (SDK) Web Azure Maps jusqu’à ce qu’un bouton soit enfoncé. Pour le code source, consultez exemple de code Lazy Load the Map.

Ajouter un espace réservé pour le mappage

Si le mappage prend un certain temps pour se charger en raison de limitations du réseau ou d’autres priorités au sein de votre application, envisagez d’ajouter une petite image d’arrière-plan au mappage div en tant qu’espace réservé pour le mappage. Cette opération remplit les vides de la carte div pendant son chargement.

Définir le style de mappage initial et les options de caméra lors de l’initialisation

Souvent, les applications veulent charger le mappage à un emplacement ou un style spécifique. Parfois, les développeurs attendent que la carte soit chargée (ou attendent l’événement ready), puis utilisent les fonctions setCamera ou setStyle de la carte. Obtenir la vue cartographique initiale souhaitée prend souvent plus de temps, car de nombreuses ressources finissent par être chargées par défaut avant que les ressources nécessaires pour la vue cartographique souhaitée soient chargées. Une meilleure approche consiste à passer la caméra de mappage souhaitée et les options de style dans le mappage lors de son initialisation.

Optimiser les sources des données

Le kit de développement logiciel (SDK) Web a deux sources de données,

• Source GeoJSON : classe DataSource, gère les données de localisation brutes au format GeoJSON en local. Convient aux petits et moyens jeux de données (jusqu’à des centaines de milliers de fonctionnalités).
• Source de mosaïque vectorielle : classe VectorTileSource, charge les données qui sont sous forme de mosaïques vectorielles dans l’affichage actuel de la carte, en fonction du système de mosaïque des cartes. Convient aux jeux de données volumineux ou énormes (des millions ou milliards de fonctionnalités).

Utiliser des solutions basées sur des mosaïques pour les jeux de données volumineux

Si vous utilisez des jeux de données plus volumineux contenant des millions de fonctionnalités, la méthode recommandée pour obtenir des performances optimales consiste à exposer les données à l’aide d’une solution côté serveur, telle que le service de mosaïques d’images vectorielles ou raster.
Les mosaïques de vecteurs sont optimisées pour charger uniquement les données qui sont en affichage avec les géométries découpées vers la zone de focus de la mosaïque et généralisées pour correspondre à la résolution du mappage pour le niveau de zoom de la mosaïque.

La plateforme Azure Maps Creator récupère les données au format de mosaïque vectorielle. D’autres formats de données peuvent utiliser des outils comme Tippecanoe. Pour plus d’informations sur l’utilisation de mosaïques vectorielles, consultez le fichier readme awesome-vector-tiles dans GitHub.

Il est également possible de créer un service personnalisé qui restitue les jeux de données sous forme de mosaïques d’images raster côté serveur et de charger les données à l’aide de la classe TileLayer dans le SDK de carte. Cela offre des performances exceptionnelles, car le mappage ne doit charger et gérer que quelques dizaines d’images au maximum. Toutefois, l’utilisation de mosaïques raster présente certaines limitations dans la mesure où les données brutes ne sont pas disponibles localement. Un service secondaire est souvent requis pour alimenter tout type d’expérience d’interaction, par exemple, rechercher la forme sur laquelle l’utilisateur a cliqué. En outre, la taille de fichier d’une mosaïque raster est souvent supérieure à celle d’une mosaïque de vecteur compressé qui contient des géométries optimisées au niveau du zoom et généralisées.

Pour plus d’informations sur les sources de données, consultez Créer une source de données.

Combiner plusieurs jeux de données en une seule source de mosaïques de vecteur

Moins le mappage a à gérer de sources de données, plus il peut traiter toutes les fonctionnalités à afficher. En particulier, lorsqu’il s’agit de sources de mosaïque, la combinaison de deux sources de mosaïque vectorielle réduit le nombre de requêtes HTTP pour récupérer les mosaïques en deux, et la quantité totale de données est légèrement inférieure puisqu’il n’y a qu’un seul en-tête de fichier.

La combinaison de plusieurs jeux de données dans une seule source de mosaïque vectorielle peut être obtenue à l’aide d’un outil tel que Tippecanoe. Les jeux de données peuvent être combinés dans une collection de fonctionnalités unique ou séparés en couches distinctes dans la mosaïque vectorielle appelée couches source. Lors de la connexion d’une source de mosaïque vectorielle à une couche de rendu, vous devez spécifier la couche source qui contient les données que vous souhaitez afficher avec la couche.

Réduire le nombre d’actualisations de canevas en raison de mises à jour de données

Il existe plusieurs façons d'ajouter ou de mettre à jour des données dans une classe DataSource. La liste suivante montre les différentes méthodes et certains éléments à prendre en compte pour garantir de bonnes performances.

• La fonction de sources de données add peut être utilisée pour ajouter une ou plusieurs fonctionnalités à une source de données. Chaque fois que cette fonction est appelée, elle déclenche une actualisation du canevas de la carte. Si vous ajoutez de nombreuses fonctionnalités, associez-les dans un tableau ou une collection de fonctionnalités et transmettez-les une seule fois à cette fonction, au lieu d’effectuer une boucle sur un jeu de données et d’appeler cette fonction pour chaque fonctionnalité.
• La fonction de sources de données setShapes peut être utilisée pour remplacer toutes les formes d’une source de données. En arrière-plan, elle combine les fonctions de sources de données clear et add ensemble et procède à une seule actualisation du canevas de la carte au lieu de deux, ce qui est beaucoup plus rapide. Veillez à utiliser cette fonction lorsque vous souhaitez mettre à jour toutes les données d’une source de données.
• La fonction de sources de données importDataFromUrl peut être utilisée pour charger un fichier GeoJSON via une URL dans une source de données. Une fois que les données ont été téléchargées, elles sont transmises à la fonction add des sources de données. Si le fichier GeoJSON est hébergé sur un autre domaine, assurez-vous que l’autre domaine prend en charge les requêtes inter-domaines (CORs). S’il n’est pas possible de copier les données dans un fichier local sur votre domaine ou de créer un service proxy pour lequel les COR sont activés. Si le fichier est volumineux, envisagez de le convertir en une source de mosaïque vectorielle.
• Si les entités (features) sont wrappées avec la classe Shape, les fonctions addProperty, setCoordinates et setProperties de la forme déclenchent toutes une mise à jour dans la source de données et une actualisation du canevas de la carte. Toutes les fonctionnalités retournées par les fonctions de sources de données getShapes et getShapeById sont automatiquement encapsulées avec la classe Shape. Si vous souhaitez mettre à jour plusieurs formes, il est plus rapide de les convertir au format JSON à l’aide de la fonction toJson des sources de données, de modifier le GeoJSON, puis de transmettre ces données à la fonction setShapes des sources de données.

Évitez d’appeler la fonction Clear des sources de données inutilement

L’appel de la fonction Clear de la classe DataSource entraîne l’actualisation d’un canevas de mappage. Si la fonction clear est appelée plusieurs fois dans une ligne, un retard peut se produire lorsque le mappage attend que chaque actualisation se produise.

Il s’agit d’un scénario courant dans les applications qui effacent la source de données, téléchargent de nouvelles données, effacent à nouveau la source de données, puis ajoutent les nouvelles données à la source de données. En fonction de l’expérience utilisateur souhaitée, les alternatives suivantes seraient préférables.

• Effacez les données avant de télécharger les nouvelles données, puis transmettez les nouvelles données dans la fonction add ou setShapes des sources de données. S’il s’agit du seul jeu de données sur la carte, celle-ci est vide pendant le téléchargement des nouvelles données.
• Téléchargez les nouvelles données, puis transmettez-les à la fonction setShapes de sources de données. Toutes les données de la carte sont alors remplacées.

Supprimer les propriétés et les fonctionnalités inutilisées

Si votre jeu de données contient des fonctionnalités qui ne vont pas être utilisées dans votre application, supprimez-les. De même, supprimez toutes les propriétés des fonctionnalités qui ne sont pas nécessaires. Cela a plusieurs avantages :

• Réduit la quantité de données qui doivent être téléchargées.
• Réduit le nombre de fonctionnalités qui doivent être bouclées lors du rendu des données.
• Peut parfois aider à simplifier ou supprimer les filtres et les expressions pilotées par les données, ce qui signifie moins de traitement nécessaire au moment de l’affichage.

Quand les entités (features) ont beaucoup de propriétés ou de contenus, il est beaucoup plus performant de limiter ce qui est ajouté à la source de données au strict nécessaire pour le rendu et d’avoir une méthode ou un service distinct pour récupérer les autres propriétés ou contenus si besoin. Par exemple, si vous avez un mappage simple affichant des emplacements sur un mappage lorsque vous cliquez, un ensemble de contenu détaillé s’affiche. Si vous souhaitez utiliser le style piloté par les données pour personnaliser la façon dont les emplacements sont affichés sur le mappage, chargez uniquement les propriétés nécessaires dans la source de données. Lorsque vous souhaitez afficher le contenu détaillé, utilisez l’ID de l’entité pour récupérer les autres contenus séparément. Si le contenu est stocké sur le serveur, vous pouvez réduire la quantité de données qui doit être téléchargée lorsque la carte se charge pour la première fois en utilisant un service pour la récupérer de manière asynchrone.

En outre, la réduction du nombre de chiffres significatifs dans les coordonnées des fonctionnalités peut également réduire considérablement la taille des données. Il n’est pas rare que les coordonnées contiennent 12 décimales ou plus. Toutefois, six décimales ont une précision d’environ 0,1 mètre, ce qui est souvent plus précis que la localisation représentée par la coordonnée (six décimales sont recommandées lors de l’utilisation de données de petits endroits, comme les plans intérieurs des bâtiments). Le fait d’avoir plus de six décimales ne fera probablement aucune différence dans la façon dont les données sont affichées et l’utilisateur ne retire aucun bénéfice à télécharger plus de données.

Voici une liste d’outils utiles pour travailler avec des données GeoJSON.

Utiliser une source de données distincte pour modifier rapidement les données

Parfois, il est nécessaire de mettre rapidement à jour les données sur la carte, par exemple pour montrer l’actualisation en temps réel de données de streaming ou d’entités animées. Quand une source de données est mise à jour, le moteur de rendu passe tout en revue et affiche toutes les entités dans la source de données. Améliorez les performances globales en séparant les données statiques des données très changeantes dans les différentes sources de données afin de réduire le nombre d’entités à restituer à chaque mise à jour.

Si vous utilisez des mosaïques de vecteur avec des données actives, un moyen simple de prendre en charge les mises à jour consiste à utiliser l'en-tête de réponse expires. Par défaut, toute couche de mosaïques vectorielles ou de mosaïques raster recharge automatiquement les mosaïques lorsque la date est expires. Les mosaïques de flux de trafic et d’incident du mappage utilisent cette fonctionnalité pour garantir que les données de trafic en temps réel actualisées s’affichent sur le mappage. Cette fonctionnalité peut être définissante l’option de service refreshExpiredTiles du mappage sur false.

Ajuster les options de mémoire tampon et de tolérance dans les sources de données GeoJSON

La classe DataSource convertit les données d’emplacement brutes en mosaïques vectorielles locales pour le rendu à la volée. Ces mosaïques de vecteurs locaux découpent les données brutes dans les limites de la zone de mosaïques avec un peu de mémoire tampon pour garantir un rendu lissé entre les mosaïques. Plus l’option buffer est faible, plus les données qui se chevauchent sont stockées dans les mosaïques de vecteur local et les performances sont meilleures, mais, plus la modification des artefacts de rendu qui se produit est importante. Essayez de peaufiner cette option pour tirer le bon mélange des performances avec des artefacts de rendu minimaux.

La classe DataSource a également une option tolerance qui est utilisée avec l’algorithme de simplification de la Douglas-Peucker lors de la réduction de la résolution des géométries à des fins de rendu. L’augmentation de cette valeur de tolérance réduit la résolution des formes géométriques et améliore les performances. Ajustez cette option pour obtenir la combinaison appropriée de performances et de résolution de la géométriepour votre jeu de données.

Définir l’option de zoom maximale des sources de données GeoJSON

La classe DataSource convertit les données d’emplacement brutes en mosaïques vectorielles locales pour le rendu à la volée. Par défaut, elle effectue cette opération jusqu’au niveau de zoom 18, à partir duquel, lorsqu’il s’agit d’un zoom avant, elle échantillonne les données des mosaïques générées pour le niveau de zoom 18. Cela fonctionne bien pour la plupart des jeux de données nécessitant une haute résolution lorsqu’ils sont zoomés à ces niveaux. Toutefois, lorsque vous travaillez avec des jeux de données qui sont plus susceptibles de s’afficher quand vous faites un zoom arrière, par exemple lors de l’affichage des polygones des États ou des provinces, la définition de l’option minZoom de la source de données sur une valeur inférieure, comme 12, réduit le calcul global, la génération de mosaïques locales et la mémoire utilisée par la source de données, et augmente les performances.

Réduire la réponse GeoJSON

Lorsque vous chargez des données GeoJSON à partir d’un serveur par le biais d’un service ou en chargeant un fichier plat, veillez à ce que les données soient réduites pour supprimer les espaces superflus, ce qui rend la taille du téléchargement supérieure à celle nécessaire.

Accéder à un GeoJSON brut à l’aide d’une URL

Il est possible de stocker des objets GeoJSON dans JavaScript, mais cette opération utilise davantage de mémoire, car leurs copies sont stockées dans la variable que vous avez créée pour eux et l’instance de source de données, qui les gère dans un worker web séparé. Exposez le GeoJSON dans votre application avec une URL et la source de données charge une copie unique des données directement dans le worker web des sources de données.

Optimiser les couches de rendu

Les mappages Azure fournissent plusieurs couches différentes pour le rendu des données sur un mappage. Il existe plusieurs optimisations desquelles vous pouvez tirer profit pour adapter ces couches en fonction de votre scénario, des niveaux de performances accrues et de l’expérience utilisateur générale.

Créer des couches une seule fois et les réutiliser

Le SDK Azure Maps web est piloté par les données. Les données sont placées dans des sources de données qui sont ensuite connectées à des couches de rendu. Si vous souhaitez modifier les données du mappage, mettez à jour les données dans la source de données ou modifiez les options de style sur une couche. C’est souvent plus rapide que de supprimer et de recréer des couches à chaque modification.

Envisager la couche de bulles sur la couche de symboles

La couche de bulles affiche des points sous forme de cercles sur le mappage et peut facilement avoir leur rayon et leur style de couleur à l’aide d’une expression pilotée par les données. Étant donné que le cercle est une forme simple à dessiner pour WebGL, le moteur de rendu est en mesure de les restituer plus vite qu’une couche de symboles, qui doit charger et restituer une image. La différence de niveaux de performance de ces deux couches de rendu est perceptible lors du rendu de dizaines de milliers de points.

Utiliser des marqueurs HTML et des fenêtres contextuelles avec modération

Contrairement à la plupart des couches des contrôles Azure Maps Web qui utilisent WebGL pour le rendu, les marqueurs HTML et les fenêtres contextuelles utilisent des éléments DOM traditionnels pour le rendu. Par conséquent, plus le nombre de marqueurs HTML et les fenêtres contextuelles ajoutés à la page est important, plus il y aura d’éléments DOM. Le niveau de performance peut se dégrader si vous ajoutez plusieurs centaines de marqueurs HTML ou de fenêtres contextuelles. Pour les jeux de données volumineux, envisagez le clustering de vos données ou l’utilisation d’une couche de symboles ou de bulles.

L’exemple de code Réutilisation d’une fenêtre contextuelle avec plusieurs épingles montre comment créer une seule fenêtre contextuelle et la réutiliser en mettant à jour son contenu et sa position. Pour obtenir le code source de cet exemple, consultez Réutilisation d’une fenêtre contextuelle avec plusieurs épingles.

Cela dit, si vous avez seulement quelques points à afficher sur le mappage, la simplicité des marqueurs HTML peut être préférable. En outre, les marqueurs HTML peuvent être facilement glissés si nécessaire.

Combiner des couches

Le mappage est capable d’afficher des centaines de couches, mais plus le nombre de couches est grand, plus il faut de temps pour afficher une scène. Une stratégie pour réduire le nombre de couches consiste à combiner des couches ayant des styles similaires ou pouvant être stylisées à l’aide de styles pilotés par les données.

Par exemple, considérez un jeu de données dans lequel toutes les fonctionnalités ont une propriété isHealthy qui peut avoir la valeur true ou false. Si vous créez une couche de bulles qui restitue différentes bulles de couleur en fonction de cette propriété, il existe plusieurs façons de le faire, comme indiqué dans la liste suivante, de la moins à la plus performante.

• Fractionner les données en deux sources de données en fonction de la valeur isHealthy et attacher une couche de bulles avec une option de couleur codée en dur à chaque source de données.
• Placez toutes les données dans une source de données unique et créez deux couches de bulles avec une option de couleur codée en dur et un filtre basé sur la propriété isHealthy.
• Placez toutes les données dans une source de données unique, créez une couche de bulles unique avec une expression de style case pour l’option de couleur en fonction de la propriété isHealthy. Voici un exemple de code qui illustre cela.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Get the 'isHealthy' property from the feature.
        ['get', 'isHealthy'],

        //If true, make the color 'green'. 
        'green',

        //If false, make the color red.
        'red'
    ]
});

Créer des animations de couche de symboles lisses

La détection de collision est activée par défaut pour les couches de symboles. Cette détection de collision vise à garantir que deux symboles ne se chevauchent pas. Les options d’icône et de texte d’une couche de symboles ont deux options,

• allowOverlap : spécifie si le symbole est visible quand il entre en collision avec d’autres symboles.
• ignorePlacement : spécifie que les autres symboles sont autorisés à entrer en conflit avec le symbole.

Ces deux options ont la valeur false par défaut. Lors de l’animation d’un symbole, les calculs de détection de collision s’exécutent sur chaque image de l’animation, ce qui peut ralentir l’animation et lui donner un aspect moins fluide. Pour lisser l’animation, définissez ces options sur true.

L’exemple de code Animation de symbole simple montre une manière simple d’animer un calque de symbole. Pour obtenir le code source de cet exemple, consultez Exemple de code d’animation de symbole simple.

Spécifier la plage du niveau de zoom

Si vos données répondent à l’un des critères suivants, veillez à spécifier le niveau de zoom minimal et maximal de la couche afin que le moteur de rendu puisse l’ignorer lorsqu’il est en dehors de la plage du niveau de zoom.

• Si les données proviennent d’une source de mosaïque vectorielle, les couches sources des différents types de données sont souvent disponibles uniquement par le biais d’une plage de niveaux de zoom.
• Si vous utilisez une couche de mosaïques qui n’a pas de mosaïque pour tous les niveaux de zoom de 0 à 24 et que vous souhaitez qu’elle effectue le rendu uniquement aux niveaux où elle a des mosaïques et ne tente pas de remplir les mosaïques manquantes avec des mosaïques d’autres niveaux de zoom.
• Si vous souhaitez uniquement afficher une couche à certains niveaux de zoom. Toutes les couches comportent une option minZoom et maxZoom dans laquelle la couche est restituée lorsqu’elle est comprise entre ces niveaux de zoom basés sur cette logique maxZoom > zoom >= minZoom.

Exemple

//Only render this layer between zoom levels 1 and 9. 
var layer = new atlas.layer.BubbleLayer(dataSource, null, {
    minZoom: 1,
    maxZoom: 10
});

Spécifier les limites de la couche de mosaïques et la plage de zoom source

Par défaut, les couches de mosaïque chargent les mosaïques du monde entier. Toutefois, si le service de mosaïques en a uniquement pour une certaine zone, la carte essaie de les charger quand elles sont en dehors de cette zone. Dans ce cas, une demande pour chaque mosaïque est effectuée et attend une réponse qui peut bloquer les autres demandes effectuées par la carte et ralentir ainsi le rendu des autres couches. Si vous spécifiez les limites d’une couche de mosaïques, la carte demande uniquement les mosaïques qui se trouvent dans ces limites. En outre, si la couche de mosaïques est uniquement disponible entre certains niveaux de zoom, spécifiez le zoom source minimal et maximal pour la même raison.

Exemple

var tileLayer = new atlas.layer.TileLayer({
    tileUrl: 'myTileServer/{z}/{y}/{x}.png',
    bounds: [-101.065, 14.01, -80.538, 35.176],
    minSourceZoom: 1,
    maxSourceZoom: 10
});

Utiliser un style de carte vide lorsque le mappage de base n’est pas visible

Si une couche est superposée sur la carte et recouvre entièrement la carte de base, envisagez de définir le style de carte sur blank ou blank_accessible pour que la carte de base ne soit pas restituée. Un scénario courant pour ce faire consiste à superposer une mosaïque de globe complet à l’absence d’opacité ou de zone transparente au-dessus du mappage de base.

Animer en douceur les couches d’images ou de mosaïques

Si vous souhaitez animer une série de couches d’images ou de mosaïques sur le mappage. Il est souvent plus rapide de créer une couche pour chaque image ou couche de mosaïques et de modifier l’opacité que de mettre à jour la source d’une seule couche sur chaque image d’animation. Le masquage d’une couche en affectant à l’opacité la valeur zéro et en présentant une nouvelle couche en définissant son opacité sur une valeur supérieure à zéro est plus rapide que la mise à jour de la source dans la couche. Vous pouvez également activer/désactiver la visibilité des couches, mais veillez à définir la durée de fondu de la couche sur zéro, sinon la couche s’anime lors de son affichage, ce qui entraîne un effet de scintillement puisque la couche précédente aura été masquée avant que la nouvelle couche ne soit visible.

Modifier la logique de détection de collision de la couche de symboles

La couche de symboles a deux options qui existent pour l’icône et le texte nommées allowOverlap et ignorePlacement. Ces deux options spécifient si l’icône ou le texte d’un symbole peut se chevaucher ou être chevauché. Quand la valeur est false, la couche de symboles fait des calculs lors de l’affichage de chaque point pour voir si celui-ci entre en collision avec un autre symbole déjà affiché dans la couche et, le cas échéant, n’affiche pas le symbole en question. C’est parfait pour réduire l’encombrement sur le mappage et réduire le nombre d’objets affichés. En définissant ces options sur false, cette logique de détection de collision est ignorée et tous les symboles sont affichés sur la carte. Ajustez cette option pour obtenir la meilleure combinaison du niveau de performance et d’expérience utilisateur.

Jeux de données de grands points de cluster

Lorsque vous travaillez avec de grands ensembles de points de données, vous pouvez constater que, lorsqu’ils sont rendus à certains niveaux de zoom, un grand nombre des points se chevauchent et ne sont visibles que partiellement, ou pas du tout. Le clustering consiste à regrouper des points rapprochés et de les représenter comme un point en cluster. À mesure que l’utilisateur effectue un zoom avant sur la carte, les clusters se divisent pour laisser apparaître leurs points individuels. Cela peut réduire de manière significative la quantité de données qui doivent être affichées, rendre le mappage moins encombré et améliorer le niveau de performance. La classe DataSource a des options pour le clustering local des données. En outre, de nombreux outils qui génèrent des mosaïques vectorielles ont également des options de clustering.

En outre, augmentez la taille du rayon du cluster pour améliorer le niveau de performance. Plus le rayon de cluster est grand, moins il y a de points clusterisés pour le suivi et l’affichage. Pour plus d’informations, consultez Clustering de données de point dans le SDK web.

Utiliser des cartes thermiques en cluster pondérées

La couche de carte thermique peut rendre facilement des dizaines de milliers de points de données. Pour les jeux de données plus volumineux, envisagez d’activer le clustering sur la source de données et d’utiliser un petit rayon de cluster et utilisez la propriété clusters point_count comme poids pour le mappage de la hauteur. Lorsque le rayon de cluster est limité à quelques pixels, il y a peu de différence visuelle dans la carte thermique affichée. L’utilisation d’un rayon de cluster plus grand améliore les performances, mais peut réduire la résolution de la carte thermique affichée.

var layer = new atlas.layer.HeatMapLayer(source, null, {
   weight: ['get', 'point_count']
});

Pour plus d’informations, consultez Clustering et couche de cartes thermiques.

Réduire la taille des ressources d’image

Des images peuvent être ajoutées au sprite d’images des mappages pour afficher des icônes dans une couche de symboles ou des modèles dans une couche de polygones. Diminuez la taille de ces images pour réduire la quantité de données qui doivent être téléchargées et la quantité d’espace qu’ils occupent dans le sprite d’images des mappages. Lorsque vous utilisez une couche de symboles qui met à l’échelle l’icône à l’aide de l’option size, utilisez une image qui correspond à la taille maximale d’affichage de votre plan sur le mappage et pas plus. Cela garantit que l’icône est affichée avec une haute résolution tout en minimisant les ressources qu’elle utilise. De plus, les SVG peuvent également être utilisés sous un format de fichier plus petit pour les images d’icône simples.

Optimiser les expressions

Les expressions de style pilotées par les données offrent flexibilité et puissance pour le filtrage et le style des données sur la carte. Les expressions peuvent être optimisées de plusieurs façons. Voici quelques astuces.

Simplifier les filtres

Filtre une boucle sur toutes les données d’une source de données et vérifie si chaque filtre correspond à la logique du filtre. Si les filtres deviennent complexes, cela peut entraîner des problèmes de performances. Voici quelques stratégies possibles pour y remédier.

• Si vous utilisez des mosaïques vectorielles, divisez les données en différentes couches sources.
• Si vous utilisez la classe DataSource, divisez ces données en sources de données distinctes. Essayez d’équilibrer le nombre de sources de données avec la complexité du filtre. Un trop grand nombre de sources de données peut entraîner des problèmes de performances. Par conséquent, vous devrez peut-être effectuer des tests pour savoir ce qui convient le mieux à votre scénario.
• Lorsque vous utilisez un filtre complexe sur une couche, envisagez d’utiliser plusieurs couches avec des expressions de style pour réduire la complexité du filtre. Évitez de créer une série de couches avec des styles codés en dur lorsque les expressions de style peuvent être utilisées comme un grand nombre de couches, ce qui peut également entraîner des problèmes de performances.

Veillez à ce que les expressions ne produisent pas d’erreurs

Les expressions sont souvent utilisées pour générer du code afin d’effectuer des calculs ou des opérations logiques au moment du rendu. Tout comme le code dans le reste de votre application, assurez-vous que les calculs et la logique sont appropriés et ne sont pas susceptibles d’engendrer des erreurs. Les erreurs dans les expressions entraînent des problèmes lors de l’évaluation de l’expression, ce qui peut entraîner des problèmes de diminution des performances et de rendu.

L’une des erreurs courantes à prendre en compte consiste à avoir une expression qui s’appuie sur une propriété de fonctionnalité qui peut ne pas exister sur toutes les fonctionnalités. Par exemple, le code suivant utilise une expression pour définir la propriété de couleur d’une couche de bulles sur la propriété myColor d’une fonctionnalité.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: ['get', 'myColor']
});

Le code ci-dessus fonctionne bien si toutes les entités de la source de données ont une propriété myColor et que la valeur de cette propriété est une couleur. Cela peut ne pas être un problème si vous avez un contrôle total sur les données de la source de données et que vous savez que toutes les entités auront une couleur valide dans une propriété myColor. Cela dit, pour rendre ce code protégé contre les erreurs, une expression case peut être utilisée avec l'expression has pour vérifier que la fonctionnalité possède la propriété myColor. Si c’est le cas, l'expression de type to-color peut ensuite être utilisée pour essayer de convertir la valeur de cette propriété en couleur. Si la couleur n’est pas valide, une couleur de secours peut être utilisée. Le code suivant montre comment effectuer cette opération et définit la couleur de secours sur le vert.

var layer = new atlas.layer.BubbleLayer(source, null, {
    color: [
        'case',

        //Check to see if the feature has a 'myColor' property.
        ['has', 'myColor'],

        //If true, try validating that 'myColor' value is a color, or fallback to 'green'. 
        ['to-color', ['get', 'myColor'], 'green'],

        //If false, return a fallback value.
        'green'
    ]
});

Ordonner des expressions booléennes de la plus à la moins spécifique

Réduisez le nombre total de tests conditionnels requis lors de l’utilisation d’expressions booléennes qui contiennent plusieurs tests conditionnels en les triant du plus spécifique au moins spécifique.

Simplifier les expressions

Les expressions peuvent être puissantes et parfois complexes. Plus l’expression est simple, plus son évaluation est rapide. Par exemple, si une comparaison simple est nécessaire, une expression comme ['==', ['get', 'category'], 'restaurant'] serait préférable à l’utilisation d’une expression de correspondance comme ['match', ['get', 'category'], 'restaurant', true, false]. Dans ce cas, si la propriété en cours de vérification est une valeur booléenne, une expression get est encore plus simple ['get','isRestaurant'].

Résolution des problèmes du kit de développement logiciel (SDK) Web

Voici quelques conseils pour déboguer certains des problèmes courants rencontrés lors du développement avec le kit de développement logiciel (SDK) Azure Maps Web.

Pourquoi le mappage ne s’affiche-t-il pas lorsque je charge le contrôle Web ?

Points à vérifier :

• Veillez à vous charger de vos options d’authentification dans la carte. Sans authentification, la carte charge un canevas vide et retourne une erreur 401 sous l’onglet réseau des outils de développement du navigateur.
• Vérifiez que vous disposez d’une connexion Internet.
• Consultez la console pour rechercher les erreurs des outils de développement du navigateur. Certaines erreurs peuvent empêcher l’affichage du mappage. Déboguez votre application.
• Assurez-vous d’utiliser un navigateur pris en charge.

Toutes mes données sont affichées de l’autre côté du monde, que se passe-t-il ?

Les coordonnées, également appelées positions, des kits de développement logiciel (SDK) Azure Maps s’alignent sur le format de la norme industrielle [longitude, latitude]. Ce même format est également la manière dont les coordonnées sont définies dans le schéma GeoJSON ; données principales mises en forme utilisées dans les kits de développement logiciel (SDK) Azure Maps. Si vos données s’affichent à l’autre bout de la Terre, les valeurs de longitude et de latitude sont probablement inversées dans vos informations de coordonnées/positions.

Pourquoi les marqueurs HTML apparaissent-ils à un emplacement incorrect dans le contrôle web ?

Points à vérifier :

• Si vous utilisez du contenu personnalisé pour le marqueur, assurez-vous que les options anchor et pixelOffset sont correctes. Par défaut, le centre en bas du contenu est aligné sur la position sur le mappage.
• Assurez-vous que le fichier CSS pour Azure Maps a été chargé.
• Inspectez l’élément DOM du marqueur HTML pour voir si une CSS de votre application s’est ajoutée au marqueur et affecte sa position.

Pourquoi les icônes ou le texte de la couche de symboles apparaissent-ils au mauvais endroit ?

Vérifiez que les options anchor et offset sont correctement configurées pour s’aligner sur la partie de l’image ou du texte que vous souhaitez aligner avec la coordonnée de la carte. Si le symbole n’est simplement pas à sa place lors de la rotation du mappage, activez l'option rotationAlignment. Par défaut, les symboles pivotent avec le point de vue des cartes pour s’afficher face à l’utilisateur. Toutefois, selon votre scénario, il peut être souhaitable de bloquer le symbole sur l’orientation de la carte en définissant l’option rotationAlignment sur map.

Si le symbole n’est simplement pas à sa place lors de l’inclinaison du mappage, vérifiez l'option pitchAlignment. Par défaut, les symboles ne bougent pas dans le point de vue de la carte lorsque la carte est inclinée. Toutefois, selon votre scénario, il peut être souhaitable de bloquer le symbole sur l’inclinaison de la carte en définissant l’option pitchAlignment sur map.

Pourquoi certaines de mes données ne s’affichent-elles pas sur le mappage ?

Points à vérifier :

• Consultez la console pour rechercher les erreurs des outils de développement du navigateur.
• Assurez-vous qu’une source de données a été créée et ajoutée au mappage et que la source de données a été connectée à une couche de rendu qui a également été ajoutée au mappage.
• Ajoutez des points d’arrêt dans votre code et exécutez-le pas à pas. Vérifiez que les données sont ajoutées à la source de données et que la source de données et les couches sont ajoutées à la carte.
• Essayez de supprimer des expressions pilotées par les données de votre couche de rendu. Il est possible que l’une d’entre elles ait une erreur qui est à l’origine du problème.

Puis-je utiliser le kit de développement logiciel (SDK) Azure Maps Web dans un iframe de bac à sable ?

Oui.

Obtenir de l’aide

Voici les différentes façons d’obtenir un support technique pour Azure Maps en fonction de votre problème.

Comment faire signaler un problème de données ou un problème avec une adresse ?

Signalez les problèmes en utilisant le site de commentaires d’Azure Maps. Des instructions détaillées sur le signalement des problèmes liés aux données sont fournies dans l’article Fournir des commentaires sur les données à Azure Maps.

Notes

Chaque problème soumis génère une URL unique permettant d’en effectuer le suivi. Les temps de résolution varient en fonction du type de problème et du temps nécessaire pour vérifier que le changement est correct. Les changements sont indiqués dans la mise à jour hebdomadaire des services d’affichage, tandis que d’autres services, comme le géocodage et le routage, sont mis à jour tous les mois.

Comment signaler un bogue dans un service ou une API ?

Signalez les problèmes dans la page Aide et support d’Azure en sélectionnant le bouton Créer une demande de support.

Où puis-je obtenir de l’aide technique pour Azure Maps ?

• Pour les questions relatives au visuel Power BI Azure Maps, contactez le support Power BI.

• Concernant tous les autres services Azure Maps, contactez le support Azure.

• Concernant les questions ou commentaires sur des fonctionnalités Azure Maps spécifiques, utilisez les forums des développeurs Azure Maps.

Étapes suivantes

Consultez les articles suivants pour obtenir des conseils supplémentaires sur l’amélioration de l’expérience utilisateur dans votre application.

Rendre votre application accessible

En savoir plus sur la terminologie utilisée par Azure Maps et le secteur géospatial.

Glossaire Azure Maps