@masterportal/masterportalapi 2.1.1

package/src/maps/olcs/olcsMap.js

@@ -0,0 +1,212 @@
+import OLCesium from "olcs/OLCesium.js";
+import VectorSynchronizer from "olcs/VectorSynchronizer.js";
+import FixedOverlaySynchronizer from "./3dUtils/fixedOverlaySynchronizer.js";
+import WMSRasterSynchronizer from "./3dUtils/wmsRasterSynchronizer.js";
+import {transform, get} from "ol/proj.js";
+
+let mapIdCounter = 0;
+
+/**
+ * Sets the cesium scene defaults from the config.js
+ * @param {Cesium.scene} scene Cesium scene.
+ * @param {Object} config optional configuration parameters.
+ * @returns {void}
+ */
+function setCesiumSceneDefaults (scene, config) {
+    let params;
+
+    if (Object.prototype.hasOwnProperty.call(config, "cesiumParameter")) {
+        params = config.cesiumParameter;
+        if (params?.fog) {
+            scene.fog.enabled = params.fog?.enabled ? params.fog.enabled : scene.fog.enabled;
+            scene.fog.density = params.fog?.density ? parseFloat(params.fog.density) : scene.fog.density;
+            scene.fog.screenSpaceErrorFactor = params.fog?.screenSpaceErrorFactor ? parseFloat(params.fog.screenSpaceErrorFactor) : scene.fog.screenSpaceErrorFactor;
+        }
+
+        scene.globe.tileCacheSize = params?.tileCacheSize ? parseInt(params.tileCacheSize, 10) : scene.globe.tileCacheSize;
+        scene.globe.maximumScreenSpaceError = params?.maximumScreenSpaceError ? params.maximumScreenSpaceError : scene.globe.maximumScreenSpaceError;
+        scene.shadowMap.maximumDistance = 5000.0;
+        scene.shadowMap.darkness = 0.6;
+        scene.shadowMap.size = 2048;
+        scene.fxaa = params?.fxaa ? params.fxaa : scene.fxaa;
+        scene.globe.enableLighting = params?.enableLighting ? params.enableLighting : scene.globe.enableLighting;
+        scene.globe.depthTestAgainstTerrain = true;
+        scene.highDynamicRange = false;
+        scene.pickTranslucentDepth = true;
+        scene.camera.enableTerrainAdjustmentWhenLoading = true;
+    }
+}
+
+/**
+ * Sets the camera parameters either from config or from an trigger.
+ * @param {Object} params Params.
+ * @param {Object} map3D olcs map.
+ * @param {Cesium} cesium cesium.
+ * @returns {void}
+ */
+export function setCameraParameter (params, map3D, cesium) {
+    let camera,
+        destination,
+        orientation;
+
+    // if the cameraPosition is given, directly set the cesium camera position, otherwise use olcesium Camera
+    if (map3D && params.cameraPosition) {
+        camera = map3D.getCesiumScene().camera;
+        destination = cesium.Cartesian3.fromDegrees(params.cameraPosition[0], params.cameraPosition[1], params.cameraPosition[2]);
+        orientation = {
+            heading: cesium.Math.toRadians(parseFloat(params.heading)),
+            pitch: cesium.Math.toRadians(parseFloat(params.pitch)),
+            roll: cesium.Math.toRadians(parseFloat(params.roll))
+        };
+
+        camera.setView({
+            destination,
+            orientation
+        });
+    }
+    else if (map3D !== undefined && params !== null) {
+        camera = map3D.getCamera();
+        if (params?.tilt) {
+            camera.setTilt(parseFloat(params.tilt));
+        }
+        if (params?.heading) {
+            camera.setHeading(parseFloat(params.heading));
+        }
+        if (params?.altitude) {
+            camera.setAltitude(parseFloat(params.altitude));
+        }
+    }
+}
+
+/**
+ * Reacts to 3D click event in cesium scene.
+ * @param {Event} event The cesium event.
+ * @returns {Function} Returns the callbackfunction with click informations.
+ */
+function reactTo3DClickEvent (event) {
+    const scene = this.scene,
+        ray = scene.camera.getPickRay(event.position),
+        cartesian = scene.globe.pick(ray, scene),
+        mapProjection = this.map3D.getOlView().getProjection();
+    let height,
+        coords,
+        cartographic,
+        distance,
+        resolution,
+        transformedCoords,
+        transformedPickedPosition,
+        pickedPositionCartesian,
+        cartographicPickedPosition,
+        clickObject;
+
+    if (cartesian) {
+        if (document.querySelector(".nav li")?.classList.contains("open")) {
+            document.querySelector(".nav li").classList.remove("open");
+        }
+        cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+        coords = [window.Cesium.Math.toDegrees(cartographic.longitude), window.Cesium.Math.toDegrees(cartographic.latitude)];
+        height = scene.globe.getHeight(cartographic);
+        if (height) {
+            coords = coords.concat([height]);
+        }
+
+        distance = window.Cesium.Cartesian3.distance(cartesian, scene.camera.position);
+        resolution = this.map3D.getCamera().calcResolutionForDistance(distance, cartographic.latitude);
+        transformedCoords = transform(coords, get("EPSG:4326"), mapProjection);
+        transformedPickedPosition = null;
+
+        if (scene.pickPositionSupported) {
+            pickedPositionCartesian = scene.pickPosition(event.position);
+            if (pickedPositionCartesian) {
+                cartographicPickedPosition = scene.globe.ellipsoid.cartesianToCartographic(pickedPositionCartesian);
+                transformedPickedPosition = transform([window.Cesium.Math.toDegrees(cartographicPickedPosition.longitude), window.Cesium.Math.toDegrees(cartographicPickedPosition.latitude)], get("EPSG:4326"), mapProjection);
+                transformedPickedPosition.push(cartographicPickedPosition.height);
+            }
+        }
+        clickObject = {
+            map3D: this,
+            position: event.position,
+            pickedPosition: transformedPickedPosition,
+            coordinate: transformedCoords,
+            latitude: coords[0],
+            longitude: coords[1],
+            resolution: resolution,
+            originalEvent: event
+        };
+    }
+    return this.callback(clickObject);
+}
+
+/**
+ * Logic to listen to click events in 3D mode.
+ * @param {Object} map3DObject Contains the scene, 3D map and a callback function.
+ * @returns {void}
+ */
+function handle3DEvents (map3DObject) {
+    let eventHandler;
+
+    if (window.Cesium) {
+        eventHandler = new window.Cesium.ScreenSpaceEventHandler(map3DObject.scene.canvas);
+        eventHandler.setInputAction(reactTo3DClickEvent.bind(map3DObject), window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    }
+}
+
+/**
+ * Creates a 3D-map.
+ * @param {object} [settings] The settings for the 3D-map.
+ * @param {module:ol/PluggableMap~PluggableMap} [settings.map2D] The 2D-Map
+ * @param {Cesium.JulianDate} [settings.shadowTime] The shadow time in julian date format if undefined olcs default is Cesium.JulianDate.now().
+ * @returns {module:OLCesium} the 3d-map
+ */
+export function createMap (settings) {
+    const map3D = new OLCesium({
+        map: settings.map2D,
+        time: settings.shadowTime ? settings.shadowTime : undefined,
+        sceneOptions: {
+            shadows: false
+        },
+        stopOpenLayersEventsPropagation: true,
+        createSynchronizers: (olMap, scene) => {
+            return [new WMSRasterSynchronizer(olMap, scene), new VectorSynchronizer(olMap, scene), new FixedOverlaySynchronizer(olMap, scene)];
+        }
+    });
+
+    map3D.id = `map3D_${mapIdCounter++}`;
+    map3D.mapMode = "3D";
+
+    return map3D;
+}
+
+/**
+ * Prepares the camera and listens to camera changed events.
+ * @param {Cesium.scene} scene Cesium scene.
+ * @param {Object} urlParams optional urlParams for camera.
+ * @param {Object} map3D olcs map.
+ * @param {Object} config optional configuration parameters.
+ * @param {Cesium} cesium optional cesium.
+ * @returns {Cesium.scene.camera} Cesium camera.
+ */
+export function prepareCamera (scene, urlParams, map3D, config, cesium) {
+    const camera = scene.camera;
+    let cameraParameter = Object.prototype.hasOwnProperty.call(config, "cameraParameter") ? config.cameraParameter : {};
+
+    cameraParameter = urlParams?.altitude ? Object.assign(cameraParameter || {}, {altitude: urlParams?.altitude}) : cameraParameter;
+    cameraParameter = urlParams?.heading ? Object.assign(cameraParameter || {}, {heading: urlParams?.heading}) : cameraParameter;
+    cameraParameter = urlParams?.tilt ? Object.assign(cameraParameter || {}, {tilt: urlParams?.tilt}) : cameraParameter;
+
+    if (Object.keys(cameraParameter).length > 0) {
+        setCameraParameter(cameraParameter, map3D, cesium);
+    }
+    return camera;
+}
+
+/**
+ * Prepares the cesium scene.
+ * @param {Object} map3DObject Contains the scene, 3D map and a callback function.
+ * @param {Object} config optional configuration parameters.
+ * @returns {void}
+ */
+export function prepareScene (map3DObject, config) {
+    handle3DEvents(map3DObject);
+    setCesiumSceneDefaults(map3DObject.scene, config);
+}

package/src/rawLayerList.js

@@ -0,0 +1,88 @@
+import defaults from "./defaults";
+
+/** layerList that contains all known services.
+ * @type{Array}
+ * @ignore
+ */
+let layerList = [];
+
+/**
+ * Initializes the layer list with either an object or an URL. May be used again to override the layer list.
+ * createMap will call this for you, but won't notify you of when it's done. Use this function manually with a
+ * callback to know when layers can be added programmatically.
+ * @param {(string|object)} [layerConf="https://geoportal-hamburg.de/lgv-config/services-internet.json"] - either the URL to fetch the services from, or the object containing the services
+ * @param {function} [callback] - called with services after loaded; called with false and error on error
+ * @returns {undefined} nothing, add callback to receive layerList
+ */
+export function initializeLayerList (layerConf = defaults.layerConf, callback) {
+    if (Array.isArray(layerConf)) {
+        // case: parameter was services.json contents
+        layerList = layerConf;
+        if (typeof callback === "function") {
+            callback(layerList);
+            return;
+        }
+        return;
+    }
+
+    // case: parameter is URL
+    const Http = new XMLHttpRequest();
+
+    Http.open("GET", layerConf);
+    Http.timeout = 10000;
+    Http.send();
+    Http.onload = function () {
+        try {
+            layerList = JSON.parse(Http.responseText);
+        }
+        catch (error) {
+            console.error("An error occured when parsing the response after loading '" + layerConf + "':", error);
+            return callback(false, error);
+        }
+        if (typeof callback === "function") {
+            return callback(layerList);
+        }
+        return true;
+    };
+    Http.onerror = function (e) {
+        console.error("An error occured when trying to fetch services from '" + layerConf + "':", e);
+        callback(false, e);
+    };
+}
+
+/**
+ * Returns the first entry in layerList matching the given searchAttributes.
+ * @param {object} searchAttributes - key/value-pairs to be searched for, e.g. { typ: "WMS" } to get the first WMS
+ * @returns {?object} first layer matching the searchAttributes or null if none was found
+ */
+export function getLayerWhere (searchAttributes) {
+    const keys = Object.keys(searchAttributes);
+
+    return layerList.find(entry => keys.every(key => entry[key] === searchAttributes[key])) || null;
+}
+
+/** @returns {object[]} complete layerList as initialized */
+export function getLayerList () {
+    return layerList;
+}
+
+/**
+ * Returns display names map for a layer, or display name for a specific attribute.
+ * @param {string} layerId - if of layer to fetch display names for
+ * @param {string} [featureAttribute] - if given, only one entry of map is returned
+ * @returns {?(object|string)} - map of originalName->displayName or name of featureAttribute if specified; if layer or featureAttribute not found, null
+ */
+export function getDisplayNamesOfFeatureAttributes (layerId, featureAttribute) {
+    const attributes = getLayerWhere({id: layerId});
+
+    if (attributes && typeof featureAttribute === "string") {
+        const displayName = attributes.gfiAttributes && attributes.gfiAttributes[featureAttribute];
+
+        return typeof displayName === "string" ? displayName : null;
+    }
+    else if (attributes) {
+        return attributes.gfiAttributes || null;
+    }
+
+    return null;
+}

package/src/searchAddress/gazetteerUrl.js

@@ -0,0 +1,22 @@
+import defaults from "../defaults";
+
+// Holds URL of gazetteer to use in search function
+let gazetteerUrl = defaults.gazetteerUrl;
+
+/**
+ * Sets the gazetteerUrl to be used by the search function.
+ * If parameter is falsy, url from defaults.js is kept.
+ * @param {String} url url to use for searchAddress
+ * @returns {void}
+ */
+export function setGazetteerUrl (url) {
+    url ? gazetteerUrl = url : null;
+}
+
+/**
+ * Retrieves active gazetteer URL.
+ * @returns {string} currently set gazetteer URL
+ */
+export function getGazetteerUrl () {
+    return gazetteerUrl;
+}

package/src/searchAddress/index.js

@@ -0,0 +1,13 @@
+import {search} from "./search";
+import {searchTypes} from "./types";
+import {setGazetteerUrl, getGazetteerUrl} from "./gazetteerUrl";
+import {setShowGeographicIdentifier, getShowGeographicIdentifier} from "./showGeographicIdentifier";
+
+export {
+    search,
+    searchTypes,
+    setGazetteerUrl,
+    getGazetteerUrl,
+    setShowGeographicIdentifier,
+    getShowGeographicIdentifier
+};

package/src/searchAddress/parse.js

@@ -0,0 +1,196 @@
+import xml2js from "xml2js";
+
+import {searchTypes} from "./types";
+import {getShowGeographicIdentifier} from "./showGeographicIdentifier";
+
+/**
+ * Flattens xml2js result a little to avoid unnecessary one-element arrays.
+ * NOTE currently keeping special properties ($, _) of xml2js to keep attributes.
+ * @param {*} a anything
+ * @returns {*} a's first element if one-element array, else a
+ * @ignore
+ */
+function flatten (a) {
+    if (Array.isArray(a) && a.length === 1) {
+        return flatten(a[0]);
+    }
+    return a;
+}
+
+/**
+ * Recursively searches an object for a key.
+ * Since parsed XML tends to contain extra arrays, those are stepped into.
+ * @param {(object|Array)} o object to deep-search for key
+ * @param {string} key key to search for
+ * @returns {*} value behind key
+ * @ignore
+ */
+function findKey (o, key) {
+    if (Array.isArray(o)) {
+        return o.map(x => findKey(x, key)).filter(x => x)[0];
+    }
+    if (typeof o !== "object") {
+        return null;
+    }
+    if (typeof o[key] !== "undefined") {
+        return o[key];
+    }
+    return Object.keys(o).map(oKey => findKey(o[oKey], key)).filter(x => x)[0];
+}
+
+/**
+ * Simply copies over all properties it can find.
+ * @param {object} entry xml2js-parsed result entry
+ * @returns {object} copied and flattened properties
+ * @ignore
+ */
+function getAllPropertiesFlat (entry) {
+    const properties = {
+        objectType: Object.keys(entry)[0]
+    };
+
+    Object.keys(entry[properties.objectType][0]).forEach(propertyName => {
+        properties[propertyName] = flatten(entry[properties.objectType][0][propertyName]);
+    });
+
+    return properties;
+}
+
+/**
+ * Parses coordinates from wkt string.
+ * @param {string} wkt position as wkt
+ * @returns {string} position as coordinates
+ */
+function parseCoordinatesFromWkt (wkt) {
+    let pos = [];
+
+    if (wkt.startsWith("POINT")) {
+        pos = wkt.split(")")[0]?.split("(")[1];
+    }
+
+    return pos;
+}
+
+/**
+ * Parses result entries; uses type-specific rules to determine name/geometry.
+ * @param {object} entry xml2js-parsed result entry
+ * @param {string} type type string
+ * @returns {SearchResult} parsed search result for districts
+ * @ignore
+ */
+function parseEntry (entry, type) {
+    const searchResult = {
+        type,
+        properties: getAllPropertiesFlat(entry)
+    };
+    let pos = searchResult.properties?.pos ? parseCoordinatesFromWkt(searchResult.properties.pos) : findKey(searchResult.properties, "pos")[0],
+        hausnummer = "",
+        hausnummernzusatz = "",
+        strassenname = "";
+
+    // setting name
+    switch (type) {
+        case searchTypes.DISTRICT:
+            searchResult.name = searchResult.properties.geographicIdentifier?._ ? searchResult.properties.geographicIdentifier._ : searchResult.properties.geographicIdentifier;
+            break;
+        case searchTypes.STREET_KEY:
+        case searchTypes.STREET:
+            if (searchResult.properties?.position_strassenachse) {
+                pos = findKey(searchResult.properties?.position_strassenachse, "pos")[0];
+            }
+            searchResult.name = getShowGeographicIdentifier() ? searchResult.properties.geographicIdentifier._ : searchResult.properties.strassenname;
+            break;
+        case searchTypes.PARCEL:
+            searchResult.name = `${searchResult.properties.gemarkung}/${searchResult.properties.flurstuecksnummer}`;
+            break;
+        case searchTypes.HOUSE_NUMBERS_FOR_STREET:
+            // house number like "11a" as name is not very telling - use "Streetname 11a" and save "11a" separately in properties
+            hausnummer = searchResult.properties.hausnummer?._ ? searchResult.properties.hausnummer._ : searchResult.properties.hausnummer;
+
+            if (searchResult.properties.hausnummernzusatz) {
+                hausnummernzusatz = searchResult.properties.hausnummernzusatz?._ ? searchResult.properties.hausnummernzusatz._ : searchResult.properties.hausnummernzusatz;
+            }
+
+            searchResult.properties.hausnummerkomplett = `${hausnummer}${hausnummernzusatz}`;
+            searchResult.name =
+            getShowGeographicIdentifier() ? searchResult.properties.geographicIdentifier._ :
+                (searchResult.properties?.geographicIdentifier ? searchResult.properties.geographicIdentifier._.split(searchResult.properties.hausnummerkomplett)[0] : searchResult.properties.strassenname + " ") +
+                searchResult.properties.hausnummerkomplett;
+            break;
+        case searchTypes.ADDRESS_AFFIXED:
+            strassenname = searchResult.properties.strassenname?._ ? searchResult.properties.strassenname._ : searchResult.properties.strassenname;
+            hausnummer = searchResult.properties.hausnummer?._ ? searchResult.properties.hausnummer._ : searchResult.properties.hausnummer;
+            hausnummernzusatz = searchResult.properties.hausnummernzusatz?._ ? searchResult.properties.hausnummernzusatz._ : searchResult.properties.hausnummernzusatz;
+
+            searchResult.name = getShowGeographicIdentifier() ? searchResult.properties.geographicIdentifier._ : `${strassenname} ${hausnummer}${hausnummernzusatz}`;
+            break;
+        case searchTypes.ADDRESS_UNAFFIXED:
+            strassenname = searchResult.properties.strassenname?._ ? searchResult.properties.strassenname._ : searchResult.properties.strassenname;
+            hausnummer = searchResult.properties.hausnummer?._ ? searchResult.properties.hausnummer._ : searchResult.properties.hausnummer;
+
+            searchResult.name =
+            getShowGeographicIdentifier() ? searchResult.properties.geographicIdentifier._ :
+                (searchResult.properties?.geographicIdentifier ? searchResult.properties.geographicIdentifier._.split(hausnummer)[0] : strassenname + " ") + hausnummer;
+            break;
+        default:
+            searchResult.name = null;
+            console.error(`Unknown type in searchAddress.parse: '${type}'. Could not set name.`);
+            break;
+    }
+
+    // setting geometry
+    switch (type) {
+        case searchTypes.DISTRICT:
+        case searchTypes.STREET_KEY:
+        case searchTypes.STREET:
+        case searchTypes.PARCEL:
+        case searchTypes.HOUSE_NUMBERS_FOR_STREET:
+        case searchTypes.ADDRESS_AFFIXED:
+        case searchTypes.ADDRESS_UNAFFIXED:
+            // for these, all polygon points are identical - using point is more clear
+            searchResult.geometry = {
+                type: "Point",
+                coordinates: pos.split(" ")
+            };
+            break;
+        default:
+            searchResult.geometry = null;
+            console.error(`Unknown type in searchAddress.parse: '${type}'. Could not set geometry.`);
+            break;
+    }
+
+    return searchResult;
+}
+
+/**
+ * Parses gazetteer xml to search objects.
+ * @param {string} key internal name for query froms searchTypes
+ * @param {string} xmlString gazetteer answer as xml string
+ * @returns {Promise<SearchResult[]>} parsed response
+ * @ignore
+ */
+export function parse (key, xmlString) {
+    return new Promise((resolve, reject) => {
+        // tag processor "stripPrefix" removes e.g. "dog:" prefix on properties
+        xml2js.parseString(xmlString, {tagNameProcessors: [xml2js.processors.stripPrefix]},
+            (err, source) => {
+                if (err) {
+                    reject(err);
+                    return;
+                }
+
+                try {
+                    const searchResults = source.FeatureCollection?.member
+                        ? source.FeatureCollection.member
+                            .map(entry => parseEntry(entry, key))
+                            .sort((a, b) => a.name.localeCompare(b.name))
+                        : [];
+
+                    resolve(searchResults);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            });
+    });
+}