Lägg till ett polygonlager på kartan i iOS SDK (förhandsversion)

Artikel
04/07/2024

Den här artikeln visar hur du renderar områden i och MultiPolygon funktionsgeometrier på kartan med hjälp av Polygon ett polygonskikt.

Kommentar

Azure Kartor iOS SDK-tillbakadragning

Azure Kartor Native SDK för iOS är nu inaktuell och kommer att dras tillbaka den 3/31/25. För att undvika tjänststörningar migrerar du till Azure Kartor Web SDK senast 3/31/25. Mer information finns i migreringsguiden för Azure Kartor iOS SDK.

Förutsättningar

Slutför stegen i snabbstarten : Skapa ett iOS-appdokument . Kodblock i den här artikeln kan infogas i viewDidLoad funktionen ViewController.

Använda ett polygonskikt

När ett polygonlager är anslutet till en datakälla och läses in på kartan återges området med Polygon och MultiPolygon funktioner. Om du vill skapa en polygon lägger du till den i en datakälla och renderar den med ett polygonlager med hjälp av PolygonLayer klassen .

// 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"
)

Följande skärmbild visar koden ovan som återger området för en polygon med hjälp av ett polygonlager.

Använd ett polygon- och linjeskikt tillsammans

Ett linjeskikt används för att återge konturen av polygoner. Följande kodexempel återger en polygon som i föregående exempel, men lägger nu till ett linjeskikt. Det här linjeskiktet är ett andra lager som är anslutet till datakällan.

// 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)
]))

Följande skärmbild visar koden ovan som återger en polygon med dess kontur renderad med hjälp av ett linjeskikt.

Dricks

När du beskriver en polygon med ett linjeskikt ska du stänga alla ringar i polygoner så att varje matris med punkter har samma start- och slutpunkt. Om detta inte görs kanske linjeskiktet inte ansluter polygonens sista punkt till den första punkten.

Fyll en polygon med ett mönster

Förutom att fylla en polygon med en färg kan du använda ett bildmönster för att fylla polygonen. Läs in ett bildmönster i mappningsbildens sprite-resurser och referera sedan till den fillPattern här bilden med alternativet för polygonskiktet.

// 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"
)

I det här exemplet lästes följande bild in i appens resursmapp.


`fill-checker-red.png`

Följande är en skärmbild av koden ovan som återger en polygon med ett fyllningsmönster på kartan.

Ytterligare information

I följande artiklar finns fler kodexempel att lägga till i dina kartor:

Dela via