Menambahkan lapisan poligon ke peta di SDK iOS (Pratinjau)

Artikel
04/07/2024

Artikel ini menunjukkan kepada Anda cara merender area Polygon dan MultiPolygon memberikan fitur geometri pada peta menggunakan lapisan poligon.

Catatan

Penghentian Azure Peta iOS SDK

Azure Peta Native SDK untuk iOS sekarang tidak digunakan lagi dan akan dihentikan pada 31/3/3/25. Untuk menghindari gangguan layanan, migrasikan ke Azure Peta Web SDK dengan 3/31/25. Untuk informasi selengkapnya, lihat Panduan migrasi Azure Peta iOS SDK.

Prasyarat

Pastikan untuk menyelesaikan langkah-langkah di dokumen Panduan Mulai Cepat: Membuat aplikasi iOS. Blok kode dalam artikel ini dapat dimasukkan ke dalam fungsi viewDidLoad dari ViewController.

Menggunakan lapisan poligon

Ketika lapisan poligon tersambung ke sumber data dan dimuat di peta, lapisan ini merender area dengan fitur Polygon dan MultiPolygon. Untuk membuat poligon, tambahkan poligon ke sumber data dan render dengan lapisan poligon menggunakan kelas PolygonLayer.

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(.red),
        .fillOpacity(0.7)
    ]),
    below: "labels"
)

Cuplikan layar berikut menunjukkan kode di atas yang merender area poligon menggunakan lapisan poligon.

Gunakan lapisan poligon dan garis 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.

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a rectangular polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235),
    CLLocationCoordinate2D(latitude: 40.80044, longitude: -73.95785),
    CLLocationCoordinate2D(latitude: 40.79680, longitude: -73.94928),
    CLLocationCoordinate2D(latitude: 40.76437, longitude: -73.97317),
    CLLocationCoordinate2D(latitude: 40.76799, longitude: -73.98235)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillColor(UIColor(red: 0, green: 0.78, blue: 0.78, alpha: 0.5))
    ]),
    below: "labels"
)

// Create and add a line layer to render the outline of the polygon.
map.layers.addLayer(LineLayer(source: source, options: [
    .strokeColor(.red),
    .strokeWidth(2)
]))

Cuplikan layar berikut menunjukkan kode di atas yang merender poligon dengan garis luarnya dirender menggunakan lapisan baris.

Tip

Saat membuat kerangka poligon dengan lapisan baris, pastikan untuk menutup semua cincin dalam poligon sedemikian rupa sehingga setiap array titik memiliki titik awal dan akhir yang sama. Jika ini tidak dilakukan, lapisan baris mungkin tidak menghubungkan titik terakhir poligon ke titik pertama.

Mengisi poligon dengan pola

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

// Load an image pattern into the map image sprite.
map.images.add(UIImage(named: "fill-checker-red")!, withID: "fill-checker-red")

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a polygon.
source.add(geometry: Polygon([
    CLLocationCoordinate2D(latitude: -20, longitude: -50),
    CLLocationCoordinate2D(latitude: 40, longitude: 0),
    CLLocationCoordinate2D(latitude: -20, longitude: 50),
    CLLocationCoordinate2D(latitude: -20, longitude: -50)
]))

// Create and add a polygon layer to render the polygon on the map, below the label layer.
map.layers.insertLayer(
    PolygonLayer(source: source, options: [
        .fillPattern("fill-checker-red"),
        .fillOpacity(0.5)
    ]),
    below: "labels"
)

Untuk sampel ini, gambar berikut dimuat ke dalam folder aset yang pada aplikasi.


`fill-checker-red.png`

Berikut ini adalah cuplikan layar dari kode di atas yang merender poligon dengan pola isian di peta.

Informasi Tambahan

Lihat artikel berikut untuk mengetahui sampel kode lainnya yang akan ditambahkan ke peta Anda:

Share via