nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Is there any way to add a label to the middle of a polyline graphic in a sceneView

alionthego

I am creating a poly line graphic to add to a sceneView for a SwiftUI app. Is there any way to add a text label along this line?

Ideally I would like a box with some text inside it along the direction of the line in the middle of the line if that's achievable.

let polyline = Polyline(
    points: [
        point1,
        point2
    ]
)
let polylineSymbol = SimpleLineSymbol(style: .solid, color: .cyan, width: 2.0)
let polylineGraphic = Graphic(geometry: polyline, symbol: polylineSymbol)

Finde mehr Beiträge mit dem Tag

Accepted answers

Ting

Please see the code snippet below. The key here is to set

overlay.labelsAreEnabled = true

so that the overlay allows displaying labels.

import SwiftUI
import ArcGIS

class Model: ObservableObject {
    let lineOverlay: GraphicsOverlay = {
        let textSymbol = TextSymbol(color: .blue, size: 12)
        let expression = SimpleLabelExpression(simpleExpression: "[Name]")
        let labelDefinition = LabelDefinition(labelExpression: expression, textSymbol: textSymbol)
        labelDefinition.placement = .lineCenterAlong
        
        let overlay = GraphicsOverlay()
        overlay.labelsAreEnabled = true
        overlay.addLabelDefinition(labelDefinition)
        
        return overlay
    }()
}

struct ContentView: View {
    @StateObject private var model = Model()
    
    @State private var scene = Scene(basemapStyle: .arcGISLightGray)
    
    @State private var camera: Camera? = Camera(location: Point(x: 113.0, y: 22.0, z: 4_953_394, spatialReference: .wgs84), heading: 360.0, pitch: 0.0, roll: 0)
    
    func addGraphic(latitude: Double, longitude: Double) {
        let polyline = Polyline(
            points: [
                Point(latitude: latitude, longitude: longitude),
                Point(x: 115, y: 24)
            ]
        )
        let polylineSymbol = SimpleLineSymbol(style: .solid, color: .cyan, width: 2.0)
        let polylineGraphic = Graphic(geometry: polyline, attributes: ["Name": "Hello World"], symbol: polylineSymbol)
        model.lineOverlay.addGraphic(polylineGraphic)
    }
    
    var body: some View {
        SceneView(scene: scene, camera: $camera, graphicsOverlays: [model.lineOverlay])
            .onAppear {
                addGraphic(latitude: 39, longitude: 120)
            }
    }
}

All comments

MichaelBranscomb

Here's a sample that shows how to setup labels for a layer (albeit a polygon layer in this case, but the pattern is basically the same): Show labels on layer.

And here's the full technical Labeling properties manual that provides detailed information on how the properties that you see in ArcGIS Pro map onto API types exposed in Swift.

Even if you don't currently have access to the ArcGIS Pro desktop software, I recommend looking at the documentation to determine the properties that will help you achieve the effect you're looking for in the API.

Introduction to the Maplex labeling engine in ArcGIS Pro: Label with the Maplex Label Engine—ArcGIS Pro | Documentation
Specific Line labeling properties/behaviors in ArcGIS Pro: Labels for line features—ArcGIS Pro | Documentation

For placing a label "along the direction of the line in the middle of the line" you probably want to use 1.14.0 placement property value `lineCenterAlong` which means Center of label prefers the midpoint of the geometry, label follows the geometry segments. And the symbol is determined by the TextSymbol | Documentation you specify.

Ting

To add to Michael's comment, if you only want to create a temporary symbol for a graphic, you can also use TextSymbol API. For example, the code below adds a text to the polyline at the middle with some offset.

let lineSymbol = SimpleLineSymbol(style: .solid, color: .red, width: 3)
let textSymbol = TextSymbol(text: "1", color: .yellow, size: 20, horizontalAlignment: .center, verticalAlignment: .middle)
textSymbol.offsetX = 10
let compositeSymbol = CompositeSymbol(symbols: [lineSymbol, textSymbol])

let polyline = Polyline(points: [Point(latitude: 0, longitude: 0), Point(latitude: 10, longitude: 0)])
let graphic = Graphic(geometry: polyline, symbol: compositeSymbol)

However, from a cartography standpoint, it would be better to author the feature layers with labels, or even renderers (that define what symbol should be applied to what features with certain attributes) baked-in, and directly consume it on a mobile device.

alionthego

Hi. Thanks for the assistance. I've tried to add this using just some example text because I haven't figured out the $feature. yet but the example text is not displayed on the poly lines in my layer. Using this method am I able to add labels to a GraphicsLayer consisting of Polyline Graphics?

In the code below myOverlay is a GraphicsOverlay which I have added graphics to that have polyline geometry and SimpleLineSymbol. The graphicsOverlay appears but without the Text Test above each line.

let textSymbol = TextSymbol(color: .blue, size: 12)
let expression = "Test"
let arcadeLabelExpression = ArcadeLabelExpression(arcadeString: expression)
let labelDefinition = LabelDefinition(labelExpression: arcadeLabelExpression, textSymbol: textSymbol)
labelDefinition.placement = .lineCenterAlong
myOverlay.addLabelDefinition(labelDefinition)

alionthego

I have tried composite symbol before but it is not nicely along the line. I believe Michael's approach is more along the lines of what I wanted. Mind the Pun.

MichaelBranscomb

🤣 Spatial puns are the best kind!

I recommend avoiding CompositeSymbol. It has a more modern equivalent in the MultiLayerSymbol, although this does involve a more complex object model. A great way to work with these newer multi layer symbols is to use ArcGIS Pro to create symbols and then put them in a mobile style file (a sqlite database under the hood) and then you can search and retrieve those symbols from the mobile style and apply to your features or graphics.

We don't currently have a Swift sample for this (on the roadmap), but conceptually you can refer to these existing .NET samples:

Read symbols from mobile style | ArcGIS Maps SDK for .NET | ArcGIS Developers
Create symbol styles from web styles | ArcGIS Maps SDK for .NET | ArcGIS Developers

Our cartographer John Nelson publishes some lovely desktop styles that you can open in ArcGIS Pro and copy into a mobile style file and then use in the Native Maps SDKs - see this ArcGIS Online search for his current range.

MichaelBranscomb

If you want to display arbitrary text, then a simple label expression may be better initially: SimpleLabelExpression | Documentation (arcgis.com)

For ArcadeLabelExpressions I recommend browsing the doc Introduction | ArcGIS Arcade | ArcGIS Developers and then also trying out the Playground | ArcGIS Arcade | ArcGIS Developers. Essentially Arcade enables you to create label expressions that are derived from attributes in the data and can include more advanced behaviors such as calculations and formatting.

alionthego

Thanks. I tried the SimpleLabelExpression as well but nothing is appearing. Not sure if the problem is that these only work with FeatureLayers and not GraphicOverlays or maybe my Lite Licence does not allow this.

Ting

Apologies for the very late response. Just want to let you know this question is still under my radar and I'll post updates once I get feedback from our text feature team.

Ting

Please see the code snippet below. The key here is to set

overlay.labelsAreEnabled = true

so that the overlay allows displaying labels.

import SwiftUI
import ArcGIS

class Model: ObservableObject {
    let lineOverlay: GraphicsOverlay = {
        let textSymbol = TextSymbol(color: .blue, size: 12)
        let expression = SimpleLabelExpression(simpleExpression: "[Name]")
        let labelDefinition = LabelDefinition(labelExpression: expression, textSymbol: textSymbol)
        labelDefinition.placement = .lineCenterAlong
        
        let overlay = GraphicsOverlay()
        overlay.labelsAreEnabled = true
        overlay.addLabelDefinition(labelDefinition)
        
        return overlay
    }()
}

struct ContentView: View {
    @StateObject private var model = Model()
    
    @State private var scene = Scene(basemapStyle: .arcGISLightGray)
    
    @State private var camera: Camera? = Camera(location: Point(x: 113.0, y: 22.0, z: 4_953_394, spatialReference: .wgs84), heading: 360.0, pitch: 0.0, roll: 0)
    
    func addGraphic(latitude: Double, longitude: Double) {
        let polyline = Polyline(
            points: [
                Point(latitude: latitude, longitude: longitude),
                Point(x: 115, y: 24)
            ]
        )
        let polylineSymbol = SimpleLineSymbol(style: .solid, color: .cyan, width: 2.0)
        let polylineGraphic = Graphic(geometry: polyline, attributes: ["Name": "Hello World"], symbol: polylineSymbol)
        model.lineOverlay.addGraphic(polylineGraphic)
    }
    
    var body: some View {
        SceneView(scene: scene, camera: $camera, graphicsOverlays: [model.lineOverlay])
            .onAppear {
                addGraphic(latitude: 39, longitude: 120)
            }
    }
}

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.