Adicionar uma camada de linha ao mapa

Artigo
07/07/2023

Uma camada de linha pode ser utilizada para compor LineString e MultiLineString funcionalidades como caminhos ou rotas no mapa. Uma camada de linha também pode ser utilizada para compor o destaque e PolygonMultiPolygon as funcionalidades. Uma origem de dados está ligada a uma camada de linha para fornecer dados para compor.

Dica

Por predefinição, as camadas de linha irão compor as coordenadas dos polígonos, bem como as linhas numa origem de dados. Para limitar a camada de forma a que apenas componcione as funcionalidades LineString, defina a filter propriedade da camada para ['==', ['geometry-type'], 'LineString'] ou ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] se também pretende incluir funcionalidades MultiLineString.

O código seguinte mostra como criar uma linha. Adicione a linha a uma origem de dados e, em seguida, componione-a com uma camada de linha com a classe 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
}));

A captura de ecrã seguinte mostra um exemplo da funcionalidade acima.

Uma captura de ecrã a mostrar uma camada de linha num mapa de Azure Maps.

As camadas de linha podem ser modeladas com LineLayerOptions e Utilizar expressões de estilo baseadas em dados.

Adicionar símbolos ao longo de uma linha

O exemplo seguinte demonstra como adicionar ícones de seta ao longo de uma linha no mapa. Ao utilizar uma camada de símbolo, defina a opção placement como line. Esta opção compõe os símbolos ao longo da linha e roda os ícones (0 graus = direita).

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 cria um mapa que é apresentado da seguinte forma:

Captura de ecrã a mostrar uma camada de linha num mapa de Azure Maps com símbolos de seta ao longo da linha.

Dica

O SDK Web Azure Maps fornece vários modelos de imagem personalizáveis que pode utilizar com a camada de símbolo. Para obter mais informações, veja o documento Como utilizar modelos de imagem .

Adicionar uma gradação de traço a uma linha

Pode aplicar uma única cor de traço a uma linha. Também pode preencher uma linha com uma gradação de cores para mostrar a transição de um segmento de linha para o segmento de linha seguinte. Por exemplo, as gradações de linha podem ser utilizadas para representar alterações ao longo do tempo e distância, ou temperaturas diferentes numa linha de objetos ligada. Para aplicar esta funcionalidade a uma linha, a origem de dados tem de ter a opção lineMetrics definida como truee, em seguida, uma expressão de gradação de cor pode ser transmitida à opção strokeColor da linha. A expressão de gradação de traço tem de referenciar a ['line-progress'] expressão de dados que expõe as métricas de linha calculadas à expressão.

Para obter um exemplo totalmente funcional que mostre como aplicar uma gradação de traço a uma linha no mapa, veja Line with Stroke Gradient in the Azure Maps Samples (Linha com Gradação de Traços na Azure Maps Samples). Para obter o código fonte para este exemplo, veja Line with Stroke Gradient source code (Linha com Código fonte de Gradação de Traços).

Uma captura de ecrã a mostrar uma linha com uma gradação de traço no mapa.

Personalizar uma camada de linha

A camada Linha tem várias opções de estilo. Para obter um exemplo totalmente funcional que demonstre interativamente as opções de linha, veja Opções de Camada de Linha no Azure Maps Exemplos. Para obter o código fonte deste exemplo, veja Código fonte de Opções de Camada de Linha.

Uma captura de ecrã a mostrar o exemplo De Opções de Camada de Linha que mostra como as diferentes opções da camada de linha afetam a composição.