Lägga till ett linjeskikt på kartan

Artikel
06/27/2023

Ett linjeskikt kan användas för att återge LineString och MultiLineString funktioner som sökvägar eller vägar på kartan. Ett linjeskikt kan också användas för att återge konturerna och PolygonMultiPolygon funktionerna. En datakälla är ansluten till ett linjeskikt för att förse den med data som ska återges.

Tips

Linjeskikt renderar som standard koordinaterna för polygoner samt linjer i en datakälla. Om du vill begränsa skiktet så att det bara renderar LineString-funktioner anger filter du egenskapen för lagret till ['==', ['geometry-type'], 'LineString'] eller ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] om du även vill inkludera MultiLineString-funktioner.

Följande kod visar hur du skapar en rad. Lägg till raden i en datakälla och rendera den sedan med ett linjeskikt med klassen 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
}));

Följande skärmbild visar ett exempel på ovanstående funktioner.

En skärmbild som visar ett linjeskikt på en Azure Maps karta.

Linjeskikt kan utformas med LineLayerOptions och Använda datadrivna formatuttryck.

Lägga till symboler längs en linje

Följande exempel visar hur du lägger till pilikoner längs en linje på kartan. När du använder ett symbolskikt anger du placement alternativet till line. Det här alternativet renderar symbolerna längs linjen och roterar ikonerna (0 grader = höger).

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

Den här koden skapar en karta som visas på följande sätt:

En skärmbild som visar ett linjeskikt på en Azure Maps karta med pilsymboler längs linjen.

Tips

Den Azure Maps webb-SDK innehåller flera anpassningsbara bildmallar som du kan använda med symbolskiktet. Mer information finns i dokumentet Så här använder du bildmallar .

Lägga till en linjetoning till en linje

Du kan använda en linjefärg på en linje. Du kan också fylla en linje med en toning av färger för att visa övergången från ett linjesegment till nästa linjesegment. Till exempel kan linjetoningar användas för att representera ändringar över tid och avstånd, eller olika temperaturer över en ansluten objektlinje. För att kunna använda den här funktionen på en rad måste datakällan ha lineMetrics alternativet inställt på true, och sedan kan ett färgtoningsuttryck skickas till strokeColor alternativet för raden. Uttrycket för linjetoning måste referera ['line-progress'] till det datauttryck som exponerar måtten för den beräknade linjen för uttrycket.

Ett fullständigt funktionellt exempel som visar hur du använder en linjetoning på en linje på kartan finns i Linje med linjetoning i Azure Maps-exemplen. Källkoden för det här exemplet finns i Line with Stroke Gradient source code (Linje med linjetoning).

En skärmbild som visar en linje med en linjetoning på kartan.

Anpassa ett linjeskikt

Linjeskiktet har flera formatalternativ. Ett fullständigt funktionellt exempel som interaktivt demonstrerar radalternativen finns i Alternativ för linjeskikt i Azure Maps exempel. Källkoden för det här exemplet finns i Källkod för radskiktsalternativ.

En skärmbild som visar exemplet på alternativ för linjeskikt som visar hur de olika alternativen i linjeskiktet påverkar återgivningen.