Haritaya çokgen katman ekleme

Bu makale, çokgen bir katman kullanarak harita üzerinde Polygon ve MultiPolygon özellik geometrilerinin alanlarını nasıl göstereceğinizi açıklamaktadır. Azure Haritalar Web SDK'sı, genişletilmiş GeoJSON şemasında tanımlandığı gibi Daire geometrilerinin oluşturulmasını da destekler. Bu daireler haritada işlendiğinde çokgenlere dönüştürülür. Tüm özellik geometrileri, atlas.Shape sınıfı ile sarmalandığında kolayca güncellenebilir.

Çokgen katman kullanma

Bir çokgen katmanı bir veri kaynağına bağlanıp haritaya yüklendiğinde, alanı Polygon ve MultiPolygon özellikleriyle görselleştirir. Çokgen oluşturmak için bunu bir veri kaynağına ekleyin ve PolygonLayer sınıfını kullanarak çokgen bir katmanla işleyin.

Aşağıdaki örnek kod, New York City'nin Central Park'ını kırmızı bir poligonla kapsayan bir çokgen katmanı oluşturmayı göstermektedir.

 
function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.97, 40.78],
    zoom: 11,
    view: "Auto",
    
    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    }
  });

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    /*Create a data source and add it to the map*/
    var dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    /*Create a rectangle*/
    dataSource.add(new atlas.Shape(new atlas.data.Feature(
    new atlas.data.Polygon([[
      [-73.98235, 40.76799],
      [-73.95785, 40.80044],
      [-73.94928, 40.7968],
      [-73.97317, 40.76437],
      [-73.98235, 40.76799]
    ]])
    )));

    /*Create and add a polygon layer to render the polygon to the map*/
    map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
    fillColor: "red",
    fillOpacity: 0.7
    }), 'labels')
  });
}

Çokgen ve çizgi katmanını birlikte kullanma

Çizgi katmanı, çokgenlerin ana hatlarını işlemek için kullanılır. Aşağıdaki kod örneği, önceki örnekte olduğu gibi çokgen oluşturur, ancak şimdi bir çizgi katmanı ekler. Bu çizgi katmanı, veri kaynağına bağlı ikinci bir katmandır.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.97, 40.78],
    zoom: 11,
    view: "Auto",
    
    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{subscription key}'
    }
  });

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    /*Create a data source and add it to the map*/
    var dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    /*Create a rectangle*/
    dataSource.add(new atlas.data.Polygon([[
    [-73.98235, 40.76799],
    [-73.95785, 40.80045],
    [-73.94928, 40.7968],
    [-73.97317, 40.76437],
    [-73.98235, 40.76799]
    ]])
          );

    //Create a polygon layer to render the filled in area of the polygon.
    var polygonLayer = new atlas.layer.PolygonLayer(dataSource, 'myPolygonLayer', {
    fillColor: 'rgba(0, 200, 200, 0.5)'
    });

    //Create a line layer for greater control of rendering the outline of the polygon.
    var lineLayer = new atlas.layer.LineLayer(dataSource, 'myLineLayer', {
    strokeColor: 'red',
    strokeWidth: 2
    });

    /*Create and add a polygon layer to render the polygon to the map*/
    map.layers.add([polygonLayer, lineLayer])
  });
}

Çokgeni desenle doldurma

Çokgeni bir renkle doldurmanın yanı sıra, çokgeni doldurmak için bir görüntü deseni de kullanabilirsiniz. Harita görüntüsü sprite kaynaklarına bir görüntü deseni yükleyin ve ardından bu görüntüye fillPattern çokgen katmanının özelliğiyle başvurun.

Bir resim şablonunun çokgen katmanında dolgu deseni olarak nasıl kullanılacağını gösteren tam işlevsel bir örnek için, Azure Haritalar Örnekleri'ndeki Çokgeni yerleşik simge şablonuyla doldurma bölümüne bakın. Bu örneğin kaynak kodu için bkz 'Yerleşik simge şablonuyla çokgen doldurma' kaynak kodu.

İpucu

Azure Haritalar Web SDK'sı, dolgu desenleri olarak kullanabileceğiniz birkaç özelleştirilebilir görüntü şablonu sağlar. Daha fazla bilgi için Görüntü şablonlarını kullanma belgesine bakın.

Çokgen katmanı özelleştirme

Çokgen katmanında yalnızca birkaç stil seçeneği vardır. Çokgen Katman Seçenekleri örnek haritasını denemek için Azure Haritalar Örnekleri'ne bakın. Bu örneğe ait kaynak kodu için Çokgen Katman Seçenekleri kaynak kodu'na bakın.

Haritaya bir daire ekle

Azure Haritalar, GeoJSON şemasının daireler için bir tanım sağlayan genişletilmiş bir sürümünü kullanır. Bir Point öğesi oluşturularak harita üzerinde bir daire çizilir. Bunun Point değeri subType olan bir özelliği ve "Circle" metre cinsinden yarıçapı temsil eden bir sayıya sahip bir özelliği vardırradius.

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-122.126986, 47.639754]
    },
    "properties": {
        "subType": "Circle",
        "radius": 100
    }
}  

Azure Haritalar Web SDK'sı bu Point özellikleri özelliklere Polygon dönüştürür. Ardından bu özellikler, aşağıdaki kod örneğinde gösterildiği gibi çokgen ve çizgi katmanları kullanılarak haritada işlenir.

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.985708, 40.75773],
    zoom: 12,
    view: "Auto",
    
    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    }      
  });

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    /*Create a data source and add it to the map*/
    var dataSource = new atlas.source.DataSource();
    map.sources.add(dataSource);

    //Create a circle
    dataSource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), 
    {
      subType: "Circle",
      radius: 1000
    }));

    // Create a polygon layer to render the filled in area
    // of the circle polygon, and add it to the map.
    map.layers.add(new atlas.layer.PolygonLayer   (dataSource, null, {
      fillColor: 'rgba(0, 200, 200, 0.8)'
    }));
  });
}

Geometrinin kolayca güncelleştirilmesini sağlama

Bir Shape sınıf, geometriyi veya özelliği sarmalar ve bu özellikleri güncelleştirmeyi ve korumayı kolaylaştırır. Şekil değişkeni örneği oluşturmak için, şekil oluşturucusunun geometrisini veya bir özellik kümesini geçirin.

//Creating a shape by passing in a geometry and a object containing properties.
var shape1 = new atlas.Shape(new atlas.data.Point[0,0], { myProperty: 1 });

//Creating a shape using a feature.
var shape2 = new atlas.Shape(new atlas.data.Feature(new atlas.data.Point[0,0], { myProperty: 1 });

Geometriyi güncelleştirmeyi kolaylaştırma örneği, bir daire GeoJSON nesnesini şekil sınıfıyla nasıl sardığını gösterir. Şekilde yarıçapın değeri değiştikçe, daire haritada otomatik olarak işlenir. Bu örneğin kaynak kodu için Geometrinin güncellenmesini kolaylaştıran kaynak kodu bölümüne bakın.

Sonraki adımlar

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

Poligon

PolygonLayer

PolygonLayerOptions

Haritalarınıza eklenecek diğer kod örnekleri için aşağıdaki makalelere bakın:

Veri kaynağı oluşturma

Açılan pencere ekle

Veri temelli stil ifadeleri kullanma

Görüntü şablonlarını kullanma

Çizgi katmanı ekleme

Diğer kaynaklar:

Azure Haritalar GeoJSON belirtimi uzantısı