Adición de una capa de línea al mapa

Artigo
08/28/2024

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. También se puede usar una capa de línea para representar el contorno de las características Polygon y MultiPolygon. Se puede conectar un origen de datos a la capa de línea para que proporcione los datos que se van a representar.

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. 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.

En el código siguiente, se muestra cómo se crea una línea. Agregue la línea a un origen de datos y represéntela con una capa de líneas utilizando la clase LineLayer.

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

En la captura de pantalla siguiente, se muestra un ejemplo de la funcionalidad anterior.

Se puede aplicar estilo a las capas de línea mediante LineLayerOptions y Uso de expresiones de estilo controladas por datos.

Adición de símbolos a lo largo de una línea

El siguiente ejemplo demuestra cómo agregar iconos de flecha a lo largo de una línea en el mapa. Si usa una capa de símbolos, establezca la opción placement en line. Esta opción representa los símbolos a lo largo de la línea y gira los iconos (0 grados = derecha).

function InitMap()
{
    var map = new atlas.Map('myMap', {
    center: [-122.135, 47.65],
    zoom: 11,
    view: "Auto",

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    }
  });

  var datasource;

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    //Load the custom image icon into the map resources.
    map.imageSprite.add('arrow-icon', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/purpleArrowRight.png').then(function () {
      //Create a data source and add it to the map.
      datasource = new atlas.source.DataSource();
      map.sources.add(datasource);

      //Create a line and add it to the data source.
      datasource.add(new atlas.data.Feature(new atlas.data.LineString([
        [-122.18822, 47.63208],
        [-122.18204, 47.63196],
        [-122.17243, 47.62976],
        [-122.16419, 47.63023],
        [-122.15852, 47.62942],
        [-122.15183, 47.62988],
        [-122.14256, 47.63451],
        [-122.13483, 47.64041],
        [-122.13466, 47.64422],
        [-122.13844, 47.65440],
        [-122.13277, 47.66515],
        [-122.12779, 47.66712],
        [-122.11595, 47.66712],
        [-122.11063, 47.66735],
        [-122.10668, 47.67035],
        [-122.10565, 47.67498]
      ])));

      //Add a layers for rendering data.
      map.layers.add([
        //Add a line layer for displaying the line.
        new atlas.layer.LineLayer(datasource, null, {
          strokeColor: 'DarkOrchid',
          strokeWidth: 3
        }),

        //Add a symbol layer for rendering the arrow along the line.
        new atlas.layer.SymbolLayer(datasource, null, {
          //Specify how much space should be between the symbols in pixels.
          lineSpacing: 100,

          //Tell the symbol layer that the symbols are being rendered along a line.
          placement: 'line',
          iconOptions: {
            image: 'arrow-icon',
            allowOverlap: true,
            anchor: 'center',
            size: 0.8
          }
        })
      ]);
    });
  });
}

Este código crea un mapa que aparece de la siguiente manera:

Sugerencia

El SDK de Azure Maps para web proporciona varias plantillas de imagen personalizables que puede usar con la capa de símbolo. Para más información, consulte el documento Uso de plantillas de imagen.

Adición de un degradado de trazo a una línea

Puede aplicar un color de trazo único a la línea. También puede rellenar la línea con un degradado de colores para mostrar la transición de un segmento al siguiente. 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. 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 de color a la opción strokeColor de la línea. 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.

Para obtener un ejemplo totalmente funcional que muestre cómo aplicar un degradado de trazo a una línea del mapa, consulte Línea con degradado de trazo en los ejemplos de Azure Maps. Para obtener el código fuente de este ejemplo, vea el código fuente Línea con degradado de trazo.

Captura de pantalla que muestra una línea con un degradado de trazo en el mapa.

Personalizar una capa de línea

La capa de líneas dispone de varias opciones de estilo. Para obtener un ejemplo totalmente funcional que muestre interactivamente las opciones de línea, consulte Opciones de capa de línea en los ejemplos de Azure Maps. Para obtener el código fuente de este ejemplo, consulte Código fuente de Opciones de capa de línea.