Een symboollaag toevoegen in de iOS SDK (preview)

In dit artikel leest u hoe u puntgegevens uit een gegevensbron kunt weergeven als een symboollaag op een kaart met behulp van de Azure Kaarten iOS SDK. Symboollagen geven punten weer als een afbeelding en tekst op de kaart.

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.

Tip

Symboollagen geven standaard de coördinaten van alle geometrieën in een gegevensbron weer. Als u de laag zodanig wilt beperken dat er alleen puntgeometriefuncties worden weergegeven, stelt u de filter optie van de laag in op NSPredicate(format: "%@ == \"Point\"", NSExpression.geometryTypeAZMVariable). Als u ook MultiPoint-functies wilt opnemen, gebruikt u NSCompoundPredicate.

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 symboollaag toevoegen

Voordat u een symboollaag aan de kaart kunt toevoegen, moet u een aantal stappen uitvoeren. Maak eerst een gegevensbron en voeg deze toe aan de kaart. Een symboollaag maken. Geef vervolgens de gegevensbron door aan de symboollaag om de gegevens op te halen uit de gegevensbron. Voeg ten slotte gegevens toe aan de gegevensbron, zodat er iets moet worden weergegeven.

De volgende code laat zien wat er moet worden toegevoegd aan de kaart nadat deze is geladen. In dit voorbeeld wordt een enkel punt op de kaart weergegeven met behulp van een symboollaag.

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

//Create a point and add it to the data source.
source.add(geometry: Point(CLLocationCoordinate2D(latitude: 0, longitude: 0)))

//Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(source: source)

//Add the layer to the map.
map.layers.addLayer(layer)

Er zijn drie verschillende typen puntgegevens die kunnen worden toegevoegd aan de kaart:

• GeoJSON-puntgeometrie: dit object bevat alleen een coördinaat van een punt en niets anders. De Point init-methode kan worden gebruikt om deze objecten eenvoudig te maken.
• GeoJSON MultiPoint-geometrie: dit object bevat de coördinaten van meerdere punten en niets anders. Geef een matrix met coördinaten door aan de PointCollection klasse om deze objecten te maken.
• GeoJSON-functie: dit object bestaat uit een GeoJSON-geometrie en een set eigenschappen die metagegevens bevatten die zijn gekoppeld aan de geometrie.

Zie het document Een gegevensbron maken voor het maken en toevoegen van gegevens aan de kaart voor meer informatie.

Het volgende codevoorbeeld maakt een GeoJSON-puntgeometrie en geeft deze door aan de GeoJSON-functie en heeft een title toegevoegde waarde aan de eigenschappen. De title eigenschap wordt weergegeven als tekst onder het symboolpictogram op de kaart.

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

// Create a point feature.
let feature = Feature(Point(CLLocationCoordinate2D(latitude: 0, longitude: 0)))

// Add a property to the feature.
feature.addProperty("title", value: "Hello World!")

// Add the feature to the data source.
source.add(feature: feature)

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(
    source: source,
    options: [
        // Get the title property of the feature and display it on the map.
        .textField(from: NSExpression(forKeyPath: "title")),

        // Place the text below so it doesn't overlap the icon.
        .textAnchor(.top)
    ]
)

// Add the layer to the map.
map.layers.addLayer(layer)

In de volgende schermopname ziet u de bovenstaande code die een puntfunctie weergeeft met behulp van een pictogram en tekstlabel met een symboollaag.

Tip

Standaard optimaliseren symboollagen het weergeven van symbolen door symbolen die overlappen te verbergen. Terwijl u inzoomt, worden de verborgen symbolen zichtbaar. Als u deze functie wilt uitschakelen en alle symbolen altijd wilt weergeven, stelt u de iconAllowOverlap en textAllowOverlap opties in op true.

Een aangepast pictogram toevoegen aan een symboollaag

Symboollagen worden weergegeven met behulp van OpenGL. Als zodanig moeten alle resources, zoals pictogramafbeeldingen, in de OpenGL-context worden geladen. In dit voorbeeld ziet u hoe u een aangepast pictogram toevoegt aan de kaartresources. Dit pictogram wordt vervolgens gebruikt om puntgegevens weer te geven met een aangepast symbool op de kaart. Voor textField de eigenschap van de symboollaag moet een expressie worden opgegeven. In dit geval willen we de temperatuureigenschap weergeven. Daarnaast willen we hieraan toevoegen "°F" . Een expressie kan worden gebruikt om deze samenvoeging uit te voeren:

NSExpression(
    forAZMFunctionJoin: [
        NSExpression(forKeyPath: "temperature"),
        NSExpression(forConstantValue: "°F")
    ]
)

// Load a custom icon image into the image sprite of the map.
map.images.add(UIImage(named: "showers")!, withID: "my-custom-icon")

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

// Create a point feature.
let feature = Feature(Point(CLLocationCoordinate2D(latitude: 40.75773, longitude: -73.985708)))

// Add a property to the feature.
feature.addProperty("temperature", value: 64)

// Add the feature to the data source.
source.add(feature: feature)

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(
    source: source,
    options: [
        .iconImage("my-custom-icon"),
        .iconSize(0.5),
        // Get the title property of the feature and display it on the map.
        .textField(
            from: NSExpression(
                forAZMFunctionJoin: [
                    NSExpression(forKeyPath: "temperature"),
                    NSExpression(forConstantValue: "°F")
                ]
            )
        ),
        .textOffset(CGVector(dx: 0, dy: -1.5))
    ]
)

// Add the layer to the map.
map.layers.addLayer(layer)

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

showers.png

In de volgende schermopname ziet u de bovenstaande code die een puntfunctie weergeeft met behulp van een aangepast pictogram en opgemaakt tekstlabel met een symboollaag.

Tip

Als u alleen tekst met een symboollaag wilt weergeven, kunt u het pictogram verbergen door de iconImage eigenschap van de pictogramopties in te stellen op nil.

Vooraf gedefinieerde pictogrammen voor symboolmarkeringen

In eerste instantie heeft de kaart het ingebouwde standaardmarkeringspictogram, dat al in de afbeeldingsspite van de kaart is geladen. Deze wordt standaard gebruikt als er niets is ingesteld op de iconImage optie. Als u dit handmatig moet doen, stelt u deze in "marker-default" op de iconImage optie.

let layer = SymbolLayer(source: source, options: [.iconImage("marker-default")])

De Azure Kaarten iOS SDK wordt ook geleverd met een set vooraf gedefinieerde kleurvariaties van het standaardmarkeringspictogram (donkerblauw). Als u deze markeringspictogrammen wilt openen, gebruikt u de statische variabelen in UIImage klasse, bijvoorbeeld: UIImage.azm_markerRed.

Als u een niet-standaard vooraf gedefinieerde markeringsafbeelding wilt gebruiken, moet u deze toevoegen aan de afbeeldingsspite van de kaart.

// Load a non-default predefined icon into the image sprite of the map.
map.images.add(.azm_markerRed, withID: "marker-red")

// Create a symbol layer to render icons and/or text at points on the map.
let layer = SymbolLayer(source: source, options: [.iconImage("marker-red")])

De onderstaande code bevat de ingebouwde pictogramafbeeldingen die beschikbaar zijn als statische variabelen van UIImage klasse.

UIImage.azm_markerDefault // Dark blue
UIImage.azm_markerBlack
UIImage.azm_markerBlue
UIImage.azm_markerRed
UIImage.azm_markerYellow

Aanvullende informatie

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

• Een gegevensbron maken
• Puntgegevens clusteren
• Een bellenlaag toevoegen
• Gegevensgestuurde stijlexpressies gebruiken
• Functie-informatie weergeven