init push

src/app/models/RawLayer.ts

@@ -0,0 +1,106 @@
+import VectorLayer from 'ol/layer/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
+import {Vector as VectorSource} from 'ol/source';
+import {EPSG} from "../enums/EPSG";
+import Style from 'ol/style/Style';
+import Stroke from 'ol/style/Stroke';
+import Fill from 'ol/style/Fill';
+import {Config} from "../misc/Config";
+
+/**
+ * Represents a raw (not processed) map layer
+ */
+export class RawLayer {
+  constructor(
+    /**
+     * Name of layer
+     */
+    public name: string,
+    /**
+     * Data of Layer (normally in geojson format)
+     */
+    public data: string,
+    /**
+     * Layer stroke color as number array with opacity like -> [255, 255, 255, 0.5]
+     * The fill color is an opaque decreased derivation of this value.
+     */
+    public color: number[]
+  ) {
+    this.saveColorToGeoJSON();
+  }
+
+  /**
+   * Creates a RawLayer instance from a VectorLayer and saves the style properties in geojson. Consider that the
+   * layer color information are applied to each feature!
+   * @param layer
+   */
+  public static fromVectorLayer(layer: VectorLayer): RawLayer {
+    const writer = new GeoJSON();
+    const source = layer.getSource();
+
+    // get default style values
+    const features = source.getFeatures();
+    const featureProperties = features[0].getProperties();
+    const rawLayerColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke'];
+
+    const geoJSONString = writer.writeFeatures(features,{featureProjection: EPSG.openLayersDefault});
+    return new RawLayer(layer.get('name'), geoJSONString, rawLayerColor);
+  }
+
+  /**
+   * Creates a VectorLayer instance from a RawLayer and applies the layer color to all features
+   * @param rawLayer
+   */
+  public static toVectorLayer(rawLayer: RawLayer): VectorLayer {
+    const vectorSource = new VectorSource();
+    const geoJSON = new GeoJSON();
+    // load geoJSON features from rawLayer
+    const features = geoJSON.readFeatures(rawLayer.data, {featureProjection: EPSG.openLayersDefault});
+
+    // apply style to all features
+    features.forEach(feature => {
+      // TODO
+      //  determine if this feature has a own color! If so, do not apply default color and use own color.
+      const featureProperties = feature.getProperties();
+      const strokeColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-stroke'];
+      const fillColor = featureProperties[Config.GEO_JSON_PREFIX]['default-style-fill'];
+
+      feature.setStyle(new Style({
+        stroke: new Stroke({
+          color: strokeColor,
+          width: 1
+        }),
+        fill: new Fill({
+          color: fillColor
+        })
+      }));
+    })
+
+    // add features to source
+    vectorSource.addFeatures(features);
+
+    return new VectorLayer({
+      name: rawLayer.name,
+      renderMode: 'image',
+      source: vectorSource
+    });
+  }
+
+  /**
+   * Adds the RawLayer color property to all feature properties from data attribute
+   */
+  private saveColorToGeoJSON() {
+    const geoJSON = new GeoJSON();
+    // load geoJSON features from rawLayer
+    const features = geoJSON.readFeatures(this.data, {featureProjection: EPSG.openLayersDefault});
+    features.forEach(feature => {
+      // save default color in feature properties
+      const stylesToSave = {};
+      stylesToSave[Config.GEO_JSON_PREFIX] = {};
+      stylesToSave[Config.GEO_JSON_PREFIX]['default-style-stroke'] = this.color;
+      stylesToSave[Config.GEO_JSON_PREFIX]['default-style-fill'] = [...this.color.slice(0, 3), 0.1];
+      feature.setProperties(stylesToSave);
+    })
+    this.data = geoJSON.writeFeatures(features, {featureProjection: EPSG.openLayersDefault});
+  }
+}