Menambahkan lapisan poligon ke peta di SDK iOS (Pratinjau)
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:
Saran dan Komentar
https://aka.ms/ContentUserFeedback.
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat:Kirim dan lihat umpan balik untuk