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: