Haritaya çizgi katmanı ekleme

Makale
07/07/2023

Çizgi katmanı, ve MultiLineString özelliklerini haritada yol veya yol olarak işlemek LineString için kullanılabilir. Çizgi katmanı, ve MultiPolygon özelliklerinin ana hatlarını Polygon işlemek için de kullanılabilir. Veri kaynağı, işlenmek üzere veri sağlamak için bir çizgi katmanına bağlanır.

İpucu

Çizgi katmanları varsayılan olarak çokgenlerin koordinatlarını ve veri kaynağındaki çizgileri işler. Katmanı yalnızca LineString özelliklerini işleyebilecek şekilde sınırlamak ['==', ['geometry-type'], 'LineString'] için katmanın özelliğini olarak ayarlayın filter veya ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] MultiLineString özelliklerini de eklemek istiyorsanız.

Aşağıdaki kodda bir satırın nasıl oluşturulacağı gösterilmektedir. Çizgiyi bir veri kaynağına ekleyin, ardından LineLayer sınıfını kullanarak bir çizgi katmanıyla işleyin.

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

Aşağıdaki ekran görüntüsünde yukarıdaki işlevlerin bir örneği gösterilmektedir.

Azure Haritalar haritasındaki çizgi katmanını gösteren ekran görüntüsü.

Çizgi katmanları LineLayerOptions ve Use data-driven style ifadeleri kullanılarak stillendirilebilir.

Çizgi boyunca simge ekleme

Aşağıdaki örnekte, haritada bir çizgi boyunca ok simgelerinin nasıl ekleneceği gösterilmektedir. Simge katmanı kullanırken seçeneğini olarak lineayarlayınplacement. Bu seçenek, çizgi boyunca simgeleri işler ve simgeleri döndürür (0 derece = sağa).

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

Bu kod aşağıdaki gibi görünen bir harita oluşturur:

Azure Haritalar haritasında çizgi boyunca ok simgeleri bulunan çizgi katmanını gösteren ekran görüntüsü.

İpucu

Azure Haritalar web SDK'sı, simge katmanıyla kullanabileceğiniz çeşitli özelleştirilebilir görüntü şablonları sağlar. Daha fazla bilgi için Görüntü şablonlarını kullanma belgesine bakın.

Çizgiye kontur gradyanı ekleme

Çizgiye tek bir vuruş rengi uygulayabilirsiniz. Bir çizgi kesiminden sonraki çizgi segmentine geçişi göstermek için bir çizgiyi renk gradyanı ile de doldurabilirsiniz. Örneğin, çizgi gradyanları zaman ve mesafe içindeki değişiklikleri veya bağlı bir nesne hattındaki farklı sıcaklıkları göstermek için kullanılabilir. Bu özelliği bir çizgiye uygulamak için veri kaynağında lineMetrics seçeneği olarak ayarlanmalıdır trueve ardından çizgi seçeneğine strokeColor bir renk gradyanı ifadesi geçirilebilir. Kontur gradyan ifadesinin ['line-progress'] hesaplanmış çizgi ölçümlerini ifadede kullanıma sunan veri ifadesine başvurması gerekir.

Haritadaki bir çizgiye kontur gradyanı uygulamayı gösteren tam işlevsel bir örnek için, Azure Haritalar Örnekleri'ndeki Kontur Gradyanı ile Çizgi bölümüne bakın. Bu örneğin kaynak kodu için bkz. Kontur Gradyanlı Çizgi kaynak kodu.

Haritada kontur gradyanı olan bir çizgiyi gösteren ekran görüntüsü.

Çizgi katmanını özelleştirme

Çizgi katmanında çeşitli stil seçenekleri vardır. Çizgi seçeneklerini etkileşimli olarak gösteren tam işlevsel bir örnek için Azure Haritalar Örnekleri'ndeki Çizgi Katmanı Seçenekleri'ne bakın. Bu örneğin kaynak kodu için bkz. Satır Katmanı Seçenekleri kaynak kodu.

Çizgi katmanının farklı seçeneklerinin işlemeyi nasıl etkilediğini gösteren Çizgi Katmanı Seçenekleri örneğini gösteren ekran görüntüsü.