Přidání vrstvy čáry do mapy

Článek
07/07/2023

Vrstvu čáry lze použít k vykreslení LineString a MultiLineString funkcí jako cest nebo tras na mapě. Vrstvu čáry lze také použít k vykreslení obrysu Polygon funkcí a MultiPolygon . Zdroj dat je připojený k spojnicové vrstvě a poskytuje mu data, která se mají vykreslit.

Tip

Vrstvy čar ve výchozím nastavení vykreslují souřadnice mnohoúhelníků i čar ve zdroji dat. Chcete-li omezit vrstvu tak, aby vykreslovat pouze funkce LineString, nastavte filter vlastnost vrstvy na ['==', ['geometry-type'], 'LineString'] hodnotu nebo ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] pokud chcete zahrnout také funkce MultiLineString.

Následující kód ukazuje, jak vytvořit řádek. Přidejte čáru do zdroje dat a pak ji vykreslete s vrstvou řádku pomocí třídy 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
}));

Následující snímek obrazovky ukazuje ukázku výše uvedených funkcí.

Snímek obrazovky znázorňující vrstvu čáry na mapě Azure Maps

Vrstvy čar lze stylovat pomocí výrazů stylu LineLayerOptions a Use data-driven.

Přidání symbolů podél čáry

Následující ukázka ukazuje, jak přidat ikony šipek podél čáry na mapě. Pokud používáte vrstvu symbolů, nastavte placement možnost na line. Tato možnost vykreslí symboly podél čáry a otočí ikony (0 stupňů = doprava).

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

Tento kód vytvoří mapu, která se zobrazí takto:

Snímek obrazovky znázorňující vrstvu čar na mapě Azure Maps se symboly šipek podél čáry

Tip

Sada Azure Maps Web SDK poskytuje několik přizpůsobitelných šablon imagí, které můžete použít s vrstvou symbolů. Další informace najdete v dokumentu Jak používat šablony obrázků .

Přidání přechodu tahu na čáru

U čáry můžete použít barvu jedním tahem. Čáru můžete také vyplnit přechodem barev a zobrazit tak přechod z jednoho segmentu čáry na další. Například přechody čar se dají použít k reprezentaci změn v průběhu času a vzdálenosti nebo různých teplot ve spojených řádcích objektů. Aby bylo možné tuto funkci použít na čáru, musí mít lineMetrics zdroj dat možnost nastavenou na truea potom se výraz barevného přechodu může předat strokeColor možnosti čáry. Výraz přechodu tahů musí odkazovat na ['line-progress'] datový výraz, který zpřístupňuje metriky počítaných řádků výrazu.

Plně funkční ukázku, která ukazuje, jak použít přechod tahů na čáru na mapě, najdete v tématu Čára s přechodem tahů v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód Line with Stroke Gradient.

Snímek obrazovky znázorňující čáru s přechodem tahů na mapě

Přizpůsobení vrstvy čáry

Vrstva Čára má několik možností stylů. Plně funkční ukázku, která interaktivně demonstruje možnosti čáry, najdete v části Možnosti vrstvy čáry v Azure Maps Ukázky. Zdrojový kód pro tuto ukázku najdete v tématu Zdrojový kód možností vrstvy řádků.

Snímek obrazovky znázorňující ukázku Možností vrstvy čáry, která ukazuje, jak různé možnosti vrstvy čar ovlivňují vykreslování.