Partager via

Ajouter une couche de données simple

  • Article

Le Kit de développement logiciel (SDK) web d’Azure Maps fournit un module d’E/S spatial qui inclut une classe SimpleDataLayer. Cette classe facilite le rendu des fonctionnalités stylisées sur une carte. Elle peut même afficher des jeux de données qui ont des propriétés de style et des jeux de données qui contiennent des types de géométrie mixtes.

La couche de données simple permet d’obtenir cette fonctionnalité en enveloppant plusieurs couches de rendu et en utilisant des expressions de style. Les expressions de style recherchent des couches encapsulées pour les propriétés de style courantes. Les fonctions atlas.io.read et atlas.io.write utilisent ces propriétés pour lire et écrire des styles dans un format de fichier pris en charge. Lorsque vous ajoutez des propriétés à un format de fichier pris en charge, vous pouvez utiliser le fichier à des fins telles que l’affichage des fonctionnalités de style sur une carte.

La classe SimpleDataLayer fournit également une fonctionnalité contextuelle intégrée avec un modèle contextuel. La fenêtre contextuelle s’affiche lorsqu’une fonctionnalité est sélectionnée. Cette couche prend également en charge les données en cluster. Lorsqu’un cluster est sélectionné, la carte effectue un zoom avant sur le cluster et la développe en points individuels et sous-cluster. Vous pouvez désactiver la fonctionnalité contextuelle si vous n’en avez pas besoin.

La classe SimpleDataLayer est destinée à être utilisée sur des jeux de données volumineux qui incluent des fonctionnalités avec de nombreux types et styles géométriques appliqués. Lorsque vous utilisez cette classe, elle ajoute une surcharge de six couches qui contiennent des expressions de style. Si vous n’avez besoin d’afficher que quelques types et styles géométriques sur une fonctionnalité, il peut être plus efficace d’utiliser une couche de rendu principale. Pour plus d’informations, consultez Ajouter une couche de bulles à la carte, Ajouter un calque de lignes à la carteet Ajouter une couche de polygones à la carte.

Utiliser une couche de données simple

Vous pouvez utiliser la classe SimpleDataLayer comme les autres couches de rendu. Le code suivant montre comment utiliser une couche de données simple dans une carte :

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

L’extrait de code suivant montre comment utiliser une couche de données simple qui référence des données à partir d’une source en ligne :

<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>

<script>
    function InitMap() {
        var map = new atlas.Map("myMap", {
            center: [-73.967605, 40.780452],
            zoom: 12,
            view: "Auto",

            //Add authentication details to connect to Azure Maps.
            authOptions: {
                // Get an Azure Maps key at https://azuremaps.com/.
                authType: "subscriptionKey",
                subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
            }
        });

        //Wait until the map resources are ready.
        map.events.add("ready", function () {
            //Create a data source and add it to the map.
            var datasource = new atlas.source.DataSource();
            map.sources.add(datasource);

            //Add a simple data layer for rendering data.
            var layer = new atlas.layer.SimpleDataLayer(datasource);
            map.layers.add(layer);

            //Load an initial data set.
            const dataSet = {
                type: "FeatureCollection",
                bbox: [0, 0, 0, 0],
                features: [
                    {
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: [0, 0]
                        },
                        properties: {
                            color: "red"
                        }
                    }
                ]
            };

            loadDataSet(dataSet);

            function loadDataSet(r) {
                //Update the features in the data source.
                datasource.setShapes(r);

                //If bounding box information is known for data, set the map view to it.
                if (r.bbox) {
                    map.setCamera({
                        bounds: r.bbox,
                        padding: 50
                    });
                }
            }
        });
    }
</script>

Lorsque vous ajoutez des fonctionnalités à la source de données, la couche de données simple les affiche de la manière la plus appropriée. Vous pouvez définir des styles en tant que propriétés pour chaque fonctionnalité individuelle.

Le code d’exemple précédent montre une entité ponctuelle GeoJSON (Geographic JavaScript Object Notation) avec une propriété color définie sur red.

L’exemple de code affiche la fonctionnalité de point à l’aide de la couche de données simple, et le résultat s’affiche comme suit.

Capture d’écran d’une carte dont les coordonnées sont 0, 0 et qui montre un point rouge sur de l’eau bleue. Le point rouge a été ajouté à l’aide de la couche des symboles.

Remarque

La valeur de la source de données "coordinates": [0, 0] remplace les coordonnées center: [-73.967605, 40.780452] que vous avez définies lors de l’initialisation de la carte.

La couche de données simple est un outil puissant dans les scénarios suivants :

  • Une source de données comprend plusieurs types de fonctionnalités.
  • Les fonctionnalités du jeu de données ont plusieurs propriétés de style définies individuellement.
  • Vous ne savez pas ce que contient le jeu de données.

Par exemple, lorsque vous analysez des flux de données XML, il se peut que vous ne connaissiez pas le style et les types de géométrie des entités. L’exemple des Options de la couche de données simple illustre comment la couche de données simple restitue les fonctionnalités d’un fichier KML (Keyhole Markup Language). Vous pouvez également voir les options de la classe SimpleDataLayer. Pour obtenir le code source de cet exemple, consultez Couche de données simple options.html dans les exemples de code Azure Maps de GitHub.

Capture d’écran de la carte avec un panneau à gauche montrant des options de couche de données simples.

Remarque

