Display OGC API Feature Collection

View inC++QMLView on GitHubSample viewer app

This sample demonstrates how to display an OGC API feature collection and query features while navigating the map view.

screenshot

Use case

When panning the map view, it is necessary to query the OGC API feature table to obtain additional features within the new visible extent.

How to use the sample

Pan the map and observe how new features are loaded from the OGC API feature service.

How it works

  1. Create an OgcFeatureCollectionTable object using a URL to an OGC API feature service and a collection ID.

  2. Set the feature table's featureRequestMode to Enums.FeatureRequestModeManualCache so features requested from the server are cached locally.

  3. Create a FeatureLayer using the feature table and add it to the Map.

  4. Create a QueryParameters object with the following parameters:

    i. Set the geometry to the current extent of the map view.

    ii. Set the SpatialRelationship to Enums.SpatialRelationshipIntersects.

    iii. Set the MaxFeatures property to 5000 (some services have a low default value for maximum features).

  5. When the feature table loads and thereafter every time time the map view navigation completes, call OgcFeatureCollectionTable.populateFromService() using the query parameters from the previous steps.

Relevant API

  • OgcFeatureCollectionTable
  • QueryParameters

Additional information

See the OGC API website for more information on the OGC API family of standards.

Tags

feature, feature layer, feature table, OGC, OGC API, service, table, web

Sample Code

DisplayOgcApiFeatureCollection.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// [WriteFile Name=DisplayOgcApiFeatureCollection, Category=Layers]
// [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
import Esri.ArcGISRuntime

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

    MapView {
        id: mapView
        anchors.fill: parent

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

        Map {
            initBasemapStyle: Enums.BasemapStyleArcGISTopographic

            FeatureLayer {
                OgcFeatureCollectionTable {
                    id: ogcFeatureCollectionTable
                    url: "https://demo.ldproxy.net/daraa"
                    collectionId: "TransportationGroundCrv"

                    // Enums.FeatureRequestModeManualCache specifies that features from the server will be stored locally for display and querying
                    // In this mode, ServiceFeatureTable::populateFromService() must be called to populate the local cache
                    featureRequestMode: Enums.FeatureRequestModeManualCache

                    onLoadStatusChanged: {
                        // ogcFeatureCollectionTable.load() will be automatically called when added to a FeatureLayer
                        // populateFromService() will be called with the initial viewpoint extent
                        if (ogcFeatureCollectionTable.loadStatus === Enums.LoadStatusLoaded) {
                            ogcFeatureCollectionTable.populateFromService(queryParameters, false, []);
                        }
                    }
                }

                renderer: SimpleRenderer {
                    SimpleLineSymbol {
                        style: Enums.SimpleLineSymbolStyleSolid
                        color: "blue"
                        width: 3
                    }
                }
            }

            ViewpointCenter {
                targetScale: 20000
                center: Point {
                    x: 36.10
                    y: 32.62
                    spatialReference: SpatialReference{ wkid: 4326 }
                }
            }
        }

        QueryParameters {
            id: queryParameters
            // Set the query area to what is currently visible in the map view
            geometry: mapView.currentViewpointExtent ? mapView.currentViewpointExtent.extent : null
            // Enums.SpatialRelationshipIntersects will return all features that are within and crossing the perimiter of the input geometry
            spatialRelationship: Enums.SpatialRelationshipIntersects
            // Some services have low default values for max features returned
            maxFeatures: 5000
        }

        onNavigatingChanged: {
            if (mapView.navigating)
                return;

            // Populate the feature collection table with features that match the parameters, cache them locally, and store all table fields
            ogcFeatureCollectionTable.populateFromService(queryParameters, false, []);
        }
    }
}

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