Tambahkan lapisan poligon ke peta

Artikel
07/07/2023

Artikel ini menunjukkan kepada Anda cara merender area Polygon dan MultiPolygon memberikan fitur geometri pada peta menggunakan lapisan poligon. Azure Maps Web SDK juga mendukung pembuatan geometri Circle sebagaimana didefinisikan dalamskema GeoJSON yang diperluas. Lingkaran ini diubah menjadi poligon ketika dirender ke peta. Semua fitur geometri dapat diperbarui dengan mudah ketika dikemas dengan kelas atlas.bentuk.

Gunakan lapisan poligon

Ketika lapisan poligon terhubung ke sumber data dan dimuat di peta, itu merender area dengan PolygondanMultiPolygon fitur. Untuk membuat poligon, tambahkan ke sumber data, dan renderlah dengan lapisan poligon menggunakan kelasPolygonLayer.

Kode sampel berikut menunjukkan pembuatan lapisan poligon yang mencakup Central Park Kota New York dengan poligon merah.

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

Cuplikan layar peta New York City yang menunjukkan lapisan poligon yang mencakup Central Park dengan warna isian diatur ke merah dan mengisi Opacity diatur ke 0,7.

Menggunakan lapisan poligon dan baris bersama-sama

Lapisan baris digunakan untuk merender garis luar poligon. Sampel kode berikut merender poligon seperti contoh sebelumnya, tetapi sekarang menambahkan lapisan baris. Lapisan baris ini adalah lapisan kedua yang tersambung ke sumber data.

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

Cuplikan layar peta Kota New York yang menunjukkan lapisan poligon yang sebagian besar transparan yang mencakup semua Central Park, berbatasan dengan garis merah.

Mengisi poligon dengan pola

Selain mengisi poligon dengan warna, Anda dapat menggunakan pola gambar untuk mengisi poligon. Muat pola gambar ke dalam gambar peta sumber daya sprite dan kemudian rujuk gambar ini dengan fillPatternproperti lapisan poligon.

Untuk sampel yang berfungsi penuh yang menunjukkan cara menggunakan templat gambar sebagai pola isian di lapisan poligon, lihat Mengisi poligon dengan templat ikon bawaan di sampel Azure Maps. Untuk kode sumber untuk sampel ini, lihat Mengisi poligon dengan kode sumber templat ikon bawaan.

Tip

Azure Maps web SDK menyediakan beberapa templat gambar yang dapat disesuaikan yang dapat Anda gunakan sebagai pola isian. Untuk informasi selengkapnya, lihat dokumenCara menggunakan templat gambar.

Mengkustomisasi lapisan poligon

Lapisan poligon hanya memiliki beberapa opsi gaya. Lihat peta sampel Opsi Lapisan Poligon di sampel Azure Maps untuk mencobanya. Untuk kode sumber untuk sampel ini, lihat Kode sumber Opsi Lapisan Poligon.

Cuplikan layar alat Opsi Lapisan Poligon.

Tambahkan lingkaran ke peta

Azure Maps menggunakan versi skema GeoJSON yang diperluas yang menyediakan definisi untuk lingkaran. Lingkaran dimuat pada peta dengan membuatPointfitur. Hal ini Point memiliki subTypeproperti dengan nilai "Circle"dan radiusproperti dengan angka yang menunjukkan radius dalam meter.

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

Azure Maps Web SDK mengkonversiPoint fitur ini menjadiPolygon fitur. Selanjutnya, fitur-fitur ini dimuat pada peta menggunakan lapisan poligon dan garis sebagaimana ditunjukkan dalam contoh kode berikut.

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

Cuplikan layar peta yang memperlihatkan lingkaran hijau transparan sebagian di Kota New York. Ini menunjukkan penambahan lingkaran ke peta.

Buat geometri yang mudah diperbarui

Sebuah Shape kelas membungkus Geometri atau Fitur dan memudahkan untuk memperbarui dan memelihara fitur-fitur ini. Untuk membuat variabel bentuk, teruskan geometri atau sekumpulan properti ke konstruktor bentuk.

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

Sampel Buat geometri mudah diperbarui menunjukkan cara membungkus objek GeoJSON lingkaran dengan kelas bentuk. Ketika nilai radius berubah dalam bentuk, lingkaran dimuat secara otomatis pada peta. Untuk kode sumber untuk sampel ini, lihat Membuat geometri mudah diperbarui kode sumber.

Cuplikan layar peta memperlihatkan lingkaran merah di Kota New York dengan bilah penggeser berjudul Radius Lingkaran dan saat Anda menggeser bilah ke kanan atau kiri, nilai radius berubah dan ukuran lingkaran menyesuaikan secara otomatis di peta.