Een veelhoeklaag toevoegen aan de kaart in de iOS SDK (preview)

Artikel
04/07/2024

In dit artikel leest u hoe u de gebieden van en MultiPolygon functiegeometrieën op de kaart weergeeft met behulp van Polygon een polygoonlaag.

Notitie

Buitengebruikstelling van Azure Kaarten iOS SDK

De Azure Kaarten Native SDK voor iOS is nu afgeschaft en wordt buiten gebruik gesteld op 3-31-25. Om serviceonderbrekingen te voorkomen, migreert u tegen 3-31-25 naar de Azure Kaarten Web SDK. Zie de migratiehandleiding voor de Azure Kaarten iOS SDK voor meer informatie.

Vereisten

Zorg ervoor dat u de stappen in de quickstart voltooit: Een iOS-app-document maken. Codeblokken in dit artikel kunnen worden ingevoegd in de viewDidLoad functie van ViewController.

Een polygoonlaag gebruiken

Wanneer een veelhoeklaag is verbonden met een gegevensbron en op de kaart wordt geladen, wordt het gebied weergegeven met Polygon en MultiPolygon functies. Als u een veelhoek wilt maken, voegt u deze toe aan een gegevensbron en geeft u deze weer met een veelhoeklaag met behulp van de PolygonLayer klasse.

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

In de volgende schermopname ziet u de bovenstaande code die het gebied van een veelhoek weergeeft met behulp van een polygoonlaag.

Een polygoon en lijnlaag samen gebruiken

Een lijnlaag wordt gebruikt om het overzicht van veelhoeken weer te geven. In het volgende codevoorbeeld wordt een veelhoek weergegeven zoals in het vorige voorbeeld, maar er wordt nu een lijnlaag toegevoegd. Deze lijnlaag is een tweede laag die is verbonden met de gegevensbron.

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

In de volgende schermopname ziet u de bovenstaande code die een veelhoek weergeeft met het overzicht dat wordt weergegeven met behulp van een lijnlaag.

Tip

Wanneer u een veelhoek met een lijnlaag weergeeft, moet u alle ringen in veelhoeken sluiten, zodat elke matrix met punten hetzelfde begin- en eindpunt heeft. Als dit niet is gebeurd, kan de lijnlaag het laatste punt van de veelhoek mogelijk niet verbinden met het eerste punt.

Een veelhoek vullen met een patroon

Naast het vullen van een veelhoek met een kleur, kunt u een afbeeldingspatroon gebruiken om de veelhoek te vullen. Laad een afbeeldingspatroon in de sprite-resources van de kaartafbeelding en verwijs vervolgens naar deze afbeelding met de fillPattern optie van de polygoonlaag.

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

Voor dit voorbeeld is de volgende afbeelding geladen in de map assets van de app.


`fill-checker-red.png`

Hier volgt een schermopname van de bovenstaande code die een veelhoek weergeeft met een opvulpatroon op de kaart.

Aanvullende informatie

Zie de volgende artikelen voor meer codevoorbeelden die u aan uw kaarten kunt toevoegen:

Delen via