Cette couche de données simple utilise la classe modèle de fenêtre contextuelle pour afficher des bulles KML ou des propriétés de fonctionnalité sous forme de tableau. Par défaut, tout le contenu affiché dans la fenêtre contextuelle est en bac à sable à l’intérieur d’un iFrame en tant que fonctionnalité de sécurité. Toutefois, des limitations s’appliquent :

  • Toutes les fonctionnalités de verrouillage du pointeur, les fonctionnalités de navigation supérieure, les scripts et les formulaires sont désactivés. Les liens peuvent s’ouvrir dans un nouvel onglet lorsqu’ils sont sélectionnés.
  • Les navigateurs plus anciens qui ne prennent pas en charge le paramètre srcdoc sur les iFrames ne peuvent afficher qu’une petite quantité de contenu.

Si vous approuvez les données chargées dans les fenêtres contextuelles et souhaitez que les scripts contextuels puissent accéder à votre application, vous pouvez désactiver cette fonctionnalité. Définissez simplement l’option sandboxContent dans le modèle contextuel sur false.

Propriétés de style prises en charge par défaut

La couche de données simple enveloppe plusieurs des couches de rendu principales : bulle, symbole, ligne, polygone et polygone extrudé. Elle utilise des expressions pour rechercher des propriétés de style valides sur des fonctionnalités individuelles.

Les deux principaux ensembles de noms de propriétés pris en charge sont Azure Maps et GitHub. La plupart des noms de propriétés des options de couche Azure Maps sont pris en charge dans la couche de données simple en tant que propriétés de style des fonctionnalités. Certaines options de couche incluent des expressions qui prennent en charge les noms de propriétés de style couramment utilisés par GitHub.

La prise en charge du mappage GeoJSON de GitHub définit ces noms de propriétés qui sont utilisés pour styliser des fichiers GeoJSON qui sont stockés et rendus au sein de la plateforme. La plupart des propriétés de style de GitHub sont prises en charge dans la couche de données simple, à l’exception des propriétés de style marker-symbol.

Si le lecteur traverse une propriété de style moins courante, il le convertit en propriété de style Azure Maps la plus similaire. En outre, vous pouvez remplacer les expressions de style par défaut à l’aide de la fonction getLayers de la couche de données simple et mettre à jour les options sur l’une des couches.

Les sections suivantes fournissent des détails sur les propriétés de style par défaut prises en charge par la couche de données simple. L’ordre du nom de propriété pris en charge représente également la priorité. Si deux propriétés de style sont définies pour la même option de couche, la première de la liste est prioritaire. Les couleurs peuvent être n’importe quelle valeur de couleur CSS3 (HEX, RVB, RVBA, HSL, HSLA) ou valeur de couleur nommée.

Propriétés de style de la couche de bulles

Si une fonctionnalité est un Point ou un MultiPoint, et n’a pas de propriété d’image permettant d’utiliser une icône personnalisée pour représenter le point sous forme de symbole, elle est alors rendue avec un BubbleLayer.

Option de couche Noms de propriétés pris en charge Valeur par défaut
color color, marker-color '#1A73AA'
radius size 1, marker-size2, scale1 8
strokeColor strokeColor, stroke '#FFFFFF'

1 Les valeurs de taille et d’échelle sont considérées comme des valeurs scalaires et sont multipliées par 8.

2 Si l’option marker-size de GitHub est spécifiée, le rayon utilise les valeurs suivantes :

Taille de marqueur Radius
small 6
medium 8
large 12

Les clusters sont également rendus dans la couche de bulles. Par défaut, le rayon d’un cluster est défini sur 16. La couleur du cluster varie en fonction due nombre de points dans le cluster, comme indiqué dans la table suivante :

Nombre de points Couleur
>= 100 red
>= 10 yellow
<= 10 green

Propriétés de style de symbole

Si une fonctionnalité est un Point ou MultiPoint, avec une propriété d’image utilisée comme icône personnalisée pour afficher le point sous forme de symbole, elle est rendue avec un SymbolLayer.

Option de couche Noms de propriétés pris en charge Valeur par défaut
image image none
size size, marker-size1 1
rotation rotation 0
offset offset [0, 0]
anchor anchor 'bottom'

1 Si l’option marker-size de GitHub est spécifiée, les valeurs suivantes sont utilisées pour l’option de taille d’icône :

Taille de marqueur Taille du symbole
small 0.5
medium 1
large 2

Si la fonctionnalité Point est un cluster, la propriété point_count_abbreviated s’affiche sous la forme d’une étiquette de texte. Aucune image n’est affichée.

Propriétés de style de ligne

Si la fonctionnalité est un LineString, MultiLineString, Polygonou MultiPolygon, elle est rendue avec un LineLayer.

Option de couche Noms de propriétés pris en charge Valeur par défaut
strokeColor strokeColor, stroke '#1E90FF'
strokeWidth strokeWidth, stroke-width, stroke-thickness 3
strokeOpacity strokeOpacity, stroke-opacity 1

Propriétés de style de polygone

Si la fonctionnalité est un Polygon ou un MultiPolygon, et qu’elle ne possède pas de propriété height ou que la propriété height vaut zéro, elle est alors rendue avec un PolygonLayer.

Option de couche Noms de propriétés pris en charge Valeur par défaut
fillColor fillColor, fill '#1E90FF'
fillOpacity fillOpacity, 'fill-opacity 0.5

Propriétés de style de polygone extrudé

Si la fonctionnalité est un Polygon ou un MultiPolygon, et a une propriété de hauteur avec une valeur supérieure à zéro, elle est rendue avec un PolygonExtrusionLayer.

Option de couche Noms de propriétés pris en charge Valeur par défaut
base base 0
fillColor fillColor, fill '#1E90FF'
height height 0

Contenu connexe

En savoir plus sur les classes et méthodes de cet article :

Pour obtenir plus d’exemples de code à ajouter à vos cartes, consultez les articles suivants :