Display 3D labels in scene

View inC++QMLView on GitHubSample viewer app

This sample demonstrates how to display custom labels in a 3D scene.

screenshot

Use case

Labeling features is useful to visually display information or attributes on a scene. For example, city officials or maintenance crews may want to show installation dates of features of a gas network.

How to use the sample

Pan and zoom to explore the scene. Notice the labels showing installation dates of features in the 3D gas network.

How it works

  1. Create an Scene from a PortalItem.
  2. Add the scene to an SceneView and load it.
  3. After loading is complete, obtain the FeatureLayer from one of the GroupLayers in the scene's operationalLayers.
  4. Create a TextSymbol to define how labels are stylized.
  5. After the Scene has loaded, obtain the FeatureLayer from the scene's operationalLayers.
  6. Create an LabelDefinition using an ArcadeLabelExpression.
  • Set the "labelExpressionInfo.expression" key to define what text the label should display. You can use fields of the feature by using $feature.NAME in the expression.
  1. Add the definition to the feature layer's labelDefinitions array.

Relevant API

  • ArcadeLabelExpression
  • FeatureLayer
  • LabelDefinition
  • Scene
  • SceneView
  • TextSymbol

About the data

This sample shows a New York City infrastructure scene hosted on ArcGIS Online.

Tags

3D, arcade, attribute, buildings, label, model, scene, symbol, text, URL, visualization

Sample Code

Display3DLabelsInScene.qml
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// [WriteFile Name=Display3DLabelsInScene, Category=Scenes]
// [Legal]
// Copyright 2021 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import QtQuick 2.6
import Esri.ArcGISRuntime 100.15

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    SceneView {
        id: sceneView
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on SceneView to initially enable keyboard navigation
            forceActiveFocus();
        }

        // add a Scene to the SceneView
        Scene {
            id: nycScene
            initUrl: "https://www.arcgis.com/home/item.html?id=850dfee7d30f4d9da0ebca34a533c169"

            LabelDefinition {
                id: gasLineLabelDefinition

                expression: ArcadeLabelExpression {
                    expression: "Text($feature.INSTALLATIONDATE, 'D MMM Y')"
                }

                textSymbol: TextSymbol {
                    color: "#ffa500"
                    haloColor: "white"
                    haloWidth: 2.0
                    size: 16.0
                }

                placement: Enums.LabelingPlacementLineAboveAlong
                useCodedValues: true
            }

            onLoadStatusChanged: {
                if (loadStatus !== Enums.LoadStatusLoaded)
                    return;

                // Search for a specific layer from the web scene's operational layers to apply labels to
                nycScene.operationalLayers.forEach(layer => {
                                                       if (layer.name === "Gas") {
                                                           // The Gas layer is a GroupLayer type and we must extract our target FeatureLayer from it
                                                           const gasLayer = layer.layers.get(0);
                                                           // This layer has a preexisting label definition from the web that we don't want to display
                                                           gasLayer.labelDefinitions.clear();
                                                           gasLayer.labelDefinitions.append(gasLineLabelDefinition);
                                                           gasLayer.labelsEnabled = true;
                                                       }
                                                   });
            }
        }
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.