@open-pioneer/ogc-features

This package provides utilities to work with OGC API Features services.

Usage

Vector source

This vector source should be used together with a vector layer.

Inject the vector source factory by referencing "ogc-features.VectorSourceFactory":

// build.config.mjs
import { defineBuildConfig } from "@open-pioneer/build-support";

export default defineBuildConfig({
    services: {
        YourService: {
            // ...
            references: {
                vectorSourceFactory: "ogc-features.VectorSourceFactory"
            }
        }
    }
});

and use it inside a VectorLayer:

const vectorSourceFactory = ...; // injected
const vectorLayer = new VectorLayer({
    source: vectorSourceFactory.createVectorSource({
        baseUrl: "https://ogc-api.nrw.de/inspire-us-kindergarten/v1",
        collectionId: "governmentalservice",
        crs: "http://www.opengis.net/def/crs/EPSG/0/25832",

        /**
         * The maximum number of features to fetch within a single request.
         * Corresponds to the `limit` parameter in the URL.
         *
         * When the `offset` strategy is used for feature fetching, the limit
         * is used for the page size.
         *
         * Defaults to `5000`.
         */
        limit: 5000,

        /** The maximum number of concurrent requests. Defaults to `6`. */
        maxConcurrentRequests: 6,

        attributions:
            "<a href='https://www.govdata.de/dl-de/by-2-0'>Datenlizenz Deutschland - Namensnennung - Version 2.0</a>",

        additionalOptions: {} // (Optional)
    })
});

The optional limit configures the concurrent execution of requests by using the offset URL property for pagination. If the service returns a numberMatched property together with its results, it is used alongside the configured pageSize to calculate the optimal number of concurrent requests. The number of concurrent requests is never higher than maxConcurrentRequests.

Additional options of the VectorSource (see OpenLayers documentation) can be given by the property additionalOptions.

Search source

This search source is used to search in OGC API features.

Inject the search source factory by referencing "ogc-features.SearchSourceFactory":

// build.config.mjs
import { defineBuildConfig } from "@open-pioneer/build-support";

export default defineBuildConfig({
    services: {
        YourService: {
            // ...
            references: {
                ogcSearchSourceFactory: "ogc-features.SearchSourceFactory"
            }
        }
    }
});

and create a search search instance:

const ogcSearchSourceFactory = ...; // injected
const searchSource = ogcSearchSourceFactory.createSearchSource({
    label: this.intl.formatMessage({ id: "searchSources.lika" }),
    baseUrl: "https://ogc-api.nrw.de/lika/v1",
    collectionId: "flurstueck",
    searchProperty: "flurstid",
    labelProperty: "objid"
});

Use the callback function renderLabel to create a custom label for the result.

searchSourceFactory.createSearchSource({
    // ...
    renderLabel(feature) {
        const tntxt = feature?.properties?.tntxt;
        const id = feature?.id;
        if (typeof tntxt === "string") {
            return tntxt + " (" + id + ")";
        } else {
            return String(id);
        }
    }
    // ...
});

The label is generated by one of the following methods, weighted by order:

1. renderLabel function
2. labelProperty
3. searchProperty

To overwrite the service URL, use the callback function rewriteUrl. This is useful, for example, to return only a specific attribute in the response, as in the following example:

searchSourceFactory.createSearchSource({
    // ...
    rewriteUrl(url) {
        url.searchParams.set("properties", "objid");
        return url;
    }
    // ...
});

License

Apache-2.0 (see LICENSE file)