@masterportal/masterportalapi 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -16,8 +16,13 @@
 
 ---
 
-## 2.1.1 - 2022-04-20
+## 2.2.0 - 2022-04-25
+### Added
+- Add a new layer type Vector tile layer.
 
+---
+
+## 2.1.1 - 2022-04-20
 ### Fixed
 - Allow searchAddress to find street names with a prefix.
 

package/example/config/services.json

@@ -15,65 +15,94 @@
     "maxScale": 200
   },
   {
-    "id" : "1002",
-    "name" : "Krankenhäuser",
-    "url" : "https://geodienste.hamburg.de/HH_WMS_Krankenhaeuser",
-    "typ" : "WMS",
-    "layers" : "krankenhaeuser",
-    "format" : "image/png",
-    "version" : "1.3.0",
-    "singleTile" : false,
-    "transparent" : true,
-    "transparency" : 0,
-    "urlIsVisible" : true,
-    "tilesize" : 512
+    "id": "1002",
+    "name": "Krankenhäuser",
+    "url": "https://geodienste.hamburg.de/HH_WMS_Krankenhaeuser",
+    "typ": "WMS",
+    "layers": "krankenhaeuser",
+    "format": "image/png",
+    "version": "1.3.0",
+    "singleTile": false,
+    "transparent": true,
+    "transparency": 0,
+    "urlIsVisible": true,
+    "tilesize": 512
+  },
+  {
+    "id": "2001",
+    "typ": "GeoJSON",
+    "name": "Landesgrenze Hamburg",
+    "url": "https://geoportal-hamburg.de/lgv-config/landesgrenze_hh.json"
   },
   {
-    "id" : "2001",
-    "typ" : "GeoJSON",
-    "name" : "Landesgrenze Hamburg",
-    "url" : "https://geoportal-hamburg.de/lgv-config/landesgrenze_hh.json"
+    "id": "3001",
+    "name": "Bauwerke",
+    "url": "https://geodienste.hamburg.de/HH_WFS_Geotourismus",
+    "typ": "WFS",
+    "featureType": "bauwerke",
+    "outputFormat": "XML",
+    "version": "1.1.0",
+    "featureNS": "http://www.deegree.org/app"
   },
   {
-    "id" : "3001",
-    "name" : "Bauwerke",
-    "url" : "https://geodienste.hamburg.de/HH_WFS_Geotourismus",
-    "typ" : "WFS",
-    "featureType" : "bauwerke",
-    "outputFormat" : "XML",
-    "version" : "1.1.0",
-    "featureNS" : "http://www.deegree.org/app"
- },
- {
-  "id" : "4001",
-  "name" : "Gelaende",
-  "url" : "https://daten-hamburg.de/gdi3d/datasource-data/Gelaende ",
-  "typ" : "Terrain3D",
-  "cesiumTerrainProviderOptions" : {
-     "requestVertexNormals" : true
-   }
- },
+    "id": "4001",
+    "name": "Gelaende",
+    "url": "https://daten-hamburg.de/gdi3d/datasource-data/Gelaende ",
+    "typ": "Terrain3D",
+    "cesiumTerrainProviderOptions": {
+      "requestVertexNormals": true
+    }
+  },
   {
-  "id" : "4002",
-  "name" : "Gebäude LoD2",
-  "url" : "https://daten-hamburg.de/gdi3d/datasource-data/LoD2",
-  "typ" : "TileSet3D",
-  "cesium3DTilesetOptions" : {
-     "maximumScreenSpaceError" : 6
+    "id": "4002",
+    "name": "Gebäude LoD2",
+    "url": "https://daten-hamburg.de/gdi3d/datasource-data/LoD2",
+    "typ": "TileSet3D",
+    "cesium3DTilesetOptions": {
+      "maximumScreenSpaceError": 6
     }
   },
-    {
-        "id": "5001",
-        "name": "Schulen",
-        "url": "https://api.hamburg.de/datasets/v1/schulen",
-        "collection" : "staatliche_schulen",
-        "typ": "OAF",
-        "bbox": "",
-        "bboxCrs": "",
-        "datetime": "",
-        "crs": "EPSG:25832",
-        "params": {
-            "anzahl_schueler": ">1000"
-        }
+  {
+    "id": "5001",
+    "name": "Schulen",
+    "url": "https://api.hamburg.de/datasets/v1/schulen",
+    "collection": "staatliche_schulen",
+    "typ": "OAF",
+    "bbox": "",
+    "bboxCrs": "",
+    "datetime": "",
+    "crs": "EPSG:25832",
+    "params": {
+      "anzahl_schueler": ">1000"
     }
+  },
+  {
+    "id": "6001",
+    "name": "ADV (EPSG:25832)",
+    "url": "https://dev.adv-smart.de/tiles/smarttiles_de_UTM32_dev/{z}/{x}/{y}.pbf",
+    "epsg": "EPSG:25832",
+    "typ": "VectorTile",
+    "extent": [
+      -46133.17,
+      5048875.26857567,
+      1206211.10142433,
+      6301219.54000000
+    ],
+    "resolutions": [
+      4891.96981025128,
+      2445.98490512564,
+      1222.99245256282,
+      611.496226281410,
+      305.748113140705,
+      152.874056570353,
+      76.4370282851763,
+      38.2185141425881,
+      19.1092570712941,
+      9.55462853564703,
+      4.77731426782352,
+      2.38865713391176
+    ],
+    "tileSize": 256,
+    "zDirection": -1
+  }
 ]

package/example/index.js

@@ -208,3 +208,20 @@ window.mpapi.search("Mümmelmannsberg 72",  {
 }).then(x => console.log(x)).catch(e => console.error(e))
 
 //*/
+
+/* VECTOR TILE EXAMPLE */
+/*
+document.getElementById("enable").style.display = "none";
+map2D.getLayers().forEach(layer => {
+    map2D.removeLayer(layer);
+});
+
+let vtStyleUrl = 'https://dev.adv-smart.de/styles/playground/masterportal_test1.json';
+
+fetch(vtStyleUrl)
+    .then(response => response.json())
+    .then(style => {
+        let vtLayer = window.mpapi.map.addLayer("6001");
+        mpapi.vectorTile.setStyle(vtLayer, style);
+    });
+*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@masterportal/masterportalapi",
   "author": "Implementierungspartnerschaft Masterportal <info@masterportal.org> (https://www.masterportal.org)",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "license": "MIT",
   "description": "Basic functions of the Masterportal as api",
   "repository": {

package/src/index.js

@@ -5,6 +5,7 @@ import * as wms from "./layer/wms";
 import * as wfs from "./layer/wfs";
 import * as geojson from "./layer/geojson";
 import * as vectorBase from "./layer/vectorBase";
+import * as vectorTile from "./layer/vectorTile";
 import * as oaf from "./layer/oaf";
 import * as terrain from "./layer/terrain";
 import Tileset from "./layer/tileset";
@@ -19,6 +20,7 @@ export {
     geojson,
     layerLib,
     vectorBase,
+    vectorTile,
     oaf,
     terrain,
     Tileset,

package/src/layer/vectorTile.js

@@ -0,0 +1,174 @@
+import MVT from "ol/format/MVT";
+import VectorTileLayer from "ol/layer/VectorTile";
+import VectorTileSource from "ol/source/VectorTile";
+import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
+import {extentFromProjection} from "ol/tilegrid";
+
+import stylefunction from "ol-mapbox-style/dist/stylefunction";
+import {defaultResolutions} from "ol-mapbox-style/dist/util";
+
+import defaults from "../defaults";
+
+const OL_DEFAULT_VECTOR_TILE_GRID_CRS = "EPSG:3857";
+
+/**
+ * Used properites of layer specification as in services.json.
+ *
+ * @typedef {Object} rawLayer
+ * @property {string} id - Layer id
+ * @property {string} name - Layer name
+ * @property {string} url - source url
+ * @property {string} [epsg=defaults.epsg] - vector tiles crs
+ * @property {number[]} [extent] - extent
+ * @property {number} [maxZoom=22] - min zoom level
+ * @property {number} [minZoom] - max zoom level
+ * @property {function} [olAttribution] - optional function that takes a module:ol/PluggableMap~FrameState and returns a string or an array of strings representing source attributions
+ * @property {number[]} [origin] - The tile grid origin, i.e. where the x and y axes meet ([z, 0, 0]). Tile coordinates increase left to right and downwards
+ * @property {number[][]} [origins] - Tile grid origins, i.e. where the x and y axes meet ([z, 0, 0]), for each zoom level. If given, the array length should match the length of the resolutions array, i.e. each resolution can have a different origin. Tile coordinates increase left to right and downwards. If not specified, extent or origin must be provided.
+ * @property {number[]} [resolutions] - Resolutions. The array index of each resolution needs to match the zoom level. This means that even if a minZoom is configured, the resolutions array will have a length of maxZoom + 1.
+ * @property {number} [tileSize=512] - size of a tile in px
+ * @property {number} [zDirection=1] - zoom level offset for requested tiles
+ */
+
+/**
+ * Used properites of layer specification as in services.json.
+ *
+ * @typedef {Object} tileGridProperties
+ * @property {string} [epsg] - vector tiles crs
+ * @property {number} [tileSize=512] - size of a tile in px
+ * @property {number} [zDirection=1] - zoom level offset for requested tiles
+ * @property {number} [minZoom] - min zoom level
+ * @property {number} [maxZoom=22] - may zoom level
+ * @property {number[]} [extent] - extent
+ * @property {number[]} [resolutions] - Resolutions. The array index of each resolution needs to match the zoom level. This means that even if a minZoom is configured, the resolutions array will have a length of maxZoom + 1.
+ * @property {number[]} [origin] - The tile grid origin, i.e. where the x and y axes meet ([z, 0, 0]). Tile coordinates increase left to right and downwards
+ * @property {number[][]} [origins] - Tile grid origins, i.e. where the x and y axes meet ([z, 0, 0]), for each zoom level. If given, the array length should match the length of the resolutions array, i.e. each resolution can have a different origin. Tile coordinates increase left to right and downwards. If not specified, extent or origin must be provided.
+ */
+
+/**
+ * Additional properties for style specification
+ * @typedef {Object} styleParams
+ * @property {string} [sourceId] - key from the Mapbox Style object. When a source key is provided, all layers for the specified source will be included in the style function.
+ * @property {number[]} [resolutions] - Resolutions for mapping resolution to zoom level.
+ * @property {object} [spriteData] - Sprite data from the url specified in the Mapbox Style object's sprite property. Only required if a sprite property is specified in the Mapbox Style object.
+ * @property {string} [spriteImageUrl] - Url to sprite image
+ * @property {function} [getFonts] - Function that receives a font stack as arguments, and returns a (modified) font stack that is available. Font names are the names used in the Mapbox Style object. If not provided, the font stack will be used as-is. This function can also be used for loading web fonts.
+ */
+
+/**
+ * Create a TileGrid.
+ *
+ * @param {tileGridProperties} [options] - options
+ * @returns {ol.tilegrid.TileGrid} TileGrid
+ */
+export function createTileGrid (options = {}) {
+
+    const epsg = options.epsg ? options.epsg : defaults.epsg,
+        extent = options.extent ? options.extent : extentFromProjection(epsg),
+        tileSize = options.tileSize ? options.tileSize : 512,
+        resolutions = options.resolutions ? options.resolutions : defaults.options.map(x => x.resolution),
+        tileGridParams = {
+            extent: extent,
+            resolutions: resolutions,
+            minZoom: options.minZoom,
+            tileSize: new Array(2).fill(tileSize)
+        };
+
+    if (options.origins) {
+        tileGridParams.origins = options.origins;
+    }
+    else {
+        tileGridParams.origin = options.origin ? options.origin : [tileGridParams.extent[0], tileGridParams.extent[3]];
+    }
+
+    return new OpenLayersTileGrid(tileGridParams);
+}
+
+/**
+ * Check if TileGrid must be created.
+ *
+ * @param {tileGridProperties} options - tile grid parameters
+ * @returns {boolean} must create tileGrid
+ */
+function mustCreateTileGrid (options = {}) {
+    const createOptions = [options.extent, options.tileSize, options.resolutions, options.origin, options.origins, options.minZoom],
+        epsgTest = options.epsg ? options.epsg.toUpperCase() : options.epsg;
+
+    if (!createOptions.every((x) => typeof x === "undefined")) {
+        return true;
+    }
+
+    if (epsgTest !== OL_DEFAULT_VECTOR_TILE_GRID_CRS) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Creates a Vector Tiles source.
+ *
+ * @param {string} url - url to vector tile service
+ * @param {tileGridProperties} [options] - properties for tileGrid
+ * @returns {ol.source.VectorTile} Source
+ */
+export function createLayerSource (url, options = {}) {
+    options.epsg = options.epsg ? options.epsg : defaults.epsg;
+
+    const sourceParams = {
+        projection: options.epsg,
+        format: new MVT(),
+        url: url,
+        tileSize: options.tileSize,
+        zDirection: options.zDirection,
+        minZoom: options.minZoom,
+        maxZoom: options.maxZoom
+    };
+
+    if (mustCreateTileGrid(options)) {
+        sourceParams.tileGrid = createTileGrid(options);
+    }
+
+    return new VectorTileSource(sourceParams);
+}
+
+/**
+ * Creates a Vector Tiles layer.
+ *
+ * @param {rawLayer} rawLayer - rawLayer as specified in services.json
+ * @param {object} [layerParams={}] - extra params of the layer. Can overwrite or extend all ol layer parameters.
+ * @param {object} [options={}] - parameter object. Not used atm.
+ * @returns {ol.layer.VectorTile} Layer with id and source specified in rawLayer
+ */
+export function createLayer (rawLayer = {}, {layerParams = {}, options = {}} = {}) {
+    if ([rawLayer.id, rawLayer.name, rawLayer.url].some((x) => typeof x === "undefined")) {
+        console.error(`Cancelled creation of layer "${rawLayer.id}"(${rawLayer.name}) because of missing required parameters`);
+        return undefined;
+    }
+    const source = createLayerSource(rawLayer.url, rawLayer),
+        layer = new VectorTileLayer(Object.assign({
+            id: rawLayer.id, name: rawLayer.name, attribution: rawLayer.olAttribution, extent: source.getTileGrid().getExtent(),
+            minZoom: rawLayer.minZoom, maxZoom: rawLayer.maxZoom, source: source,
+            declutter: true}, layerParams));
+
+    if (options.style) {
+        layer.setStyle(options.style);
+    }
+
+    return layer;
+}
+
+/**
+ * Set a mapbox style
+ * @param {ol.layer.VectorTile} layer - layer to style
+ * @param {object} glStyle - MapBox style definition
+ * @param {options} [styleParams={}] - Additional options for style specification
+ * @returns {void}
+ */
+export function setStyle (layer, glStyle, {options = {}} = {}) {
+    stylefunction(layer, glStyle,
+        options.sourceId ? options.sourceId : Object.keys(glStyle.sources)[0],
+        options.resolutions ? options.resolutions : defaultResolutions,
+        options.spriteData,
+        options.spriteImageUrl,
+        options.getFonts);
+}

package/src/maps/ol/olMap.js

@@ -7,6 +7,7 @@ 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 vectortile from "../../layer/vectorTile";
 import * as oaf from "../../layer/oaf";
 import {createMapView} from "../../maps/mapView";
 import {initializeLayerList, getLayerWhere} from "../../rawLayerList";
@@ -24,6 +25,7 @@ const layerBuilderMap = {
         wfs,
         geojson,
         vectorBase,
+        vectortile,
         oaf
     },
     originalAddLayer = PluggableMap.prototype.addLayer;

package/test/layer/vectorTile.test.js

@@ -0,0 +1,172 @@
+import OpenLayersVectorTileLayer from "ol/layer/VectorTile";
+import OpenLayersVectorTileSource from "ol/source/VectorTile";
+import OpenLayersTileGrid from "ol/tilegrid/TileGrid";
+
+import {Feature} from "ol";
+import Polygon from "ol/geom/Polygon";
+
+import * as vectorTile from "../../src/layer/vectorTile";
+import {registerProjections} from "../../src/crs";
+import defaults from "../../src/defaults";
+
+jest.mock("../../src/rawLayerList.js", () => {
+    const original = jest.requireActual("../../src/rawLayerList.js");
+
+    original.initializeLayerList = jest.fn();
+    return original;
+});
+
+describe("vectorTile.js", function () {
+
+    beforeAll(() => registerProjections());
+
+    const layerParams = {
+            name: "VT Test",
+            id: "VT_01",
+            url: "https://example.org"
+        },
+        tileGridParams = {
+            extent: [0, 0, 1, 1],
+            tileSize: 512,
+            minZoom: 0
+        },
+
+        vtStyle = {
+            "version": 8,
+            "sources": {
+                "test": {
+                    "type": "vector"
+                }
+            },
+            "layers": [
+                {
+                    "type": "fill",
+                    "source": "test",
+                    "source-layer": "Background",
+                    "paint": {"fill-color": "rgb(255,253,238)", "fill-opacity": 1}
+                }
+            ]
+        },
+
+        feature = new Feature({
+            geometry: new Polygon([[0, 0], [0, 1], [1, 1], [0, 0]]),
+            layer: "Background"
+        });
+
+    describe("createTileGrid", function () {
+        it("creates a ol/tilegrid/TileGrid with default values for not required parameters", function () {
+            const tileGrid = vectorTile.createTileGrid(tileGridParams);
+
+            expect(tileGrid).toBeInstanceOf(OpenLayersTileGrid);
+            expect(tileGrid.getExtent()).toEqual(tileGridParams.extent);
+            expect(tileGrid.getResolutions()).toEqual(defaults.options.map(x => x.resolution));
+            expect(tileGrid.getTileSize()).toEqual(new Array(2).fill(tileGridParams.tileSize));
+            expect(tileGrid.getMinZoom()).toBe(tileGrid.minZoom);
+            expect(tileGrid.getOrigin()).toEqual([tileGridParams.extent[0], tileGridParams.extent[3]]);
+        });
+    });
+
+    describe("createLayerSource", function () {
+        it("creates a layerSource", function () {
+            const tileGrid = vectorTile.createTileGrid(tileGridParams),
+                sourceParams = {
+                    tileGrid: tileGrid,
+                    tileSize: tileGrid.getTileSize(),
+                    zDirection: 1,
+                    minZoom: 0,
+                    maxZoom: 22
+                },
+                source = vectorTile.createLayerSource("https://foo.example.org", sourceParams);
+
+            expect(source).toBeInstanceOf(OpenLayersVectorTileSource);
+        });
+    });
+
+    describe("createLayer", function () {
+        it("creates a vector Tile Layer", function () {
+            const layer = vectorTile.createLayer(layerParams);
+
+            expect(layer).toBeInstanceOf(OpenLayersVectorTileLayer);
+            expect(layer.getSource()).toBeInstanceOf(OpenLayersVectorTileSource);
+            expect(layer.get("name")).toEqual("VT Test");
+            expect(layer.get("id")).toEqual("VT_01");
+        });
+
+        it("should log an error when required param is missing", function () {
+            const spyConsole = jest.spyOn(console, "error").mockImplementation(() => ""),
+                layer = vectorTile.createLayer({
+                    name: "VT Test",
+                    id: "VT_01"
+                });
+
+            expect(layer).toBeUndefined();
+            expect(console.error).toHaveBeenCalled();
+            expect(spyConsole.mock.calls[0][0]).toContain("Cancelled creation of layer \"VT_01\"(VT Test) because of missing required parameters");
+            spyConsole.mockRestore();
+        });
+
+        it("should apply default values for all not required ones", function () {
+            const defaultValues = { // defaults defined in services.json.md
+                    zDirection: 1,
+                    epsg: "EPSG:25832", // default value from config.json.md/MapView. Should be the default CRS
+                    extent: [ // If not set, the portal's coordinate reference system's extent is used
+                        // Note: this should be the extent of the projection but is the extent of EPSG:3857
+                        //       this is because in masterportalAPI is no definition of the extent of the
+                        //       default projection which is EPSG:25832
+                        -20015077.371242613,
+                        -20015077.371242613,
+                        20015077.371242613,
+                        20015077.371242613
+                    ],
+                    origin: [ // if not set, the portal's coordinate reference system's top-left corner is used.
+                        // Note: this should be the top left corner of the projection extent but is top left
+                        //       corner of extent of EPSG:3857 this is because in masterportalAPI is no
+                        //       definition of the extent of the default projection which is EPSG:25832
+                        -20015077.371242613,
+                        20015077.371242613
+                    ],
+                    resolutions: [ // If not used, the portal's resolutions are used. (Missing default resolution definition? used default resolutions from masterportal-api)
+                        66.14579761460263,
+                        26.458319045841044,
+                        15.874991427504629,
+                        10.583327618336419,
+                        5.2916638091682096,
+                        2.6458319045841048,
+                        1.3229159522920524,
+                        0.6614579761460262,
+                        0.2645831904584105,
+                        0.13229159522920522
+                    ],
+                    tileSize: 512
+                },
+                layer = vectorTile.createLayer(layerParams),
+                source = layer.getSource(),
+                tileGrid = source.getTileGrid();
+
+            expect(layer.getExtent()).toEqual(defaultValues.extent);
+
+            expect(source.getProjection().getCode()).toEqual(defaultValues.epsg);
+
+            expect(tileGrid.getExtent()).toEqual(defaultValues.extent);
+            expect(tileGrid.getOrigin()).toEqual(defaultValues.origin);
+            expect(tileGrid.getResolutions()).toEqual(defaultValues.resolutions);
+            expect(tileGrid.getTileSize()).toEqual(new Array(2).fill(defaultValues.tileSize));
+        });
+    });
+
+    describe("setStyle", function () {
+        it("should apply a given style", function () {
+            const layer = vectorTile.createLayer(layerParams);
+
+            let featureStyle = null;
+
+            vectorTile.setStyle(layer, vtStyle);
+
+            expect(typeof layer.getStyle()).toBe("function");
+
+            featureStyle = layer.getStyle()(feature, 1.3229159522920524);
+
+            expect(featureStyle[0].getFill().getColor()).toBe("rgba(255,253,238,1)");
+        });
+    });
+});