Merge pull request #242 from Dataport/feature/add-lasso-logic-to-draw

add lasso logic to draw

packages/clients/diplan/example/config.js

@@ -111,6 +111,14 @@ export default {
   },
   draw: {
     enableOptions: true,
+    lassos: [
+      {
+        id: flurstuecke,
+      },
+      {
+        id: xplanwfs,
+      },
+    ],
     measureOptions: {
       metres: true,
       kilometres: true,

packages/clients/diplan/example/index.html

@@ -22,6 +22,7 @@ <h3>Steuerung von außen</h3>
           <button id="action-toast">Toast</button>
           <button id="action-load-geojson">GeoJSON hinzufügen</button>
           <button id="action-zoom-to-all">Zoome auf Zeichnung</button>
+          <button id="action-lasso">Lasso-Funktion</button>
           <label>
             Adresssuche (erstbestes Ergebnis):
             <input id="action-address-search-filler"/>

packages/clients/diplan/example/prod-example.html

@@ -22,6 +22,7 @@ <h3>Steuerung von außen</h3>
           <button id="action-toast">Toast</button>
           <button id="action-load-geojson">GeoJSON hinzufügen</button>
           <button id="action-zoom-to-all">Zoome auf Zeichnung</button>
+          <button id="action-lasso">Lasso-Funktion</button>
           <label>
             Adresssuche (erstbestes Ergebnis):
             <input id="action-address-search-filler"/>

packages/clients/diplan/example/setup.js

@@ -70,6 +70,7 @@ export default (client, layerConf, config) => {
       const actionFillAddressSearch = document.getElementById(
         'action-address-search-filler'
       )
+      const actionLasso = document.getElementById('action-lasso')
 
       actionPlus.onclick = () =>
         mapInstance.$store.dispatch('plugin/zoom/increaseZoomLevel')
@@ -96,6 +97,8 @@ export default (client, layerConf, config) => {
           autoselect: 'first',
         })
       )
+      actionLasso.onclick = () =>
+        mapInstance.$store.dispatch('plugin/draw/setMode', 'lasso')
 
       const htmlZoom = document.getElementById('subscribed-zoom')
       const htmlGfi = document.getElementById('subscribed-gfi')

packages/clients/diplan/src/polar-client.ts

@@ -42,7 +42,11 @@ polarCore.addPlugins([
         id: 'layerChooser',
       },
       {
-        plugin: Draw({}),
+        plugin: Draw({
+          toastAction: 'plugin/toast/addToast',
+          addLoading: 'plugin/loadingIndicator/addLoadingKey',
+          removeLoading: 'plugin/loadingIndicator/removeLoadingKey',
+        }),
         icon: '$vuetify.icons.ruler',
         id: 'draw',
       },

packages/lib/getFeatures/CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## unpublished
+
+- Feature: Add new methods `getVectorFeaturesByBboxRequest` and `getVectorFeaturesByFeatureRequest` that support both WFS and OAF layers.
+- Feature: Add `parseWfsResponse` method to package re-exports.
+
 ## 3.0.0
 
 - Breaking: Upgrade peerDependency `ol` from `^9.2.4` to `^10.3.1`.

packages/lib/getFeatures/index.ts

@@ -1,2 +1,7 @@
 export * from './types'
 export { getWfsFeatures } from './wfs'
+export { parseWfsResponse } from './wfs/parse'
+export {
+  getVectorFeaturesByBboxRequest,
+  getVectorFeaturesByFeatureRequest,
+} from './vector'

packages/lib/getFeatures/vector/index.ts

@@ -0,0 +1,66 @@
+import { rawLayerList } from '@masterportal/masterportalapi'
+import { Feature } from 'ol'
+
+const supportedFormats = ['OAF', 'WFS']
+
+export const getVectorFeaturesByBboxRequest = ({
+  bbox,
+  fetchLayerId,
+  projectionCode,
+}: {
+  bbox: number[]
+  fetchLayerId: string
+  projectionCode: string
+}) => {
+  const serviceDefinition = rawLayerList.getLayerWhere({ id: fetchLayerId })
+  if (!supportedFormats.includes(serviceDefinition.typ)) {
+    throw new Error(
+      `@polar/lib-get-features#getVectorFeaturesByBboxRequest: Layer with ID "${fetchLayerId}" of type "${serviceDefinition.typ}" was used to retrieve vector data, but is not within the range of supported types [${supportedFormats}].`
+    )
+  }
+
+  const [codeName, codeNumber] = projectionCode.split(':')
+
+  const url =
+    serviceDefinition.typ === 'OAF'
+      ? [
+          serviceDefinition.url,
+          'collections',
+          serviceDefinition.collection,
+          `items?f=json&limit=100&bbox=${bbox}&bbox-crs=http://www.opengis.net/def/crs/${codeName}/0/${codeNumber}&crs=http://www.opengis.net/def/crs/${codeName}/0/${codeNumber}`,
+        ].join('/')
+      : `${serviceDefinition.url}${[
+          `?service=${serviceDefinition.typ}`,
+          `version=${serviceDefinition.version}`,
+          `request=GetFeature`,
+          `srsName=${projectionCode}`,
+          `typeName=${serviceDefinition.featureType}`,
+          `bbox=${bbox},${projectionCode}`,
+        ].join('&')}`
+
+  return fetch(url)
+}
+
+export const getVectorFeaturesByFeatureRequest = ({
+  feature,
+  fetchLayerId,
+  projectionCode,
+}: {
+  feature: Feature
+  fetchLayerId: string
+  projectionCode: string
+}) => {
+  const bbox = feature.getGeometry()?.getExtent?.()
+
+  if (typeof bbox === 'undefined') {
+    throw new Error(
+      '@polar/lib-get-features#getVectorFeaturesByFeatureRequest: Given feature had no extent.'
+    )
+  }
+
+  return getVectorFeaturesByBboxRequest({
+    bbox,
+    fetchLayerId,
+    projectionCode,
+  })
+}

packages/plugins/Draw/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Feature: Add a `"translate"` mode that allows moving drawn features as they are.
 - Feature: Add a `"snapTo"` key to the configuration that allows defining vector layers to snap to while drawing, editing, and translating.
+- Feature: Add a lasso mode that allows copying up features from a vector layer that are contained within the user's hand drawn polygon. This also adds the fields `addLoading`, `removeLoading`, and `toastAction` for usage in the `lassos`.
 - Feature: Interactions requiring dragging are now marked with the POLAR flag `_isPolarDragLikeInteraction`.
 
 ## 3.0.0

packages/plugins/Draw/README.md

@@ -33,12 +33,16 @@ The styling of the drawn features can be configured to overwrite the default ol-
 
 | fieldName | type | description |
 | - | - | - |
+| addLoading | string? | Expects the path to a mutation within the store. This mutation is committed with a plugin-specific loading key as payload when starting asynchronous procedures that are intended to be communicated to the user. |
 | enableOptions | boolean? | If `true`, draw options are displayed, like choosing and changing stroke color. Not available for texts features. Defaults to `false`. |
+| lassos | lasso[]? | Allows configuring lasso options. The lasso function allows free-hand drawing a geometry on the map; features completely fitting into that geometry will be copied up to the draw layer from all configured layers. UI-wise, it is not intuitive for users do understand what a "Lasso" does. This feature currently requires further instructions by the outlying UI on what one is supposed to do with it. |
+| removeLoading | string? | Expects the path to a mutation within the store. This mutation is committed with a plugin-specific loading key as payload when finishing asynchronous procedures that are intended to be communicated to the user. |
 | measureOptions | measureOptions? | If set, an additional radio is being shown to the user to be able to let the (then) drawn features display their length and / or area. See [draw.measureOptions](#drawmeasureoptions) for further information. Not shown by default. |
 | selectableDrawModes | string[]? | List 'Point', 'LineString', 'Circle', 'Text' and/or 'Polygon' as desired. All besides 'Text' are selectable by default. |
 | snapTo | string[]? | Accepts an array of layer IDs. If these layers are active, they are used as snapping material for geometry manipulation. The Draw layer will also always snap to its own features regardless. Please mind that used layers must provide vector data. The layers referred to must be configured in `mapConfiguration.layers`. |
 | style | style? | Please see example below for styling options. Defaults to standard OpenLayers styling. |
 | textStyle | textStyle? | Use this object with properties 'font' and 'textColor' to style text feature. |
+| toastAction | string? | This string will be used as action to send a toast information to the user to clarify why something happened in edge cases. If this is not defined, the information will only be printed to the console for debugging purposes instead. |
 
 For details on the `displayComponent` attribute, refer to the [Global Plugin Parameters](../../core/README.md#global-plugin-parameters) section of `@polar/core`.
 
@@ -55,8 +59,8 @@ draw: {
     },
   },
   style: {
-    fill: { 
-      color: 'rgba(255, 255, 255, 0.5)' 
+    fill: {
+      color: 'rgba(255, 255, 255, 0.5)'
     },
     stroke: {
       color: '#e51313',
@@ -72,6 +76,13 @@ draw: {
 
 </details>
 
+#### draw.lasso
+
+| fieldName | type | description |
+| - | - | - |
+| id | string | The layer id of a vector layer to copy up vector features from. |
+| minZoom | boolean | Defaults to `true`. If a boolean is given, the `minZoom` (if configured) of the `LayerConfiguration` in `mapConfiguration.layers` will be adhered to when copying up geometries from the source. This is to prevent the client from overly burdening feature-rich vector services on accident. |
+
 #### draw.measureOptions
 
 | fieldName | type | description |

packages/plugins/Draw/package.json

@@ -24,11 +24,15 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@turf/center-of-mass": "^7.2.0"
+    "@turf/boolean-contains": "^7.2.0",
+    "@turf/center-of-mass": "^7.2.0",
+    "@polar/lib-get-features": "^3.0.0"
   },
   "peerDependencies": {
+    "@masterportal/masterportalapi": "2.45.0",
     "@polar/core": "^3.0.0",
     "@repositoryname/vuex-generators": "^1.1.2",
+    "i18next": "^23.11.5",
     "ol": "^10.3.1",
     "vue": "^2.6.14",
     "vuex": "^3.6.2"

packages/plugins/Draw/src/locales.ts

@@ -9,6 +9,7 @@ export const resourcesDe = {
         measure: 'Zeichnen und Messen',
         write: 'Zeichnen und Schreiben',
         writeAndMeasure: 'Zeichnen, Schreiben und Messen',
+        lasso: 'Lasso',
         edit: 'Bearbeiten',
         translate: 'Verschieben',
         delete: 'Löschen',
@@ -40,6 +41,12 @@ export const resourcesDe = {
       label: {
         textSize: 'Textgröße (px) wählen:',
       },
+      lasso: {
+        layerRejected:
+          'Die Antwort des Layers "{{id}}" konnte nicht gelesen werden. Es wurden keine Geometrien aus diesem Layer bezogen.',
+        internalError:
+          'Ein unerwarteter Fehler ist in der Verarbeitung der Lasso-Daten aufgetreten.',
+      },
     },
   },
 } as const
@@ -53,6 +60,7 @@ export const resourcesEn = {
         measure: 'Draw and measure',
         write: 'Draw and write',
         writeAndMeasure: 'Draw, write and measure',
+        lasso: 'Lasso',
         edit: 'Edit',
         translate: 'Translate',
         delete: 'Delete',
@@ -84,6 +92,12 @@ export const resourcesEn = {
       label: {
         textSize: 'Choose text size (px):',
       },
+      lasso: {
+        layerRejected:
+          'The response of layer "{{id}}" could not be read. No geometries were fetched from that layer.',
+        internalError:
+          'An unexpected error occured in the processing of lasso data.',
+      },
     },
   },
 } as const

packages/plugins/Draw/src/store/actions.ts

@@ -11,6 +11,7 @@ import createInteractions from './createInteractions'
 import createModifyInteractions from './createInteractions/createModifyInteractions'
 import createTextInteractions from './createInteractions/createTextInteractions'
 import createTranslateInteractions from './createInteractions/createTranslateInteractions'
+import createLassoInteractions from './createInteractions/createLassoInteractions'
 import modifyDrawStyle from './createInteractions/modifyDrawStyle'
 import modifyTextStyle from './createInteractions/modifyTextStyle'
 import createDrawInteractions from './createInteractions/createDrawInteractions'
@@ -25,6 +26,7 @@ export const makeActions = () => {
   const actions: PolarActionTree<DrawState, DrawGetters> = {
     createInteractions,
     createDrawInteractions,
+    createLassoInteractions,
     createModifyInteractions,
     createTranslateInteractions,
     createTextInteractions,