Add layers to a 3D scene

Overview

You will learn: how to add feature layers to a 3D map.

With ArcGIS Runtime SDK for Qt, it's easy to create a mapping app that displays a basemap and one or more layers. ArcGIS Online hosts several tile and vector tile basemaps that you can use in your map (2D) or scene (3D). Feature layers allow you to add datasets hosted online (with ArcGIS Online or other ArcGIS servers) or stored locally (in a runtime geodatabase, for example). By default, feature layers will draw with pre-set symbols to fill the extent of map, but you can customize this by setting your own styles with a renderer or using a SQL expression to limit the data retrieved.

In this lab you will create a new scene with an imagery basemap, add a feature layer that represents trails near Los Angeles, and display the scene in your app.

Before you begin

You must have previously installed the ArcGIS Runtime SDK for Qt and set up your development environment. Please review the install and set up instructions in the developers guide or Linux, macOS, or Windows if you have not done this.

Steps

Create a new ArcGIS Runtime App Qt Creator Project

1. Start Qt Creator.

2. Choose the ArcGIS Runtime Qt Quick app project template.

3. Give your app a name. For this lab we chose add-layers-to-a-3d-scene, but you can choose any name that suits you. Also select the location where your project files should reside on your system. Select Next.

4. On the Define Project Details dialog, select the checkbox 3D project. Choose Imagery with Labels from the ArcGIS Online Basemap drop-down list. Leave the other settings as their suggested values and select Next.

5. On the Kit Selection dialog, choose one of the kits you previously setup when you installed the Qt Framework. Select Next.

6. Verify your selections and select Done.

Create a new scene with an imagery basemap

7. Open the main.qml code file in your project. It is in your new project under Resources/qml/qml.qrc/qml.

8. Add an id property to the SceneView object. After the opening brace ({) of the SceneView declaration, add the following line:

   id: sceneView
   

9. Declare a FeatureLayer object and set the viewpoint of the SceneView to the extent of the FeatureLayer. After the closing brace of the Surface object declaration, but still within the Scene declaration, add the following code:

    FeatureLayer {
        id: featureLayer
   
        ServiceFeatureTable {
            url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
        }
   
        onLoadStatusChanged: {
            if (loadStatus === Enums.LoadStatusLoaded) {
                sceneView.setViewpoint(ArcGISRuntimeEnvironment.createObject("ViewpointExtent", {extent: featureLayer.fullExtent}));
            }
        }
    }
   

10. Run your app to test your code. When the app opens, you should see imagery of Los Angeles appear with trails displayed on top. Because you used a ViewpointExtent object to set the scene's viewpoint, the scene looks like a 2D map at the initial scale. You can use map gestures or the mouse to zoom out until you see the globe, or change the pitch of the viewpoint to see the imagery draped over the elevation surface.

11. For an initial viewpoint that is more obviously 3D, change the initial viewpoint type. Declare a ViewpointCenter object containing a Camera object. Add the following code to the SceneView object after the closing brace of the FeatureLayer declaration:

            ViewpointCenter {
                id: viewpoint
                Point {
                    x: -118.71511
                    y: 34.09042
                    z: 62.013264927081764
                    SpatialReference { wkid: 4326 }
                }
                targetScale: 62.013264927081764
                Camera {
                    location: Point {
                        x: -118.655111
                        y: 33.76896
                        z: 20000.0
                        SpatialReference { wkid: 4326 }
                    }
                    heading: 0.0
                    pitch: 50.0
                    roll: 0
                }
            }
    

12. Remove the onLoadStatusChanged function in the FeatureLayer declaration. It is no longer needed.

13. Run your app to test your code. When the app opens, you see a 3D perspective of the scene with the trails drawn on the map.

Congratulations, you're done!

Check out and compare with our completed solution project.

Challenge

Explore basemaps

Add additional feature layers

Filter features in the trailheads layer