Dela via

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

  • Artikel

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.

Ett linjeskikt kan användas för att återge LineString och MultiLineString funktioner som sökvägar eller vägar på kartan. Ett linjeskikt kan också användas för att återge dispositionen av Polygon och MultiPolygon funktionerna. En datakälla är ansluten till ett linjeskikt för att tillhandahålla data som ska återges.

Dricks

Linjeskikt återger som standard koordinaterna för polygoner samt rader i en datakälla. Om du vill begränsa lagret så att det bara renderar linestring-geometrifunktioner anger du filter alternativet för lagret till NSPredicate(format: "%@ == \"LineString\"", NSExpression.geometryTypeAZMVariable). Om du även vill inkludera MultiLineString-funktioner använder du NSCompoundPredicate.

Förutsättningar

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

Lägg till ett linjeskikt

Följande kod visar hur du skapar en rad. Lägg till raden i en datakälla och rendera den sedan med ett linjeskikt med hjälp av LineLayer klassen .

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

// Create a list of points.
let points = [
    CLLocationCoordinate2D(latitude: 40.74327, longitude: -73.97234),
    CLLocationCoordinate2D(latitude: 40.75680, longitude: -74.00442)
]

// Create a Polyline geometry and add it to the data source.
source.add(geometry: Polyline(points))

// Create a line layer and add it to the map.
let layer = LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeColor(.blue)
])
map.layers.addLayer(layer)

Följande skärmbild visar koden ovan som återger en rad i ett linjeskikt.

En enkel linje som visas på kartan i ett linjeskikt.

Datadrivet linjeformat

Följande kod skapar två radfunktioner och lägger till ett hastighetsgränsvärde som en egenskap för varje rad. Ett linjeskikt använder ett uttryck i dataenhetsformat som färgar linjerna baserat på hastighetsbegränsningsvärdet. Eftersom linjedata överlägg längs vägar lägger följande kod till linjeskiktet under etikettskiktet så att vägetiketterna förblir synliga.

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

// Create a line feature.
let feature = Feature(Polyline([
    CLLocationCoordinate2D(latitude: 47.704033, longitude: -122.131821),
    CLLocationCoordinate2D(latitude: 47.703678, longitude: -122.099919)
]))

// Add a property to the feature.
feature.addProperty("speedLimitMph", value: 35)

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

// Create a second line feature.
let feature2 = Feature(Polyline([
    CLLocationCoordinate2D(latitude: 47.708265, longitude: -122.126662),
    CLLocationCoordinate2D(latitude: 47.703980, longitude: -122.126877)
]))

// Add a property to the second feature.
feature2.addProperty("speedLimitMph", value: 15)

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

// Create a line layer and add it to the map.
let stops: [Int: UIColor] = [
    0: .green,
    30: .yellow,
    60: .red
]
let colorExpression = NSExpression(
    forAZMInterpolating: NSExpression(forKeyPath: "speedLimitMph"),
    curveType: .linear,
    parameters: nil,
    stops: NSExpression(forConstantValue: stops)
)

let layer = LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeColor(from: colorExpression)
])

map.layers.insertLayer(layer, below: "labels")

Följande skärmbild visar koden ovan som renderar två rader i ett linjeskikt med deras färg hämtad från ett datadrivet formatuttryck baserat på en egenskap i radfunktionerna.

Lägg till ett linjeskikt på en karta.

Lägga till en linjetoning till en linje

Du kan använda en enskild linjefärg på en linje. Du kan också fylla en linje med en toning av färger för att visa övergången från ett linjesegment till nästa linjesegment. Till exempel kan linjetoningar användas för att representera ändringar över tid och avstånd, eller olika temperaturer över en ansluten rad med objekt. För att kunna tillämpa den här funktionen på en rad måste datakällan ha lineMetrics alternativet inställt på true, och sedan kan ett färgtoningsuttryck skickas till strokeGradient alternativet för raden. Uttrycket för linjetoning måste referera till det NSExpression.lineProgressAZMVariable datauttryck som exponerar de beräknade radmåtten för uttrycket.

// Create a data source and add it to the map.
let source = DataSource(options: [
    // Enable line metrics on the data source. This is needed to enable support for strokeGradient.
    .lineMetrics(true)
])
map.sources.add(source)

