Adición de una capa de burbuja a un mapaAdd a bubble layer to a map

En este artículo se explica cómo puede representar datos de punto de un origen de datos como una capa de burbuja en un mapa.This article shows you how you can render point data from a data source as a bubble layer on a map. Las capas de burbuja representan puntos como círculos en el mapa con un radio de píxel fijo.Bubble layers render points as circles on the map with fixed pixel radius.

Sugerencia

Las capas de burbuja de forma predeterminada representarán las coordenadas de todos los objetos geométricos en un origen de datos.Bubble layers by default will render the coordinates of all geometries in a data source. Para limitar la capa de forma que solo represente las características de geometría de puntos, configure la propiedad filter de la capa en ['==', ['geometry-type'], 'Point'] o ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] si desea incluir también las características de MultiPoint.To limit the layer such that it only renders point geometry features set the filter property of the layer to ['==', ['geometry-type'], 'Point'] or ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] if you want to include MultiPoint features as well.

Adición de una capa de burbujaAdd a bubble layer

En el código siguiente se carga una matriz de puntos en un origen de datos y se conecta a una capa de burbuja.The following code loads an array of points into a data source and connects it to a bubble layer. La capa de burbuja tiene opciones para representar el radio de cada burbuja en cinco píxeles, un color de relleno en blanco, un color de trazo en azul y el ancho del trazo de seis píxeles.The bubble layer is given options to render the radius of each bubble at five pixels, a fill color of white, a stroke color of blue, and stroke width of six pixels.

//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 multiple 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: 5,
    strokeColor: "#4288f7",
    strokeWidth: 6, 
    color: "white" 
}));

A continuación se muestra el código de ejemplo de ejecución completo de la funcionalidad anterior.Below is the complete running code sample of the above functionality.


Mostrar etiquetas con una capa de burbujaShow labels with a bubble layer

En el código siguiente se muestra cómo usar una capa de burbuja para representar un punto en el mapa y una capa de símbolos para representar una etiqueta.The following code shows you how to use a bubble layer to render a point on the map and a symbol layer to render a label. Para ocultar el icono de la capa de símbolo, establezca la propiedad image de las opciones del icono en 'none'.To hide the icon of the symbol layer, set the image property of the icon options to 'none'.


Personalización de una capa de burbujaCustomize a bubble layer

La capa de burbuja solo tiene algunas opciones de estilo.The Bubble layer only has a few styling options. Esta es una herramienta para probarlas.Here is a tool to try them out.


Pasos siguientesNext steps

Más información sobre las clases y los métodos utilizados en este artículo:Learn more about the classes and methods used in this article:

Para obtener más ejemplos de código para agregar a los mapas:See the following articles for more code samples to add to your maps: