Menambahkan lapisan ekstrusi poligon ke peta di SDK iOS (Pratinjau)

Artikel ini memperlihatkan kepada Anda cara menggunakan lapisan ekstrusi poligon untuk merender area geometri fitur Polygon dan MultiPolygon sebagai bentuk yang diekstrusi.

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.

Menggunakan lapisan ekstrusi poligon

Sambungkan lapisan ekstrusi poligon ke sumber data. Kemudian, muat ke peta. Lapisan ekstrusi poligon merender area fitur Polygon dan MultiPolygon sebagai bentuk yang diekstrusi. Properti height dan base lapisan ekstrusi poligon menentukan jarak dasar dari dasar dan ketinggian bentuk yang diekstrusi dalam meter. Kode berikut menunjukkan cara membuat poligon, menambahkannya ke sumber data, dan merendernya menggunakan kelas lapisan ekstrusi Polygon.

// 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.800279, longitude: -73.958383),
    CLLocationCoordinate2D(latitude: 40.768459, longitude: -73.981547),
    CLLocationCoordinate2D(latitude: 40.767761, longitude: -73.981246),
    CLLocationCoordinate2D(latitude: 40.764616, longitude: -73.973618),
    CLLocationCoordinate2D(latitude: 40.765128, longitude: -73.973060),
    CLLocationCoordinate2D(latitude: 40.764908, longitude: -73.972599),
    CLLocationCoordinate2D(latitude: 40.796584, longitude: -73.949446),
    CLLocationCoordinate2D(latitude: 40.797088, longitude: -73.949661),
    CLLocationCoordinate2D(latitude: 40.800523, longitude: -73.957815),
    CLLocationCoordinate2D(latitude: 40.800279, longitude: -73.958383)
]))

// Create and add a polygon extrusion layer to the map below the labels so that they are still readable.
map.layers.insertLayer(
    PolygonExtrusionLayer(source: source, options: [
        .fillColor(.red),
        .fillOpacity(0.7),
        .height(500)
    ]),
    below: "labels"
)

Cuplikan layar berikut memperlihatkan kode di atas yang merender poligon yang direntangkan secara vertikal menggunakan lapisan ekstrusi poligon.

Menambahkan poligon berbasis data

Peta choropleth dapat dirender menggunakan lapisan ekstrusi poligon. Atur properti height dan fillColor lapisan ekstrusi ke pengukuran variabel statistik dalam geometri fitur Polygon dan MultiPolygon. Sampel kode berikut menunjukkan peta choropleth yang diekstrusi di Amerika Serikat berdasarkan pengukuran kepadatan populasi menurut negara bagian.

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

// Import the geojson data and add it to the data source.
source.importData(fromURL: Bundle.main.url(forResource: "US_States_Population_Density", withExtension: "json")!)

map.sources.add(source)

// Create and add a polygon extrusion layer to the map below the labels so that they are still readable.
let densityColorSteps: [Int: UIColor] = [
    0: UIColor(red: 0, green: 1, blue: 0.5, alpha: 1),
    10: UIColor(red: 9 / 255, green: 224 / 255, blue: 118 / 255, alpha: 1),
    20: UIColor(red: 11 / 255, green: 191 / 255, blue: 103 / 255, alpha: 1),
    50: UIColor(red: 247 / 255, green: 227 / 255, blue: 5 / 255, alpha: 1),
    100: UIColor(red: 247 / 255, green: 199 / 255, blue: 7 / 255, alpha: 1),
    200: UIColor(red: 247 / 255, green: 130 / 255, blue: 5 / 255, alpha: 1),
    500: UIColor(red: 247 / 255, green: 94 / 255, blue: 5 / 255, alpha: 1),
    1000: UIColor(red: 247 / 255, green: 37 / 255, blue: 5 / 255, alpha: 1)
]
let colorExpression = NSExpression(
    forAZMStepping: NSExpression(forKeyPath: "density"),
    from: NSExpression(forConstantValue: UIColor(red: 0, green: 1, blue: 0.5, alpha: 1)),
    stops: NSExpression(forConstantValue: densityColorSteps)
)

let densityHeightSteps: [Int: Int] = [
    0: 100,
    1200: 960_000
]
let heightExpression = NSExpression(
    forAZMInterpolating: NSExpression(forKeyPath: "density"),
    curveType: .linear,
    parameters: nil,
    stops: NSExpression(forConstantValue: densityHeightSteps)
)

map.layers.insertLayer(
    PolygonExtrusionLayer(source: source, options: [
        .fillOpacity(0.7),
        .fillColor(from: colorExpression),
        .height(from: heightExpression)
    ]),
    below: "labels"
)

Cuplikan layar berikut memperlihatkan peta choropleth negara bagian AS yang diberi warna dan direntangkan secara vertikal sebagai poligon yang diekstrusi berdasarkan kepadatan populasi.

Informasi Tambahan

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

• Membuat sumber data
• Menggunakan ekspresi gaya berbasis data
• Menambah lapisan poligon