Adicionar uma camada de bolha a um mapa

Artigo
08/27/2024

Este artigo mostra como você pode renderizar os dados de ponto de uma fonte de dados como uma camada de bolhas em um mapa. As camadas de bolhas renderizam pontos como círculos no mapa com raio de pixel fixo.

Dica

As camadas de bolha por padrão processarão as coordenadas de todas as geometrias em uma fonte de dados. Para limitar a camada de modo que ela renderize apenas os recursos de geometria de ponto, defina a propriedade filter da camada como ['==', ['geometry-type'], 'Point'] ou ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], caso também queira incluir recursos MultiPoint.

Adicionar uma camada de bolha

O código a seguir carrega uma matriz de pontos em uma fonte de dados. Em seguida, ele conecta os pontos de dados a uma camada de bolha. A camada de bolha renderiza cada bolha com um raio de seis pixels e uma largura do traço de três 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
  }));
});

Captura de tela mostrando um mapa exibindo cinco círculos azuis ou pontos nos locais especificados.

Mostrar rótulos de uma camada de bolha

Este código mostra como usar uma camada de bolhas para renderizar um ponto no mapa e uma camada de símbolo para renderizar um rótulo. Para ocultar o ícone da camada de símbolo, defina a propriedade image das opções de í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]
            },
        }));
    });
}

Captura de tela mostrando um mapa exibindo um ponto no mapa com um rótulo.

Personalizar uma camada de bolha

A camada de bolha tem apenas algumas opções de estilo. Use as Opções de camada de bolhas de exemplo para experimentar. Para obter o código-fonte deste exemplo, confira Código-fonte de Opções de camada de bolhas.

Captura de tela mostrando o exemplo de Opções de camada de bolhas que mostra um mapa com bolhas e opções de camada de bolhas selecionáveis à esquerda do mapa.