Dodawanie warstwy liniowej do mapy

Artykuł
07/07/2023

Warstwa liniowa może służyć do renderowania LineString i MultiLineString funkcji jako ścieżek lub tras na mapie. Warstwę liniową można również użyć do renderowania Polygon konspektu funkcji i MultiPolygon . Źródło danych jest połączone z warstwą liniową, aby zapewnić jej dane do renderowania.

Porada

Warstwy linii domyślnie renderują współrzędne wielokątów, a także linie w źródle danych. Aby ograniczyć warstwę tak, że renderuje tylko funkcje LineString, ustaw filter właściwość warstwy na ['==', ['geometry-type'], 'LineString'] lub ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] jeśli chcesz uwzględnić również funkcje MultiLineString.

Poniższy kod pokazuje, jak utworzyć wiersz. Dodaj wiersz do źródła danych, a następnie renderuj go za pomocą warstwy liniowej przy użyciu klasy 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
}));

Poniższy zrzut ekranu przedstawia przykład powyższej funkcjonalności.

Zrzut ekranu przedstawiający warstwę linii na mapie Azure Maps.

Warstwy linii można stylować przy użyciu lineLayerOptions i użyć wyrażeń stylu opartych na danych.

Dodawanie symboli wzdłuż linii

W poniższym przykładzie pokazano, jak dodać ikony strzałek wzdłuż linii na mapie. W przypadku korzystania z warstwy symboli placement ustaw opcję na line. Ta opcja renderuje symbole wzdłuż linii i obraca ikony (0 stopni = po prawej).

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

Ten kod tworzy mapę, która jest wyświetlana w następujący sposób:

Zrzut ekranu przedstawiający warstwę linii na mapie Azure Maps z symbolami strzałek wzdłuż linii.

Porada

Zestaw SDK sieci Web Azure Maps udostępnia kilka dostosowywalnych szablonów obrazów, których można używać z warstwą symboli. Aby uzyskać więcej informacji, zobacz dokument How to use image templates (Jak używać szablonów obrazów ).

Dodawanie gradientu pociągnięcia do linii

Do linii można zastosować kolor pojedynczego pociągnięcia. Możesz również wypełnić linię gradientem kolorów, aby pokazać przejście z jednego segmentu linii do następnego segmentu wiersza. Na przykład gradienty linii mogą służyć do reprezentowania zmian w czasie i odległości lub różnych temperatur w połączonej linii obiektów. Aby zastosować tę funkcję do wiersza, źródło danych musi mieć lineMetrics opcję ustawioną na true, a następnie wyrażenie gradientu koloru może zostać przekazane do strokeColor opcji wiersza. Wyrażenie gradientu pociągnięcia musi odwoływać się ['line-progress'] do wyrażenia danych, które uwidacznia metryki linii obliczeniowej w wyrażeniu.

Aby zapoznać się z w pełni funkcjonalnym przykładem, który pokazuje, jak zastosować gradient pociągnięcia do linii na mapie, zobacz Line with Stroke Gradient (Linia z gradientem pociągnięcia) w przykładach Azure Maps. Kod źródłowy dla tego przykładu można znaleźć w temacie Line with Stroke Gradient source code (Kod źródłowy liniowy z gradientem pociągnięcia).

Zrzut ekranu przedstawiający linię z gradientem pociągnięcia na mapie.

Dostosowywanie warstwy liniowej

Warstwa Linia ma kilka opcji stylów. Aby uzyskać w pełni funkcjonalny przykład, który interaktywnie demonstruje opcje wiersza, zobacz Opcje warstwy liniowej w Azure Maps Przykłady. Aby uzyskać kod źródłowy dla tego przykładu, zobacz Kod źródłowy opcji warstwy wiersza.

Zrzut ekranu przedstawiający przykład Opcje warstwy liniowej, który pokazuje, jak różne opcje warstwy liniowej wpływają na renderowanie.