@masterportal/masterportalapi 2.1.1

package/src/maps/map.js

@@ -0,0 +1,35 @@
+import * as olMap from "./ol/olMap.js";
+import * as olcsMap from "./olcs/olcsMap.js";
+
+export default {
+    /**
+    * Creates a map and adds it to the mapCollection. Depending on param 'mapMode' a 2D or a 3D map is created. Default ist 2D.
+    * @param {object} [config] - configuration object - falls back to defaults if none given
+    * @param {string} [config.target="map"] - div id to render map to
+    * @param {string} [config.namedProjections] - projections to create the map
+    * @param {string} [config.backgroundImage] - background image for map; "" to use none
+    * @param {string} [config.epsg] - CRS to use
+    * @param {number[]} [config.extent] - extent to use
+    * @param {Array.<{resolution: number, scale: number, zoomLevel: number}>} [config.options] - zoom level definition
+    * @param {Array.<string[]>} [config.options] - each sub-array has two values: projection name, and projection description
+    * @param {number} [config.startResolution] - initial resolution
+    * @param {number[]} [config.startCenter] - initial position
+    * @param {(string|object)} [config.layerConf] - services registry or URL thereof
+    * @param {string} [config.gazetteerUrl] - url of gazetteer to use in searchAddress
+    * @param {String} [mapMode = "2D"] The map mode. '2D' to create a 2D-map and '3D' to create a 3D-map.
+    * @param {object}  [settings={}] - settings object
+    * @param {object} [settings.mapParams] - additional parameter object that is spread into the ol.Map constructor object
+    * @param {function} [settings.callback] - optional callback for layer list loading
+    * @returns {module:ol/PluggableMap~PluggableMap} The map.
+    */
+    createMap: function (config, mapMode = "2D", settings = {}) {
+        const createMapFunctions = {
+                "2D": olMap.createMap,
+                "3D": olcsMap.createMap
+            },
+            map = createMapFunctions[mapMode](config, settings);
+
+        return map;
+    },
+    olcsMap
+};

package/src/maps/mapView.js

@@ -0,0 +1,54 @@
+import {View} from "ol";
+import defaults from "../defaults";
+
+/**
+ * Sets the startResolution or the startZoomlevel, depending on the configuration.
+ * Where the resolution is preferred.
+ * The value to use is set and the other is undefined.
+ * @param {object} config - configuration object
+ * @param {object} [mergedConfig=defaults] - configuration from object merged with default configuration
+ * @returns {object} object that contains startZoomLevel and startResolution
+ */
+export function chooseZoomOrResolution (config = {}, mergedConfig = defaults) {
+    const zoomResolution = {
+        startZoomLevel: undefined,
+        startResolution: undefined
+    };
+
+    if (Object.prototype.hasOwnProperty.call(config, "startZoomLevel") && !Object.prototype.hasOwnProperty.call(config, "startResolution")) {
+        zoomResolution.startZoomLevel = mergedConfig.startZoomLevel;
+    }
+    else {
+        zoomResolution.startResolution = mergedConfig.startResolution;
+    }
+
+    return zoomResolution;
+}
+
+/**
+ * Creates a View from config.
+ * @param {object} config - configuration object
+ * @param {string} [config.epsg="EPSG:25832"] - CRS to use
+ * @param {number[]} [config.extent=[510000.0, 5850000.0, 625000.4, 6000000.0]] - extent to use
+ * @param {Array.<string[]>} [config.options=[{resolution: 66.14579761460263, scale: 250000, zoomLevel: 0},{resolution: 26.458319045841044, scale: 100000, zoomLevel: 1},{resolution: 15.874991427504629, scale: 60000, zoomLevel: 2},{resolution: 10.583327618336419, scale: 40000, zoomLevel: 3},{resolution: 5.2916638091682096, scale: 20000, zoomLevel: 4},{resolution: 2.6458319045841048, scale: 10000, zoomLevel: 5},{resolution: 1.3229159522920524, scale: 5000, zoomLevel: 6},{resolution: 0.6614579761460262, scale: 2500, zoomLevel: 7},{resolution: 0.2645831904584105, scale: 1000, zoomLevel: 8},{resolution: 0.13229159522920521, scale: 500, zoomLevel: 9}]] - each sub-array has two values: projection name, and projection description
+ * @param {number} [config.startResolution=15.874991427504629] - initial resolution
+ * @param {number[]} [config.startCenter=[565874, 5934140]] - initial position
+ * @returns {ol.View} view with start values from config
+ */
+export function createMapView (config) {
+    const mergedConfig = Object.assign({}, defaults, config),
+        zoomResolution = chooseZoomOrResolution(config, mergedConfig);
+
+    return new View({
+        projection: mergedConfig.epsg,
+        center: mergedConfig.startCenter,
+        extent: mergedConfig.extent,
+        zoom: zoomResolution.startZoomLevel,
+        options: mergedConfig.options,
+        resolution: zoomResolution.startResolution,
+        resolutions: mergedConfig.options.map(entry => entry.resolution),
+        constrainResolution: true,
+        constrainOnlyCenter: true,
+        backgroundImage: mergedConfig.backgroundImage
+    });
+}

package/src/maps/ol/olMap.js

@@ -0,0 +1,124 @@
+import {Map, PluggableMap} from "ol";
+import {defaults as olDefaultInteractions} from "ol/interaction.js";
+import setBackgroundImage from "../../lib/setBackgroundImage";
+import getInitialLayers from "../../lib/getInitialLayers";
+import defaults from "../../defaults";
+import * as wms from "../../layer/wms";
+import * as geojson from "../../layer/geojson";
+import * as wfs from "../../layer/wfs";
+import * as vectorBase from "../../layer/vectorBase";
+import * as oaf from "../../layer/oaf";
+import {createMapView} from "../../maps/mapView";
+import {initializeLayerList, getLayerWhere} from "../../rawLayerList";
+import {registerProjections} from "../../crs";
+import {setGazetteerUrl} from "../../searchAddress";
+
+let mapIdCounter = 0;
+
+/**
+ * lookup for layer constructors
+ * @ignore
+ */
+const layerBuilderMap = {
+        wms,
+        wfs,
+        geojson,
+        vectorBase,
+        oaf
+    },
+    originalAddLayer = PluggableMap.prototype.addLayer;
+
+/**
+ * Adds a layer to the map, or adds a layer to the map by id.
+ * This id is looked up within the array of all known services.
+ *
+ * Make sure services have been loaded with a callback on createMap
+ * if you request the services from the internet.
+ *
+ * This function is available on all ol/Map instances.
+ * @param {(string|ol/Layer)} layerOrId - if of layer to add to map
+ * @param {object} [params] - optional parameter object
+ * @param {boolean} [params.visibility=true] - whether added layer is initially visible
+ * @param {Number} [params.transparency=0] - how visible the layer is initially
+ * @returns {?ol.Layer} added layer
+ */
+function addLayer (layerOrId, params = {visibility: true, transparency: 0}) {
+    var layer, layerBuilder;
+
+    // if parameter is id, create and add layer with masterportalAPI mechanisms
+    if (typeof layerOrId === "string") {
+        const rawLayer = getLayerWhere({id: layerOrId});
+
+        if (!rawLayer) {
+            console.error("Layer with id '" + layerOrId + "' not found. No layer added to map.");
+            return null;
+        }
+        layerBuilder = layerBuilderMap[rawLayer.typ.toLowerCase()];
+        if (!layerBuilder) {
+            console.error("Layer with id '" + layerOrId + "' has unknown type '" + rawLayer.typ + "'. No layer added to map.");
+            return null;
+        }
+        layer = layerBuilder.createLayer(rawLayer, {}, {map: this});
+        layer.setVisible(typeof params.visibility === "boolean" ? params.visibility : true);
+        layer.setOpacity(typeof params.transparency === "number" ? (100 - params.transparency) / 100 : 1);
+        originalAddLayer.call(this, layer);
+        return layer;
+    }
+
+    // else use original function
+    return originalAddLayer.call(this, layerOrId);
+}
+
+PluggableMap.prototype.addLayer = addLayer;
+
+/**
+ * Creates an openlayers map according to configuration. Does not set many default values itself, but uses function that do.
+ * Check the called functions for default values, or [the defaults file]{@link ./defaults.js}.
+ * @param {object} [config] - configuration object - falls back to defaults if none given
+ * @param {string} [config.target="map"] - div id to render map to
+ * @param {string} [config.namedProjections] - projections to create the map
+ * @param {string} [config.backgroundImage] - background image for map; "" to use none
+ * @param {string} [config.epsg] - CRS to use
+ * @param {number[]} [config.extent] - extent to use
+ * @param {Array.<{resolution: number, scale: number, zoomLevel: number}>} [config.options] - zoom level definition
+ * @param {Array.<string[]>} [config.options] - each sub-array has two values: projection name, and projection description
+ * @param {number} [config.startResolution] - initial resolution
+ * @param {number[]} [config.startCenter] - initial position
+ * @param {(string|object)} [config.layerConf] - services registry or URL thereof
+ * @param {string} [config.gazetteerUrl] - url of gazetteer to use in searchAddress
+ * @param {object}  [settings={}] - setings object
+ * @param {object} [settings.mapParams] - additional parameter object that is spread into the ol.Map constructor object
+ * @param {function} [settings.callback] - optional callback for layer list loading
+ * @param {String} [mapMode = "2D"] The map mode. '2D' to craete a 2D-map and '3D' to create a 3D-map.
+ * @returns {object} map object from ol
+ */
+export function createMap (config = defaults, {mapParams, callback} = {}) {
+    registerProjections(config.namedProjections);
+    setBackgroundImage(config);
+    setGazetteerUrl(config.gazetteerUrl);
+    const map = new Map(Object.assign({
+        target: config.target || defaults.target,
+        interactions: olDefaultInteractions({altShiftDragRotate: false, pinchRotate: false}),
+        controls: [],
+        view: createMapView(config)
+    }, mapParams));
+
+    map.set("mapMode", "2D");
+    map.set("id", `map2D_${mapIdCounter++}`);
+
+    // extend callback to load configured initial layers
+    initializeLayerList(config.layerConf, (param, error) => {
+        getInitialLayers(config)
+            .forEach(layer => {
+                map.addLayer(layer.id, layer);
+            });
+
+        if (typeof callback === "function") {
+            return callback(param, error);
+        }
+
+        return null;
+    });
+
+    return map;
+}

package/src/maps/olcs/3dUtils/fixedOverlaySynchronizer.js

@@ -0,0 +1,39 @@
+import OverlaySynchronizer from "olcs/OverlaySynchronizer.js";
+
+/**
+ * Represents a FixedOverlaySynchronizer.
+ */
+class FixedOverlaySynchronizer extends OverlaySynchronizer {
+    /* eslint-disable no-useless-constructor */
+    /**
+     * This object takes care of one-directional synchronization of
+     * Openlayers WMS raster layers to the given Cesium globe. This Synchronizer
+     * assumes that the given WMS supports EPSG Code 4326 (WGS84)
+     * @param {!ol.Map} map -
+     * @param {!Cesium.Scene} scene -
+     * @constructor
+     * @extends {olcs.AbstractSynchronizer.<Cesium.ImageryLayer>}
+     * @api
+     * @struct
+     */
+    constructor (map, scene) {
+        super(map, scene);
+    }
+
+    /**
+     * @api
+     * @returns {void}
+     */
+    addOverlays () {
+        /* eslint no-underscore-dangle: ["error", { "allow": ["overlays_"] }]*/
+        this.overlays_.forEach((overlay) => {
+            if (overlay.getId() !== undefined) {
+                this.addOverlay(overlay);
+            }
+        });
+    }
+}
+
+export default FixedOverlaySynchronizer;
+
+/* eslint-enable no-useless-constructor */

package/src/maps/olcs/3dUtils/wmsRasterSynchronizer.js

@@ -0,0 +1,348 @@
+/**
+ * @module olcs.WMSRasterSynchronizer
+ */
+import olLayerGroup from "ol/layer/Group.js";
+import {getUid} from "olcs/util.js";
+import TileWMS from "ol/source/TileWMS.js";
+import olcsAbstractSynchronizer from "olcs/AbstractSynchronizer.js";
+import olcsCore from "olcs/core.js";
+import {Tile, Image as ImageLayer} from "ol/layer.js";
+import {stableSort} from "ol/array.js";
+import {getBottomLeft, getBottomRight, getTopRight, getTopLeft} from "ol/extent.js";
+import {transformExtent} from "ol/proj.js";
+import StaticImageSource from "ol/source/ImageStatic";
+import proj4 from "proj4";
+
+/**
+ * Represents a WMSRasterSynchronizer.
+ */
+class WMSRasterSynchronizer extends olcsAbstractSynchronizer {
+    /**
+     * This object takes care of one-directional synchronization of
+     * Openlayers WMS raster layers to the given Cesium globe. This Synchronizer
+     * assumes that the given WMS supports EPSG Code 4326 (WGS84)
+     * @param {!ol.Map} map -
+     * @param {!Cesium.Scene} scene -
+     * @constructor
+     * @extends {olcs.AbstractSynchronizer.<Cesium.ImageryLayer>}
+     * @api
+     * @struct
+     */
+    constructor (map, scene) {
+        super(map, scene);
+        /**
+         * @type {!Cesium.ImageryLayerCollection}
+         * @private
+         */
+        this.cesiumLayers = scene.imageryLayers;
+
+        /**
+         * @type {!Cesium.ImageryLayerCollection}
+         * @private
+         */
+        /* eslint-disable no-undef */
+        this.ourLayers = new Cesium.ImageryLayerCollection();
+    }
+
+
+    /**
+     * @inheritDoc
+     */
+    addCesiumObject (object) {
+        this.cesiumLayers.add(object);
+        this.ourLayers.add(object);
+    }
+
+
+    /**
+     * @inheritDoc
+     */
+    destroyCesiumObject (object) {
+        object.destroy();
+    }
+
+
+    /**
+     * @inheritDoc
+     */
+    removeSingleCesiumObject (object, destroy) {
+        this.cesiumLayers.remove(object, destroy);
+        this.ourLayers.remove(object, false);
+    }
+
+
+    /**
+     * @inheritDoc
+     */
+    removeAllCesiumObjects (destroy) {
+        for (let i = 0; i < this.ourLayers.length; ++i) {
+            this.cesiumLayers.remove(this.ourLayers.get(i), destroy);
+        }
+        this.ourLayers.removeAll(false);
+    }
+
+
+    /**
+     * Creates an array of Cesium.ImageryLayer.
+     * May be overriden by child classes to implement custom behavior.
+     * The default implementation handles tiled imageries in EPSG:4326 or
+     * EPSG:3859.
+     * @param {!ol.layer.Base} olLayer -
+     * @param {?ol.proj.Projection} viewProj Projection of the view.
+     * @return {?Array.<!Cesium.ImageryLayer>} array or null if not possible
+     * (or supported)
+     * @protected
+     */
+    convertLayerToCesiumImageries (olLayer, viewProj) {
+        let layerOptions = {
+                "show": false
+            },
+            source = {},
+            cesiumLayer = {},
+            provider = null;
+
+        if (!(olLayer instanceof Tile) && !(olLayer instanceof ImageLayer)) {
+            return null;
+        }
+
+        source = olLayer.getSource();
+
+        if (source instanceof TileWMS) {
+            const params = source.getParams(),
+                options = {
+                    "url": source.getUrls()[0],
+                    "parameters": params,
+                    "layers": params.LAYERS,
+                    "show": false
+                },
+                tileGrid = source.getTileGrid();
+
+            if (tileGrid) {
+                const ext = olLayer.getExtent();
+
+                if (ext && viewProj) {
+                    options.rectangle = olcsCore.extentToRectangle(ext, viewProj);
+                    const minMax = this.getMinMaxLevelFromTileGrid(tileGrid, ext, viewProj);
+
+                    options.tileWidth = tileGrid.getTileSize(0)[0];
+                    options.tileHeight = tileGrid.getTileSize(0)[1];
+                    options.minimumLevel = minMax[0];
+                    options.maximumLevel = minMax[1];
+                }
+            }
+            /* eslint-disable no-undef */
+            provider = new Cesium.WebMapServiceImageryProvider(options);
+        }
+        else if (source instanceof StaticImageSource) {
+            const extent = source.getImageExtent(),
+                options = {
+                    "url": source.getUrl(),
+                    "show": false
+                },
+                bottomLeftCorner = proj4("EPSG:25832", "EPSG:4326", getBottomLeft(extent)),
+                topRightCorner = proj4("EPSG:25832", "EPSG:4326", getTopRight(extent));
+
+            /* eslint-disable no-undef */
+            options.rectangle = Cesium.Rectangle.fromDegrees(bottomLeftCorner[0], bottomLeftCorner[1], topRightCorner[0], topRightCorner[1]);
+            /* eslint-disable no-undef */
+            provider = new Cesium.SingleTileImageryProvider(options);
+
+        }
+        else {
+            console.warn("Sources other than TileImage are currently not supported.");
+            return null;
+        }
+
+        // the provider is always non-null if we got this far
+        layerOptions = {
+            "show": false
+        };
+        /* eslint-disable no-undef */
+        cesiumLayer = new Cesium.ImageryLayer(provider, layerOptions);
+
+        return cesiumLayer ? [cesiumLayer] : null;
+    }
+
+    /**
+     *
+     * @param {ol.Extent} extent -
+     * @param {ol.ProjectionLike} projection -
+     * @return {Array.<Cesium.Cartographic>} -
+     * @private
+     */
+    getExtentPoints (extent, projection) {
+        const wgs84Extent = transformExtent(extent, projection, "EPSG:4326"),
+            olCoords = [
+                getBottomLeft(wgs84Extent),
+                getBottomRight(wgs84Extent),
+                getTopRight(wgs84Extent),
+                getTopLeft(wgs84Extent)
+            ];
+
+        /* eslint-disable no-undef */
+        return olCoords.map(coord => Cesium.Cartographic.fromDegrees(coord[0], coord[1]));
+    }
+    /**
+     *
+     * @param {ol.tilegrid.TileGrid} tilegrid -
+     * @param {ol.Extent} extent -
+     * @param {ol.ProjectionLike} projection -
+     * @return {Array.<Number>} -
+     */
+    getMinMaxLevelFromTileGrid (tilegrid, extent, projection) {
+        const olCoords = [
+                getBottomLeft(extent),
+                getBottomRight(extent),
+                getTopRight(extent),
+                getTopLeft(extent)
+            ],
+            resolution = tilegrid.getResolutions().slice(-1).pop(),
+            tileCoordsLocal = olCoords.map(position => tilegrid.getTileCoordForCoordAndResolution(position, resolution)),
+            distanceLocalX = Math.abs(tileCoordsLocal[0][1] - tileCoordsLocal[1][1]),
+            distanceLocalY = Math.abs(tileCoordsLocal[0][2] - tileCoordsLocal[3][2]),
+            extentCoords = this.getExtentPoints(extent, projection),
+            /* eslint-disable no-undef */
+            tilingScheme = new Cesium.GeographicTilingScheme({});
+        let minLevel = 0,
+            maxLevel = 20;
+
+        while (minLevel < maxLevel) {
+            /* eslint-disable no-loop-func */
+
+            const tileCoords = extentCoords.map(position => tilingScheme.positionToTileXY(position, minLevel)),
+                distances = [];
+            /* eslint-enable  no-loop-func */
+
+            distances.push(Math.abs(tileCoords[0].x - tileCoords[1].x));
+            distances.push(Math.abs(tileCoords[0].y - tileCoords[3].y));
+            if (distances[0] > 1 || distances[1] > 1) {
+                minLevel--;
+                break;
+            }
+            minLevel++;
+        }
+        while (maxLevel > minLevel) {
+            /* eslint-disable no-loop-func */
+
+            const tileCoords = extentCoords.map(position => tilingScheme.positionToTileXY(position, maxLevel)),
+                distances = [];
+            /* eslint-enable  no-loop-func */
+
+            distances.push(Math.abs(tileCoords[0].x - tileCoords[1].x));
+            distances.push(Math.abs(tileCoords[0].y - tileCoords[3].y));
+            if (distances[0] < distanceLocalX || distances[1] < distanceLocalY) {
+                maxLevel++;
+                break;
+            }
+            maxLevel--;
+        }
+        return [minLevel, maxLevel];
+    }
+
+    /**
+     * @inheritDoc
+     */
+    createSingleLayerCounterparts (olLayerWithParents) {
+        const olLayer = olLayerWithParents.layer,
+            uid = getUid(olLayer).toString(),
+            viewProj = this.view.getProjection(),
+            cesiumObjects = this.convertLayerToCesiumImageries(olLayer, viewProj);
+
+        if (cesiumObjects) {
+            const listenKeyArray = [];
+
+            [olLayerWithParents.layer].concat(olLayerWithParents.parents).forEach((olLayerItem) => {
+                listenKeyArray.push(olLayerItem.on(["change:opacity", "change:visible"], () => {
+                // the compiler does not seem to be able to infer this
+                    /* eslint-disable no-console */
+
+                    console.assert(cesiumObjects);
+                    /* eslint-enable no-console */
+                    for (let i = 0; i < cesiumObjects.length; ++i) {
+                        olcsCore.updateCesiumLayerProperties(olLayerWithParents, cesiumObjects[i]);
+                    }
+                }));
+            });
+
+            for (let i = 0; i < cesiumObjects.length; ++i) {
+                olcsCore.updateCesiumLayerProperties(olLayerWithParents, cesiumObjects[i]);
+            }
+
+            // there is no way to modify Cesium layer extent,
+            // we have to recreate when OpenLayers layer extent changes:
+            listenKeyArray.push(olLayer.on("change:extent", function () {
+                for (let i = 0; i < cesiumObjects.length; ++i) {
+                    this.cesiumLayers.remove(cesiumObjects[i], true); // destroy
+                    this.ourLayers.remove(cesiumObjects[i], false);
+                }
+                delete this.layerMap[getUid(olLayer)]; // invalidate the map entry
+                this.synchronize();
+            }, this));
+
+            listenKeyArray.push(olLayer.on("change", function () {
+                // when the source changes, re-add the layer to force update
+                for (let i = 0; i < cesiumObjects.length; ++i) {
+                    const position = this.cesiumLayers.indexOf(cesiumObjects[i]);
+
+                    if (position >= 0) {
+                        this.cesiumLayers.remove(cesiumObjects[i], false);
+                        this.cesiumLayers.add(cesiumObjects[i], position);
+                    }
+                }
+            }.bind(this)));
+
+            this.olLayerListenKeys[uid].push(...listenKeyArray);
+        }
+
+        return Array.isArray(cesiumObjects) ? cesiumObjects : null;
+    }
+
+    /**
+     * Order counterparts using the same algorithm as the Openlayers renderer:
+     * z-index then original sequence order.
+     * @override
+     * @protected
+     */
+    orderLayers () {
+        const layers = [],
+            zIndices = {},
+            queue = [this.mapLayerGroup];
+
+        while (queue.length > 0) {
+            const olLayer = queue.splice(0, 1)[0];
+
+            layers.push(olLayer);
+            zIndices[getUid(olLayer)] = olLayer.getZIndex();
+
+            if (olLayer instanceof olLayerGroup) {
+                const sublayers = olLayer.getLayers();
+
+                if (sublayers) {
+                    // Prepend queue with sublayers in order
+                    queue.unshift(...sublayers.getArray());
+                }
+            }
+        }
+
+        stableSort(layers, (layer1, layer2) => zIndices[getUid(layer1)] - zIndices[getUid(layer2)]);
+
+        layers.forEach(function (olLayer) {
+            const olLayerId = getUid(olLayer).toString(),
+                cesiumObjects = this.layerMap[olLayerId];
+
+            if (cesiumObjects) {
+                cesiumObjects.forEach(this.raiseToTop, this);
+            }
+        }, this);
+    }
+
+    /**
+     * @param {Cesium.ImageryLayer} counterpart -
+     * @returns {void}
+     */
+    raiseToTop (counterpart) {
+        this.cesiumLayers.raiseToTop(counterpart);
+    }
+}
+
+export default WMSRasterSynchronizer;