Adición de una capa de línea al mapaAdd a line layer to the map

Una capa de línea se puede usar para representar las características LineString y MultiLineString como rutas de acceso o rutas en el mapa.A line layer can be used to render LineString and MultiLineString features as paths or routes on the map. También se puede usar una capa de línea para representar el contorno de las características Polygon y MultiPolygon.A line layer can also be used to render the outline of Polygon and MultiPolygon features. Un origen de datos se conecta a una capa de línea para proporcionar los datos que se van a representar.A data source is connected to a line layer to provide it data to render.

Sugerencia

Las capas de línea de forma predeterminada representarán las coordenadas de los polígonos y las líneas en un origen de datos.Line layers by default will render the coordinates of polygons as well as lines in a data source. Para limitar la capa de forma que solo represente las características de LineString, configure la propiedad filter de la capa en ['==', ['geometry-type'], 'LineString'] o ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] si desea incluir también las características de MultiLineString.To limit the layer such that it only renders LineString features set the filter property of the layer to ['==', ['geometry-type'], 'LineString'] or ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] if you want to include MultiLineString features as well.

En el código siguiente se muestra cómo crear una línea, agregarla a un origen de datos y representarla con una capa de línea mediante la clase LineLayer.The following code shows how to create a line, add it to a data source and render it with a line layer using the LineLayer class.

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

//Create a line and add it to the data source.
dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));
  
//Create a line layer to render the line to the map.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'blue',
    strokeWidth: 5
}));

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.


Se puede aplicar estilo a las capas de línea mediante LineLayerOptions y Uso de expresiones de estilo controladas por datos.Line layers can be styled using LineLayerOptions and Use data-driven style expressions.

Adición de símbolos a lo largo de una líneaAdd symbols along a line

En este ejemplo se muestra cómo agregar iconos de flecha situados a lo largo de una línea en el mapa.This sample shows how to add arrow icons along a line on the map. Cuando use una capa de símbolos, establezca la opción "colocación" en "línea" para que se representan los símbolos a lo largo de la línea y se giren los iconos (0 grados = derecha).When using a symbol layer, set the "placement" option to "line", this will render the symbols along the line and rotate the icons (0 degrees = right).


Sugerencia

El SDK de Azure Maps para web 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 Uso de plantillas de imagen.For more information, see the How to use image templates document.

Adición de un degradado de trazo a una líneaAdd a stroke gradient to a line

Además de poder aplicar un color de trazo único a una línea, también puede rellenar una línea con un degradado de colores para mostrar la transición de un segmento de línea al siguiente.In addition to being able to apply a single stroke color to a line you can also fill a line with a gradient of colors to show transition from one line segment to the next. Por ejemplo, los degradados de línea pueden utilizarse para representar cambios en el tiempo y en la distancia, o bien diferentes temperaturas a lo largo de una línea de objetos conectada.For example, line gradients can be used to represent changes over time and distance, or different temperatures across a connected line of objects. Para poder aplicar esta característica a una línea, el origen de datos debe tener la opción lineMetrics establecida en true; de este modo, se puede pasar una expresión de degradado a la opción strokeColor de la línea.In order to apply this feature to a line, the data source must have the lineMetrics option set to true, and then a color gradient expression can be passed to the strokeColor option of the line. La expresión de degradado del trazo tiene que hacer referencia a la expresión de datos ['line-progress'] que expone las métricas de línea calculadas a la expresión.The stroke gradient expression has to reference the ['line-progress'] data expression that exposes the calculated line metrics to the expression.


Personalizar una capa de líneaCustomize a line layer

La capa de línea tiene varias opciones de estilo.The Line layer several 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: