Display 3D labels in scene

View inQMLC++
View on GitHub
Sample 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 a Scene from a URL.
  2. Create a LabelDefinition to define how the labels will be displayed.
  3. Create an ArcadeLabelExpression to define the labels' format.
  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. Set the labelsEnabled property to true.
  7. Add the label definition to the feature layer's labelDefinitions list model.

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, attribute, buildings, label, model, scene, symbol, text, URL, visualization

Sample Code

Display3DLabelsInScene.qml
                                                                       
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
// [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.11

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

    SceneView {
        id: sceneView
        anchors.fill: parent

        // 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.