Adicionar uma camada de bolha a um mapa

Este artigo mostra-lhe como compor dados de pontos de uma origem de dados como uma camada de bolhas num mapa. As camadas de bolhas compõem pontos como círculos no mapa com um raio de pixel fixo.

Dica

Por predefinição, as camadas de bolhas comporão as coordenadas de todas as geometrias numa origem de dados. Para limitar a camada de forma a que apenas compona funcionalidades de geometria de ponto, defina a filter propriedade da camada para ['==', ['geometry-type'], 'Point'] ou ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] se também pretende incluir funcionalidades do MultiPoint.

Adicionar uma camada de bolha

O código seguinte carrega uma matriz de pontos para uma origem de dados. Em seguida, liga os pontos de dados a uma camada de bolhas. A camada de bolha compõe cada bolha com um raio de seis píxeis e uma largura de traço de três píxeis.

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

Mostrar etiquetas com uma camada de bolhas

Este código mostra-lhe como utilizar uma camada de bolhas para compor um ponto no mapa e uma camada de símbolo para compor uma etiqueta. Para ocultar o ícone da camada de símbolo, defina a image propriedade das opções do ícone como none.

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

Personalizar uma camada de bolhas

A camada Bolha tem apenas algumas opções de estilo. Utilize o exemplo Opções de Camada de Bolhas para experimentá-las. Para obter o código fonte deste exemplo, veja Código fonte de Opções de Camada de Bolhas.

Passos seguintes

Saiba mais sobre as classes e métodos utilizados neste artigo:

BubbleLayer

BubbleLayerOptions

Veja os seguintes artigos para obter mais exemplos de código para adicionar aos mapas:

Criar uma origem de dados

Adicionar uma camada de símbolo

Utilizar expressões de estilo com base em dados

Amostras de código