Ajouter une couche de bulles à une carte

Article
08/27/2024

Cet article vous montre comment afficher des données de point sur une carte à partir d’une source de données telle qu’un calque de bulles sur une carte. Les couches de bulles affichent sur la carte des points sous la forme de cercles, avec un rayon de pixels fixe.

Conseil

Les couches de bulles par défaut affichent les coordonnées de toutes les données géométriques d’une source de données. Pour limiter la couche afin qu’elle n’affiche que les fonctionnalités de géométrie de point, définissez la propriété filter de la couche sur ['==', ['geometry-type'], 'Point'] ou ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] si vous voulez également inclure les fonctionnalités MultiPoint.

Ajouter un calque de bulles

Le code suivant charge un tableau de points dans une source de données. Ensuite, il connecte les points de données à une couche de bulles. Le calque de bulle affiche chaque bulle avec un rayon de six pixels et une largeur de trait de trois pixels.

/*Ensure that the map is fully loaded*/
map.events.add("load", function () {

  /*Add point locations*/
  var points = [
    new atlas.data.Point([-73.985708, 40.75773]),
    new atlas.data.Point([-73.985600, 40.76542]),
    new atlas.data.Point([-73.985550, 40.77900]),
    new atlas.data.Point([-73.975550, 40.74859]),
    new atlas.data.Point([-73.968900, 40.78859])]

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

  //Create a bubble layer to render the filled in area of the circle, and add it to the map.*/
  map.layers.add(new atlas.layer.BubbleLayer(dataSource, null, {
    radius: 6,
    strokeColor: "LightSteelBlue",
    strokeWidth: 3, 
    color: "DodgerBlue",
    blur: 0.5
  }));
});

Capture d'écran d'une carte affichant cinq cercles bleus, c'est-à-dire des points situés aux endroits spécifiés.

Afficher les étiquettes avec une couche de bulles

Le code vous montre comment utiliser une couche de bulles pour afficher un point sur la carte et une couche de symboles pour afficher une étiquette. Pour masquer l’icône de la couche de symboles, affectez la valeur none à la propriété image des options d’icône.

//Create an instance of the map control and set some options.
 function InitMap() {
 
    var map = new atlas.Map('myMap', {
    center: [-122.336641, 47.627631],
    zoom: 16,
    view: "Auto",
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    /*Ensure that the map is fully loaded*/
    map.events.add("load", function () {

        /*Create point object*/
        var point =  new atlas.data.Point([-122.336641,47.627631]);

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

        map.layers.add(new atlas.layer.BubbleLayer(dataSource, null, {
            radius: 5,
            strokeColor: "#4288f7",
            strokeWidth: 6, 
            color: "white" 
        }));

        //Add a layer for rendering point data.
        map.layers.add(new atlas.layer.SymbolLayer(dataSource, null, {
            iconOptions: {
                //Hide the icon image.
                image: "none"
            },

            textOptions: {
                textField: "Museum of History & Industry (MOHAI)",
                color: "#005995",
                offset: [0, -2.2]
            },
        }));
    });
}

Capture d'écran d'une carte affichant un point sur la carte avec une étiquette.

Personnaliser une couche de bulles

La couche de bulles ne dispose que de quelques options de style. Utilisez l’exemple Options de la couche de bulles pour les essayer. Pour obtenir le code source de cet exemple, consultez Code source des options de la couche de bulles.

Capture d’écran de l’exemple d’options de calque de bulle qui montre une carte avec des bulles et des options de calque de bulle sélectionnables à gauche de la carte.