Condividi tramite


Aggiungere un livello linea alla mappa

Un livello linea può essere usato per eseguire il rendering delle funzionalità LineString e MultiLineString come percorsi o route sulla mappa. Un livello linea può essere usato anche per eseguire il rendering della struttura delle funzionalità Polygon e MultiPolygon. Un'origine dati è connessa a un livello linea per fornire a quest'ultimo i dati di cui eseguire il rendering.

Suggerimento

Per impostazione predefinita, i livelli linea eseguiranno il rendering delle coordinate dei poligoni e delle linee in un'origine dati. Per limitare il livello in modo che esegua solo il rendering delle funzionalità LineString, impostare la proprietà filter del livello su ['==', ['geometry-type'], 'LineString'] o ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']], se si vuole includere anche le funzionalità MultiLineString.

Il codice seguente illustra come creare una linea. Aggiungere la linea a un'origine dati e quindi eseguirne il rendering con un livello linea usando la 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
}));

Lo screenshot seguente mostra un esempio delle funzionalità precedenti.

Screenshot che mostra un livello linea in una mappa di Mappe di Azure.

È possibile applicare uno stile ai livelli linea usando LineLayerOptions e usare le espressioni di stile basate sui dati.

Aggiungere simboli lungo una linea

Nell'esempio seguente viene illustrato come aggiungere icone freccia lungo una linea sulla mappa. Quando si usa un livello simbolo, impostare l'opzione placement su line. Questa opzione esegue il rendering dei simboli lungo la linea e ruota le icone (0 gradi = destra).

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', '/images/icons/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
          }
        })
      ]);
    });
  });
}

Questo codice crea una mappa visualizzata nel modo seguente:

Screenshot che mostra un livello linea su una mappa di Mappe di Azure con simboli di freccia lungo la linea.

Nota

Per una copia del file di immagine usato nell'esempio precedente, vedere purpleArrowRight.png in GitHub.

Suggerimento

Azure Maps Web SDK offre diversi modelli di immagine personalizzabili che è possibile usare con il livello simbolo. Per altre informazioni, vedere il documento Come usare i modelli di immagine.

Aggiungere una sfumatura del tratto a una linea

È possibile applicare un colore a tratto singolo a una linea. È anche possibile riempire una linea con una sfumatura di colori per visualizzare la transizione da un segmento di linea al segmento di linea successivo. Ad esempio, è possibile usare le sfumature di linea per rappresentare le modifiche nel tempo e nella distanza oppure con temperature diverse in una linea di oggetti connessa. Per applicare questa funzionalità a una linea, è necessario che l'opzione lineMetrics dell'origine dati sia impostata su true e quindi un'espressione di sfumatura del colore possa essere passata all'opzione strokeColor della linea. L'espressione di sfumatura del tratto deve fare riferimento all'espressione dati ['line-progress'] che espone le metriche di linea calcolate all'espressione.

Per un esempio completamente funzionante che illustra come applicare una sfumatura gradiente a una linea sulla mappa, vedere Linea con gradiente del tratto negli Esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Codice sorgente della Linea con gradiente del tratto.

Screenshot che mostra una linea con un gradiente di tratto sulla mappa.

Personalizzare un livello linea

Per il livello linea sono disponibili varie opzioni di stile. Per un esempio completamente funzionante che illustra in modo interattivo le opzioni della riga, vedere Opzioni del livello della linea in Esempi di Mappe di Azure. Per il codice sorgente per questo esempio, vedere Codice sorgente delle opzioni del livello immagine.

Screenshot con l'esempio Opzioni del livello della linea che mostra come le diverse opzioni del livello linea influiscono sul rendering.

Passaggi successivi

Per altre informazioni sulle classi e sui metodi usati in questo articolo, vedere:

Per altri esempi di codice da aggiungere alle mappe, vedere gli articoli seguenti: