@masterportal/masterportalapi 2.44.0 → 2.45.0

package/CHANGELOG.md

@@ -18,6 +18,22 @@
 
 ---
 
+## 2.45.0 - 2025-01-28
+
+### Added
+- vectorStyle: 
+    - extended 3d example by tileset styling
+
+### Changed
+- vectorStyle: 
+    - renamed configured style type="Cesium" to type="cesium"
+
+### Fixed
+- vectorStyle: 
+    - fixed styling for type "cesium"
+
+---
+
 ## 2.44.0 - 2025-01-22
 
 ### Added

package/example/config/portal.json

@@ -62,6 +62,16 @@
           "circle-rotate-with-view": true,
           "circle-opacity": 0.8
       }
+    },
+    {
+      "id": "4002",
+      "name": "Gebäude LoD2",
+      "url": "https://daten-hamburg.de/gdi3d/datasource-data/LoD2",
+      "typ": "TileSet3D",
+      "styleId": "3DTileSetStyle",
+      "cesium3DTilesetOptions": {
+        "maximumScreenSpaceError": 6
+      }
     }
   ],
   "cesiumLib":"https://geoportal-hamburg.de/mastercode/cesium/latest/Cesium.js",

package/example/config/services.json

@@ -58,6 +58,7 @@
     "name": "Gebäude LoD2",
     "url": "https://daten-hamburg.de/gdi3d/datasource-data/LoD2",
     "typ": "TileSet3D",
+    "styleId": "3DTileSetStyle",
     "cesium3DTilesetOptions": {
       "maximumScreenSpaceError": 6
     }

package/example/index.js

@@ -235,6 +235,23 @@ window.mpapi.search("Mümmelmannsberg 72", {
 
 
 // Add 3D functionality to the example:
+// ---------------------------------------
+// example style tileset by vectorstyling using style_v3.json
+function getTilesetStyle (styleId) {
+    const styleObject = styleList.returnStyleObject(styleId);
+
+    if (styleObject !== undefined) {
+        const createdStyle = createStyle.createStyle(styleObject, undefined, false, config.wfsImgPath),
+            options = {
+                color: {
+                    conditions: createdStyle
+                }
+            };
+
+        return new Cesium.Cesium3DTileStyle(options);
+    }
+    return undefined;
+}
 
 // add a click-listener to button, that creates a 3D-map on click
 document.getElementById("enable").addEventListener("click", function () {
@@ -275,11 +292,14 @@ document.getElementById("enable").addEventListener("click", function () {
 
             window.mpapi.map = map3D;
             tilesetLayer = new mpapi.Tileset(rawLayerTileset, window.mpapi.map);
+            tilesetLayer.tileset?.then(tileset => {
+                tileset.style = getTilesetStyle(rawLayerTileset.styleId);
+            });
             tilesetLayer.setVisible(true, window.mpapi.map);
 
             // entities are 2 simple buildings in the park 'planten und blomen' near Tiergartenstraße
             mpapi.entities.createLayer(rawLayerEntities, window.mpapi.map);
-            // mpapi.entities.setVisible(true, rawLayerEntities, window.mpapi.map);
+            mpapi.entities.setVisible(true, rawLayerEntities, window.mpapi.map);
 
             mpapi.terrain.createLayer(rawLayerTerrain, window.mpapi.map);
             mpapi.terrain.setVisible(true, rawLayerTerrain, window.mpapi.map);

package/package.json

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

package/src/vectorStyle/createStyle.js

@@ -16,7 +16,7 @@ let legendInformationLength = 0;
  * @returns {Boolean} is geometrytype a multiGeometry
  */
 function isMultiGeometry (geometryType) {
-    return geometryType === "MultiPoint" || geometryType === "MultiLineString" || geometryType === "MultiPolygon" || geometryType === "GeometryCollection" || geometryType === "Cesium";
+    return geometryType === "MultiPoint" || geometryType === "MultiLineString" || geometryType === "MultiPolygon" || geometryType === "GeometryCollection" || geometryType === "cesium";
 }
 
 /**
@@ -34,7 +34,9 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
     let styleObject,
         styleObjectForLegend = null;
 
-    feature.legendValue = legendValue ? legendValue : null;
+    if (feature) {
+        feature.legendValue = legendValue ? legendValue : null;
+    }
 
     if (geometryType === "Point") {
         styleObject = new PointStyle(feature, style, isClustered);
@@ -54,10 +56,10 @@ function getSimpleGeometryStyle (geometryType, feature, rule, isClustered, wfsIm
             styleObjectForLegend = new PolygonStyle(feature, style, false);
         }
     }
-    else if (geometryType === "Cesium") {
+    else if (geometryType === "cesium") {
         styleObject = new CesiumStyle(rule);
         styleObject.initialize(rule);
-        styleObject.addLegendInfo("Cesium", styleObject, rule);
+        styleObject.addLegendInfo("cesium", styleObject, rule);
         styleObject.legendValue = legendValue;
         return styleObject;
     }
@@ -128,7 +130,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
             }
         });
     }
-    else if (geometryType === "Cesium") {
+    else if (geometryType === "cesium") {
         rules.forEach(rule => {
             const simpleStyle = getSimpleGeometryStyle(geometryType, feature, rule, isClustered, wfsImgPathFromConfig);
 
@@ -153,7 +155,7 @@ function getMultiGeometryStyle (geometryType, feature, rules, isClustered, wfsIm
  * @returns {ol/style/Style}    style is always returned
  */
 function getGeometryStyle (feature, rules, isClustered, wfsImgPathFromConfig) {
-    const geometryType = feature ? feature.getGeometry().getType() : "Cesium";
+    const geometryType = feature ? feature.getGeometry().getType() : "cesium";
 
     // For simple geometries the first styling rule is used.
     // That algorithm implements an OR statement between multiple valid conditions giving precedence to its order in the style.json.

package/src/vectorStyle/lib/getRuleForIndex.js

@@ -7,7 +7,7 @@ import {checkProperties} from "../lib/valueOperations";
  */
 export function getRulesForFeature (styleObject, feature) {
     styleObject.rules.forEach(rule => {
-        if (typeof feature.get("rotation") !== "undefined") {
+        if (typeof feature?.get("rotation") !== "undefined") {
             rule.style.rotation = feature.get("rotation");
         }
     });

package/src/vectorStyle/lib/valueOperations.js

@@ -140,7 +140,7 @@ export function checkProperty (featureProperties, key, value) {
  * @returns {Boolean} true if all properties are satisfied
  */
 export function checkProperties (feature, rule) {
-    if (rule?.conditions?.properties) {
+    if (rule?.conditions?.properties && feature) {
         const featureProperties = feature.getProperties(),
             properties = rule.conditions.properties;
         let key,

package/src/vectorStyle/styles/styleCesium.js

@@ -30,7 +30,7 @@ class CesiumStyle extends StyleClass {
      * @returns {ol/style} - The created style.
      */
     createStyle () {
-        return this.createCondition(this.get("conditions"), this.get("style"));
+        return this.createCondition(this.attributes.conditions, this.style);
     }
 
     /**
@@ -40,7 +40,7 @@ class CesiumStyle extends StyleClass {
      * @returns {*} - Condition for cesium 3d tile style.
      */
     createCondition (conditions, style) {
-        const {color} = style,
+        const color = style?.color || this.attributes.color,
             condition = [];
         let ruleCondition;
 

package/test/vectorStyle/createStyle.test.js

@@ -1,6 +1,7 @@
 import createStyle from "../../src/vectorStyle/createStyle";
 import PointStyle from "../../src/vectorStyle/styles/point/stylePoint";
 import LineStringStyle from "../../src/vectorStyle/styles/styleLine";
+import CesiumStyle from "../../src/vectorStyle/styles/styleCesium";
 import PolygonStyle from "../../src/vectorStyle/styles/polygon/stylePolygon";
 import {Style, Stroke, Fill} from "ol/style.js";
 import {GeoJSON} from "ol/format.js";
@@ -9,6 +10,7 @@ let rules,
     jsonObjects,
     multiLineStringRules,
     multiPolygonRules,
+    cesiumRules,
     isClustered;
 
 const wfsImgPathFromConfig = "/path/to/wfs/images",
@@ -238,6 +240,12 @@ beforeEach(() => {
             polygonStrokeColor: [255, 0, 0, 1]
         }
     }];
+    cesiumRules = [{
+        style: {
+            type: "cesium",
+            color: "rgba(50, 154, 26, 0.8)"
+        }
+    }];
 });
 
 describe("createStyle", () => {
@@ -442,6 +450,13 @@ describe("getSimpleGeometryStyle", function () {
         isClustered = true;
         expect(createStyle.getSimpleGeometryStyle("not exist", jsonObjects[0], null, isClustered, wfsImgPathFromConfig)).toBeInstanceOf(Style);
     });
+    it("should create Cesium style", function () {
+        isClustered = true;
+        const tilesetStyle = createStyle.getSimpleGeometryStyle("cesium", undefined, cesiumRules[0], false, wfsImgPathFromConfig);
+
+        expect(tilesetStyle).toBeInstanceOf(CesiumStyle);
+        expect(tilesetStyle.attributes.color).toEqual(cesiumRules[0].style.color);
+    });
 });
 
 describe("getMultiGeometryStyle", function () {

package/test/vectorStyle/lib/getRuleForIndex.test.js

@@ -128,5 +128,9 @@ describe("getRuleForIndex", function () {
             expect(Array.isArray(getRulesForFeature(styleObject, jsonObjects[1]))).toBe(true);
             expect(getRulesForFeature(styleObject, jsonObjects[1]).length).toEqual(1);
         });
+        it("should not fail if feature is undefined - is the case for type=Cesium", function () {
+            expect(Array.isArray(getRulesForFeature(styleObject, undefined))).toBe(true);
+            expect(getRulesForFeature(styleObject, jsonObjects[1]).length).toEqual(1);
+        });
     });
 });

package/test/vectorStyle/lib/valueOperations.test.js

@@ -185,7 +185,7 @@ describe("checkProperties", function () {
     it("should return true for rule that has no properties", function () {
         expect(checkProperties(jsonObjects[0], rules[2])).toBe(true);
     });
-    it("should return false for rule that has not fitting properties", function () {
-        expect(checkProperties(jsonObjects[1], rules[1])).toBe(false);
+    it("should do nothing if feature is undefined", function () {
+        expect(checkProperties(undefined, rules[1])).toBe(true);
     });
 });

package/test/vectorStyle/styles/styleCesium.test.js

@@ -0,0 +1,120 @@
+import CesiumStyle from "../../../src/vectorStyle/styles/styleCesium";
+import StyleClass from "../../../src/vectorStyle/styles/style";
+
+describe("styleCesium", () => {
+    const expectedStyle = ["((${attributes.Dachform} === 'Flachdach'))", "rgba(50, 154, 26, 0.8)"];
+    let rule,
+        styleCesiumClass;
+
+    beforeEach(() => {
+        rule = {
+            conditions: {
+                "attributes.Dachform": "Flachdach"
+            },
+            style: {
+                type: "cesium",
+                color: "rgba(50, 154, 26, 0.8)"
+            }
+        };
+
+    });
+
+    describe("initialize", function () {
+        it("shall call 3 functions for initialization", () => {
+            const setConditionsSpy = jest.spyOn(CesiumStyle.prototype, "setConditions"),
+                overwriteStylingSpy = jest.spyOn(StyleClass.prototype, "overwriteStyling"),
+                setStyleSpy = jest.spyOn(StyleClass.prototype, "setStyle");
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            expect(setConditionsSpy).toHaveBeenCalledTimes(1);
+            expect(overwriteStylingSpy).toHaveBeenCalledTimes(1);
+            expect(setStyleSpy).toHaveBeenCalledTimes(1);
+        });
+    });
+
+
+    describe("createStyle", function () {
+        it("shall call createCondition and create expected style", () => {
+            const createConditionSpy = jest.spyOn(CesiumStyle.prototype, "createCondition"),
+                createdStyle = styleCesiumClass.createStyle();
+
+            styleCesiumClass = new CesiumStyle();
+            expect(createConditionSpy).toHaveBeenCalledTimes(1);
+            expect(createConditionSpy).toHaveBeenCalledWith(rule.conditions, expectedStyle);
+            expect(createdStyle).toEqual(expectedStyle);
+        });
+    });
+
+    describe("createCondition", function () {
+        it("createCondition with conditions and no style", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCondition(rule.conditions);
+
+            expect(condition).toEqual(expectedStyle);
+        });
+
+        it("createCondition with no conditions and no style", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            delete rule.conditions;
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCondition(undefined);
+
+            expect(condition).toEqual(["true", "rgba(50, 154, 26, 0.8)"]);
+        });
+
+
+        it("createCondition no conditions but with style", () => {
+            let condition = null;
+            const style = {
+                color: "rgba(150, 154, 26, 0.8)"
+            };
+
+            styleCesiumClass = new CesiumStyle();
+            delete rule.conditions;
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCondition(undefined, style);
+
+            expect(condition).toEqual(["true", "rgba(150, 154, 26, 0.8)"]);
+        });
+    });
+
+    describe("createCesiumConditionForRule", function () {
+        it("createCesiumConditionForRule with an equals condition", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCesiumConditionForRule([["attributes.Dachform", "Flachdach"]]);
+
+            expect(condition).toEqual("((${attributes.Dachform} === 'Flachdach'))");
+        });
+
+        it("createCesiumConditionForRule with 2 equals conditions", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCesiumConditionForRule([["attributes.Dachform", "Flachdach"], ["foo", "bar"]]);
+
+            expect(condition).toEqual("((${attributes.Dachform} === 'Flachdach') && (${foo} === 'bar'))");
+        });
+
+        it("createCesiumConditionForRule with a >, <= condition", () => {
+            let condition = null;
+
+            styleCesiumClass = new CesiumStyle();
+            styleCesiumClass.initialize(rule);
+            condition = styleCesiumClass.createCesiumConditionForRule([["attributes.height", [10, 20]]]);
+
+            expect(condition).toEqual("((${attributes.height} > 10 && ${attributes.height} <= 20))");
+        });
+
+
+    });
+});