// Create a line and add it to the data source.
source.add(geometry: Polyline([
    CLLocationCoordinate2D(latitude: 47.63208, longitude: -122.18822),
    CLLocationCoordinate2D(latitude: 47.63196, longitude: -122.18204),
    CLLocationCoordinate2D(latitude: 47.62976, longitude: -122.17243),
    CLLocationCoordinate2D(latitude: 47.63023, longitude: -122.16419),
    CLLocationCoordinate2D(latitude: 47.62942, longitude: -122.15852),
    CLLocationCoordinate2D(latitude: 47.62988, longitude: -122.15183),
    CLLocationCoordinate2D(latitude: 47.63451, longitude: -122.14256),
    CLLocationCoordinate2D(latitude: 47.64041, longitude: -122.13483),
    CLLocationCoordinate2D(latitude: 47.64422, longitude: -122.13466),
    CLLocationCoordinate2D(latitude: 47.65440, longitude: -122.13844),
    CLLocationCoordinate2D(latitude: 47.66515, longitude: -122.13277),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.12779),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.11595),
    CLLocationCoordinate2D(latitude: 47.66735, longitude: -122.11063),
    CLLocationCoordinate2D(latitude: 47.67035, longitude: -122.10668),
    CLLocationCoordinate2D(latitude: 47.67498, longitude: -122.10565)
]))

// Create a line layer and add it to the map.
let stops: [Double: UIColor] = [
    0: .blue,
    0.1: UIColor(red: 0.25, green: 0.41, blue: 1, alpha: 1), // Royal Blue
    0.3: .cyan,
    0.5: UIColor(red: 0, green: 1, blue: 0, alpha: 1), // Lime
    0.7: .yellow,
    1: .red
]
let colorExpression = NSExpression(
    forAZMInterpolating: NSExpression.lineProgressAZMVariable,
    curveType: .linear,
    parameters: nil,
    stops: NSExpression(forConstantValue: stops)
)

map.layers.addLayer(LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeGradient(from: colorExpression)
]))

Följande skärmbild visar koden ovan som visar en rad som återges med hjälp av en toningsfärg.

Lägg till ett toningslinjeskikt på en karta.

Lägga till symboler längs en linje

Det här exemplet visar hur du lägger till pilikoner längs en linje på kartan. När du använder ett symbollager anger du symbolPlacement alternativet till .line. Det här alternativet renderar symbolerna längs linjen och roterar ikonerna (0 grader = höger).

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

// Load a image of an arrow into the map image sprite and call it "arrow-icon".
map.images.add(UIImage(named: "purple-arrow-right")!, withID: "arrow-icon")

// Create a line and add it to the data source.
source.add(geometry: Polyline([
    CLLocationCoordinate2D(latitude: 47.63208, longitude: -122.18822),
    CLLocationCoordinate2D(latitude: 47.63196, longitude: -122.18204),
    CLLocationCoordinate2D(latitude: 47.62976, longitude: -122.17243),
    CLLocationCoordinate2D(latitude: 47.63023, longitude: -122.16419),
    CLLocationCoordinate2D(latitude: 47.62942, longitude: -122.15852),
    CLLocationCoordinate2D(latitude: 47.62988, longitude: -122.15183),
    CLLocationCoordinate2D(latitude: 47.63451, longitude: -122.14256),
    CLLocationCoordinate2D(latitude: 47.64041, longitude: -122.13483),
    CLLocationCoordinate2D(latitude: 47.64422, longitude: -122.13466),
    CLLocationCoordinate2D(latitude: 47.65440, longitude: -122.13844),
    CLLocationCoordinate2D(latitude: 47.66515, longitude: -122.13277),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.12779),
    CLLocationCoordinate2D(latitude: 47.66712, longitude: -122.11595),
    CLLocationCoordinate2D(latitude: 47.66735, longitude: -122.11063),
    CLLocationCoordinate2D(latitude: 47.67035, longitude: -122.10668),
    CLLocationCoordinate2D(latitude: 47.67498, longitude: -122.10565)
]))

// Create a line layer and add it to the map.
map.layers.addLayer(LineLayer(source: source, options: [
    .strokeWidth(5),
    .strokeColor(.purple)
]))

// Create a symbol layer and add it to the map.
map.layers.addLayer(SymbolLayer(source: source, options: [
    // Space symbols out along line.
    .symbolPlacement(.line),

    // Spread the symbols out 100 points apart.
    .symbolSpacing(100),

    // Use the arrow icon as the symbol.
    .iconImage("arrow-icon"),

    // Allow icons to overlap so that they aren't hidden if they collide with other map elements.
    .iconAllowOverlap(true),

    // Center the symbol icon.
    .iconAnchor(.center),

    // Scale the icon size.
    .iconSize(0.8)
]))

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

purple_arrow_right
purple-arrow-right.png

Följande skärmbild visar koden ovan som visar en linje med pilikoner som visas längs den.

En linje med lila pilikoner som visas längs den som pekar i riktning mot vägen.

Ytterligare information

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