Haritaya çizgi katmanı ekleme

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

Aşağıdaki kodda bir satırın nasıl oluşturulacağı gösterilmektedir. Satırı 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.

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

Çizgi boyunca simge ekleme

Aşağıdaki örnekte harita üzerinde bir çizgi boyunca ok simgelerinin nasıl ekleneceği gösterilmektedir. Sembol 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ğ).

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

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

Çizgiye kontur gradyanı ekleme

Çizgiye tek bir vuruş rengi uygulayabilirsiniz. Bir çizgi kesiminden sonraki çizgi kesimine 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ğının lineMetrics seçeneği olarak trueayarlanmalıdır ve ardından çizgi seçeneğine strokeColor bir renk gradyanı ifadesi geçirilebilir. Vuruş gradyan ifadesinin ['line-progress'] hesaplanmış çizgi ölçümlerini ifadeye sunan veri ifadesine başvurması gerekir.

Haritadaki bir çizgiye vuruş gradyanını 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 . Stroke Gradyan kaynak kodu ile çizgi.

Ç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.

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:

Haritalarınıza eklenecek daha fazla kod örneği için aşağıdaki makalelere bakın: