Haritaya çokgen katman ekleme

Bu makalede, çokgen bir katman kullanarak haritadaki ve MultiPolygon özellik geometrilerinin Polygon alanlarının nasıl işlenmeleri gösterilmektedir. 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. Atlas ile sarmalandığında tüm özellik geometrileri kolayca güncelleştirilebilir. Şekil sınıfı.

Çokgen katman kullanma

Bir çokgen katmanı bir veri kaynağına bağlanıp haritaya yüklendiğinde, alanı ve MultiPolygon özellikleriyle Polygon işler. Ç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 . Çokgeni yerleşik simge şablonu kaynak koduyla doldurma.

Çokgen katmanı özelleştirme

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

Haritaya daire ekleme

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

{
    "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ır örneği, bir daire GeoJSON nesnesinin şekil sınıfıyla nasıl kaydırılmış olduğunu 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 bkz . Geometrinin kaynak kodu güncelleştirmeyi kolaylaştırma.

Sonraki adımlar

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

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

Diğer kaynaklar: