Adición de una capa de símbolo a un mapaAdd a symbol layer to a map

Un símbolo puede estar conectado a un origen de datos y usarse para representar un icono o texto en un punto determinado.A symbol can be connected up to a data source and used to render an icon and/or text at a given point. Las capas de símbolos se representan mediante WebGL y se pueden usar para representar grandes colecciones de puntos en el mapa.Symbol layers are rendered using WebGL and can be used to render large collections of points on the map. Esta capa puede representar muchos más datos de puntos en el mapa, con un buen rendimiento, que los que se pueden lograr con marcadores HTML.This layer can render a lot more point data on the map, with good performance, than what is achievable using HTML markers. Sin embargo, la capa de símbolos no es compatible con los elementos CSS y HTML tradicionales para aplicar estilos.However, the symbol layer doesn't support traditional CSS and HTML elements for styling.

Sugerencia

De forma predeterminada, las capas de símbolo representarán las coordenadas de todos los objetos geométricos en un origen de datos.Symbol 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 símboloAdd a symbol layer

Para agregar una capa de símbolos a los datos del mapa y de representación, primero es necesario crear un origen de datos y agregar el mapa.To add a symbol layer to the map and render data, a data source first needs to be created and added the map. Después, se puede crear una capa de símbolos y pasarla en el origen de datos para recuperar los datos.A symbol layer can then be created and passed in the data source to retrieve the data from. Por último, los datos deben agregarse en el origen de datos para que haya algo que representar.Finally, data needs to be added into the data source so that there is something to be rendered. En el código siguiente se muestra el código que debe agregarse al mapa una vez que se ha cargado para representar un único punto en el mapa mediante una capa de símbolos.The following code shows the code that should be added to the map after it has loaded to render a single point on the map using a symbol layer.

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

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

Hay cuatro tipos diferentes de datos de punto que se pueden agregar al mapa:There are four different types of point data to that can be added to the map:

  • Geometría Point de GeoJSON: Este objeto solo contiene una coordenada de un punto y nada más.GeoJSON Point geometry - This object only contains a coordinate of a point and nothing else. La clase auxiliar atlas.data.Point se puede usar para crear fácilmente estos objetos.The atlas.data.Point helper class can be used to easily create these objects.
  • Geometría MultiPoint de GeoJSON: Este objeto contiene las coordenadas de varios puntos, pero nada más.GeoJSON MultiPoint geometry - This object contains the coordinates of multiple points but nothing else. La clase auxiliar atlas.data.MultiPoint se puede usar para crear fácilmente estos objetos.The atlas.data.MultiPoint helper class can be used to easily create these objects.
  • GeoJSON Feature: Este objeto se compone de cualquier geometría GeoJSON y un conjunto de propiedades que contienen metadatos asociados a la geometría.GeoJSON Feature - This object consists of any GeoJSON geometry and a set of properties that contain metadata associated to the geometry. La clase auxiliar atlas.data.Feature se puede usar para crear fácilmente estos objetos.The atlas.data.Feature helper class can be used to easily create these objects.
  • La clase atlas.Shape es similar a GeoJSON Feature en que se compone de una geometría GeoJSON y un conjunto de propiedades que contienen metadatos asociados a la geometría.atlas.Shape class is similar to the GeoJSON feature in that it consists of a GeoJSON geometry and a set of properties that contain metadata associated to the geometry. Sin embargo, si se agrega un objeto GeoJSON a un origen de datos, puede representarse fácilmente en una capa; no obstante, si se actualiza la propiedad coordinates de ese objeto GeoJSON, el origen de datos y el mapa no cambian, ya que no hay ningún mecanismo en el objeto JSON para desencadenar una actualización.If a GeoJSON object is added to a data source it can easily be rendered in a layer, however, if the coordinates property of that GeoJSON object is updated, the data source and map don't change as there is no mechanism in the JSON object to trigger an update. La clase Shape proporciona funciones para actualizar los datos que contiene y, cuando se hace un cambio, se notifica al origen de datos y al mapa y se actualizan automáticamente.The shape class provides functions for updating the data it contains, and when a change is made, the data source and map are automatically notified and updated.

En el ejemplo de código siguiente se crea una geometría Point de GeoJSON y se pasa a la clase atlas.Shape para facilitar su actualización.The following code sample creates a GeoJSON Point geometry and passes it into the atlas.Shape class to make it easy to update. El centro del mapa se usa inicialmente para representar un símbolo.The center of the map is used initially to render a symbol. Se agrega un evento click al mapa, de modo que, cuando se activa, las coordenadas de donde se hizo clic con el mouse se usan con la función setCoordinates de la forma, lo que actualiza la ubicación del símbolo en el mapa.A click event is added to the map such that when it fires, the coordinates of where the mouse was clicked are used with the shapes setCoordinates function that updates the location of the symbol on the map.


Sugerencia

De forma predeterminada, para el rendimiento, las capas de símbolos optimizan la representación de los símbolos ocultando los símbolos que se superponen.By default, for performance, symbol layers optimize the rendering of symbols by hiding symbols that overlap. A medida que se acerca, los símbolos ocultos se hacen visibles.As you zoom in the hidden symbols become visible. Para deshabilitar esta característica y representar todos los símbolos en todo momento, establezca la propiedad allowOverlap de las opciones iconOptions en true.To disable this feature and render all symbols at all times, set the allowOverlap property of the iconOptions options to true.

Adición de un icono personalizado a una capa de símboloAdd a custom icon to a symbol layer

Las capas de símbolo se representan mediante WebGL.Symbol layers are rendered using WebGL. Por tanto, todos los recursos, como las imágenes de icono, se deben cargar en el contexto de WebGL.As such all resources, such as icon images, must be loaded into the WebGL context. Este ejemplo muestra cómo agregar un icono personalizado a los recursos del mapa para usarlo a continuación para representar datos de punto con un símbolo personalizado en el mapa.This sample shows how to add a custom icon to the map resources and then use it to render point data with a custom symbol on the map. La propiedad textField de la capa de símbolo requiere que se especifique una expresión.The textField property of the symbol layer requires an expression to be specified. En este caso, queremos representar la propiedad de temperatura, pero puesto que es un número, debe convertirse en una cadena.In this case, we want to render the temperature property but since it's a number, it needs to be converted to a string. Además, queremos anexarle "°F".Additionally we want to append the "°F" to it. Para hacer esto se puede usar una expresión; ['concat', ['to-string', ['get', 'temperature']], '°F'].An expression can be used to do this; ['concat', ['to-string', ['get', 'temperature']], '°F'].


Sugerencia

El SDK web de Azure Maps proporciona varias plantillas de imagen personalizables que puede usar con la capa de símbolo.The Azure Maps web SDK provides several customizable image templates you can use with the symbol layer. Para más información, consulte el documento How to use image templates (Uso de plantillas de imagen).For more infromation, see the How to use image templates document.

Personalización de una capa de símboloCustomize a symbol layer

La capa de símbolo tiene muchas opciones de estilo disponibles.The symbol layer has many styling options available. Con esta herramienta puede probar las distintas opciones de estilo.Here is a tool to test out these various styling options.


Sugerencia

Si solo quiere representar texto con una capa de símbolo, puede ocultar el icono estableciendo la propiedad image de las opciones de icono en 'none'.When you only want to render text with a symbol layer, you can hide the icon by setting the image property of the icon options to 'none'.

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: