@geops/rvf-mobility-web-component 0.1.9 → 0.1.11

package/src/utils/createMobiDataBwWfsLayer.ts

@@ -0,0 +1,120 @@
+import { Feature, getUid } from "ol";
+import { GeoJSON } from "ol/format";
+import { Point } from "ol/geom";
+import VectorLayer, { Options } from "ol/layer/Vector";
+import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
+import { Vector } from "ol/source";
+import { Circle, Fill, Stroke, Style, Text } from "ol/style";
+
+function createMobiDataBwWfsLayer(
+  name: string,
+  color: string,
+  layerOptions: Options = {
+    minZoom: 17.99,
+  },
+): VectorLayer<Vector<Feature<Point>>> {
+  const source = new Vector({
+    format: new GeoJSON(),
+    strategy: bboxStrategy,
+    url: function (extent) {
+      return (
+        "https://api.mobidata-bw.de/geoserver/MobiData-BW/" +
+        name +
+        "/ows" +
+        "?service=WFS&" +
+        "version=1.1.0&request=GetFeature&typename=" +
+        "MobiData-BW:" +
+        name +
+        "&" +
+        "outputFormat=application/json&srsname=EPSG:3857&" +
+        "bbox=" +
+        extent.join(",") +
+        ",EPSG:3857"
+      );
+    },
+  });
+  const style = new Style({
+    image: new Circle({
+      declutterMode: "declutter",
+      displacement: [10, 10],
+      fill: new Fill({
+        color: "white",
+      }),
+      radius: 10,
+      stroke: new Stroke({
+        color: color,
+        width: 2,
+      }),
+    }),
+    text: new Text({
+      declutterMode: "declutter",
+      fill: new Fill({
+        color: color,
+      }),
+      font: "bold 12px inherit",
+      offsetX: 10,
+      offsetY: -10,
+      // stroke: new Stroke({ color: "black", width: 1 }),
+      // text: ["to-string", ["get", "num_vehicles_available"]],
+    }),
+  });
+
+  const styleFunction = (feature) => {
+    const clone = style.clone();
+    clone.getText().setText(feature.get("num_vehicles_available")?.toString());
+    const isFreeFloat = !feature.get("num_vehicles_available")?.toString();
+    if (isFreeFloat) {
+      (clone.getImage() as Circle).setRadius(6);
+    }
+    clone.setZIndex(parseInt(getUid(feature), 10));
+    return [
+      clone,
+      // new Style({
+      //   text: new Text({
+      //     fill: new Fill({ color: color }),
+      //     offsetY: 15,
+      //     stroke: new Stroke({ color: "white", width: 2 }),
+      //     text: feature.get("form_factor") || name,
+      //   }),
+      // }),
+    ];
+  };
+  const layer = new VectorLayer({
+    // @ts-expect-error - custom properties
+    isQueryable: true,
+    name,
+    // declutter: true,
+    source: source,
+    ...layerOptions,
+    // style: (feature) => {
+    //   console.log("feature", feature);
+    //   style
+    //     .getText()
+    //     .setText(feature.get("num_vehicles_available").toString());
+    //   return style;
+    // },
+
+    // style: {
+    //   "circle-fill-color": "white",
+    //   "circle-radius": 15,
+    //   "circle-stroke-color": color,
+    //   "circle-stroke-width": 2,
+    //   // "fill-color": "rgba(100,100,100,0.25)",
+    //   // "stroke-color": "white",
+    //   // "stroke-width": 0.75,
+    //   // "text-background-fill-color": "black",
+    //   "text-fill-color": color,
+    //   "text-font": "bold 12px sans-serif",
+    //   "text-stroke-color": color,
+    //   "text-value": ["to-string", ["get", "num_vehicles_available"]],
+    // },
+  });
+
+  source.on("addfeature", function (event) {
+    const feature = event.feature;
+    feature.setStyle(styleFunction);
+  });
+  return layer;
+}
+
+export default createMobiDataBwWfsLayer;