feat(draw): migrate plugin

examples/snowbox/index.js

@@ -9,6 +9,7 @@
 } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
 import pluginAttributions from '@polar/polar/plugins/attributions'
+import pluginDraw from '@polar/polar/plugins/draw'
 import pluginExport from '@polar/polar/plugins/export'
 import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
@@ -34,6 +35,7 @@
 const reports = '6059'
 const denkmal = 'denkmaelerWMS'
 const hamburgBorder = '6074'
+const flurstuecke = 'flurstuecke'
 
 let colorScheme = 'light'
 // eslint-disable-next-line no-unused-vars
@@ -94,7 +96,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -120,19 +122,25 @@
 				name: 'Anliegen (MML)',
 				visibility: false,
 			},
+			{
+				id: flurstuecke,
+				type: 'mask',
+				name: 'Flurstücke',
+				visibility: false,
+			},
 			{
 				id: ausgleichsflaechen,
 				type: 'mask',
 				name: 'Ausgleichsflächen',
 				styleId: 'panda',
-				visibility: true,
+				visibility: false,
 				minZoom: 5,
 			},
 			{
 				id: denkmal,
 				type: 'mask',
 				name: 'Kulturdenkmale',
-				visibility: true,
+				visibility: false,
 				options: {
 					layers: {
 						order: '6,24,25,4,3,2,1,0',
@@ -150,6 +158,11 @@
 					},
 				},
 			},
+			{
+				id: 'lgv_multipolygons',
+				type: 'WFS-T',
+				name: 'LGV WFS-T Multipolygone (P)',
+			},
 		],
 		layout: 'nineRegions',
 		checkServiceAvailability: true,
@@ -403,7 +416,7 @@
 	pluginIconMenu({
 		displayComponent: true,
 		layoutTag: 'TOP_RIGHT',
-		initiallyOpen: 'layerChooser',
+		initiallyOpen: 'draw',
 		menus: [
 			[
 				{
@@ -478,6 +491,86 @@
 					}),
 				},
 			],
+			[
+				{
+					plugin: pluginDraw({
+						// showLoader: true, // defaultValue: true
+						// showToasts: true, // defaultValue: true
+						showMeasure: true, // defaultValue: false
+						showStyling: true, // defaultValue: false
+						layers: [
+							{
+								id: 'localLayer',
+								name: 'Lokale Zeichenebene',
+								selectableDrawModes: [
+									'Point',
+									'LineString',
+									'Polygon',
+									'Circle',
+									'Text',
+								],
+								snapTo: [flurstuecke],
+								style: {
+									fill: {
+										hatch: {
+											pattern: 'diagonal',
+											lineWidth: 10,
+											size: 30,
+											backgroundColor: [100, 100, 255, 0.5],
+											patternColor: [255, 255, 255, 1.0],
+										},
+									},
+									stroke: {
+										color: '#3375d4',
+										width: 2,
+									},
+									imageCircle: {
+										radius: 7,
+										fill: {
+											color: 'rgb(51 117 212 / 100%)',
+										},
+									},
+								},
+								textStyle: {
+									font: {
+										size: [10, 20, 30],
+										family: 'Consolas',
+									},
+									textColor: '#16161D',
+								},
+								lassos: [{ id: flurstuecke }],
+								revision: {
+									autofix: true,
+									mergeToMultiGeometries: true,
+									metaServices: [
+										{
+											id: flurstuecke,
+											propertyNames: [
+												'land',
+												'gemarkung',
+												'regbezirk',
+												'kreis',
+												'gemeinde',
+											],
+											aggregationMode: 'unequal',
+										},
+									],
+									validate: true,
+								},
+							},
+
+							/* TODO: support WFS-T layers for selection
+							{
+								id: 'lgv_multipolygons',
+								name: 'LGV WFS-T Multipolygone (P)',
+								selectableDrawModes: ['MultiPolygon'],
+								saving: {}, // »if ID matches a WFS-T config, we may need some save parameters and then are good to go« – partially copyable from FDB, also use the OL methods provided; please mind that saving (esp. of styles) should be written in an adaptable fashion, i.e. adapters should be planned, since people will make up formats wherever they go
+							},
+							*/
+						],
+					}),
+				},
+			],
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -578,6 +671,22 @@
 			JSON.stringify(coordinates))
 )
 
+subscribe(map, 'draw', 'featureCollection', (featureCollection) =>
+	// eslint-disable-next-line no-console
+	console.info(
+		'Feature Collection was updated: ',
+		JSON.stringify(featureCollection, null, 2)
+	)
+)
+
+subscribe(map, 'draw', 'revisedFeatureCollection', (revisedFeatureCollection) =>
+	// eslint-disable-next-line no-console
+	console.info(
+		'Revised Feature Collection was updated: ',
+		JSON.stringify(revisedFeatureCollection, null, 2)
+	)
+)
+
 /* simple language switcher attached for demo purposes;
  * language switching is considered a global concern and
  * should be handled by the leading application */

examples/snowbox/services.js

@@ -86,4 +86,24 @@ export default [
 		featureNS: 'http://www.deegree.org/app',
 		featurePrefix: 'app',
 	},
+	{
+		id: 'flurstuecke',
+		typ: 'OAF',
+		name: 'Flurstueck',
+		url: 'https://api.hamburg.de/datasets/v1/alkis_vereinfacht',
+		collection: 'Flurstueck',
+		crs: 'http://www.opengis.net/def/crs/EPSG/0/25832',
+		bboxCrs: 'http://www.opengis.net/def/crs/EPSG/0/25832',
+	},
+	// NOTE: Here be WFS-T 🐉
+	{
+		id: 'lgv_multipolygons',
+		name: 'LGV WFS-T Multipolygone',
+		url: 'https://masterportal.schulung.deegree.pro/core-services/services/wfstlgv',
+		typ: 'WFS',
+		featurePrefix: 'sf',
+		featureType: 'wfstlgv',
+		version: '1.1.0',
+		featureNS: 'http://cite.opengeospatial.org/gmlsf',
+	},
 ]