Een lijnlaag toevoegen aan de kaart

Artikel
07/07/2023

Een lijnlaag kan worden gebruikt om weer te geven LineString en MultiLineString te kenmerken als paden of routes op de kaart. Een lijnlaag kan ook worden gebruikt om de omtrek van Polygon en-functies MultiPolygon weer te geven. Een gegevensbron is verbonden met een lijnlaag om deze te voorzien van gegevens die moeten worden weergegeven.

Tip

Met lijnlagen worden standaard de coördinaten van veelhoeken en lijnen in een gegevensbron weergegeven. Als u de laag zodanig wilt beperken dat alleen LineString-functies worden weergegeven, stelt u de filter eigenschap van de laag in op ['==', ['geometry-type'], 'LineString'] of ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] wilt u ook MultiLineString-functies opnemen.

De volgende code laat zien hoe u een regel maakt. Voeg de lijn toe aan een gegevensbron en geef deze weer met een lijnlaag met behulp van de klasse 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
}));

In de volgende schermopname ziet u een voorbeeld van de bovenstaande functionaliteit.

Een schermopname van een lijnlaag op een Azure Maps kaart.

Lijnlagen kunnen worden gestijld met behulp van LineLayerOptions en Gegevensgestuurde stijlexpressies gebruiken.

Symbolen toevoegen langs een regel

In het volgende voorbeeld ziet u hoe u pijlpictogrammen toevoegt langs een lijn op de kaart. Wanneer u een symboollaag gebruikt, stelt u de placement optie in op line. Met deze optie worden de symbolen langs de lijn weergegeven en worden de pictogrammen gedraaid (0 graden = rechts).

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

Met deze code maakt u een kaart die als volgt wordt weergegeven:

Een schermopname van een lijnlaag op een Azure Maps kaart met pijlsymbolen langs de lijn.

Tip

De Azure Maps web-SDK biedt verschillende aanpasbare afbeeldingssjablonen die u met de symboollaag kunt gebruiken. Zie het document Afbeeldingssjablonen gebruiken voor meer informatie.

Een lijnovergang toevoegen aan een lijn

U kunt één lijnkleur toepassen op een lijn. U kunt een lijn ook vullen met een kleurovergang om de overgang van het ene lijnsegment naar het volgende lijnsegment weer te geven. Lijnovergangen kunnen bijvoorbeeld worden gebruikt om wijzigingen in tijd en afstand aan te geven, of om verschillende temperaturen over een verbonden lijn met objecten weer te geven. Als u deze functie wilt toepassen op een regel, moet de optie voor de lineMetrics gegevensbron zijn ingesteld op trueen vervolgens kan een kleurovergangsexpressie worden doorgegeven aan de strokeColor optie van de regel. De lijnovergangsexpressie moet verwijzen naar de ['line-progress'] gegevensexpressie die de metrische gegevens van de berekende lijn beschikbaar maakt voor de expressie.

Zie Lijn met lijnovergang in de Azure Maps Voorbeelden voor een volledig functioneel voorbeeld dat laat zien hoe u een lijnovergang toepast op een lijn op de kaart. Zie Regel met kleurovergang voor de broncode voor dit voorbeeld.

Een schermopname van een lijn met een lijnovergang op de kaart.

Een lijnlaag aanpassen

De lijnlaag heeft verschillende stijlopties. Zie Opties voor lijnlagen in de Azure Maps Voorbeelden voor een volledig functioneel voorbeeld dat de lijnopties interactief laat zien. Zie Broncode van opties voor lijnlagen voor de broncode voor dit voorbeeld.

Een schermopname van het voorbeeld Van opties voor lijnlagen waarin wordt getoond hoe de verschillende opties van de lijnlaag van invloed zijn op de rendering.