search

sebastianpauli / netgis-client

WebGIS-Client in development for NetGIS / Geoportal RLP.
MIT License
4 stars 0 forks source link

Erlaubter Bereich #26

Closed Rastopapola closed 3 weeks ago

Rastopapola commented 9 months ago

Status quo

Aktuell können Nutzer überall zeichnen wo sie wollen.

Enhancement

Für gewisse Anwendungsfälle kann es sinnvoll sein die Eingabe nur in spezifischen Bereichen zu erlauben. Diese Informationen müssten dem Kartenclient zum Start übergeben werden. Erneut ließe sich das über ein entsprechendes **data-*** Attribut lösen, z.B. data-allowedArea:

Bspw.:

<main id="container" data-editable="true" data-allowedArea="..." style="position: relative; width: 100%; height: 100%;">
</main>

data-allowedArea

Dem Attribut kann eine Geometrie (bspw. als geojson) mitgegeben werden. Auch Multipolygone sind hierbei denkbar, falls die erlaubten Bereiche räumlich voneinander getrennt liegen.

Darstellung

Der Nutzer muss erkennen können wo sich der erlaubte bzw. nicht erlaubte Bereich befinden. Der nicht-erlaubte Bereich (außerhalb des erlaubten Bereichs) sollte rot schraffiert und damit deutlich als "nicht benutzbar" dargestellt werden. Die Grenze zwischen erlaubtem und nicht-erlaubtem Bereich muss deutlich erkennbar sein.

Funktionsweise

Die Grenze des erlaubten Bereichs kann zum Snappen genutzt werden, um saubere Abgrenzungen zu ermöglichen.

Zeichnen im nicht-erlaubten Bereich

Es sind zwei Arten denkbar, wie der Nutzer darauf hingewiesen wird, dass dort nicht gezeichnet werden darf, bzw. wie dieser bei der Korrektur unterstützt werden kann:

  1. Falls Zeichnen (Polygone, Linien, Punkte) aktiviert ist, darf der Eckpunkt nicht über die Grenze des erlaubten Bereichs hinaus wandern. Der Cursor des Nutzers würde dann also "weiter" laufen, ohne, dass der zu platzierende Eckpunkt "mitwandert". Dieser bleibt an der Grenze "kleben". Gleiches gilt für das Verschieben-Tool: Auch hier darf sich ein Eckpunkt nicht über die Grenze hinaus bewegen.
  2. (Vermutlich einfacher) Ein Nutzer darf im nicht-erlaubten Bereich zeichnen. Sobald die Geometrie den nicht-erlaubten Bereich überschreitet, wird die Intersection gebildet und auffallend hervorgehoben (rot pulsierend, o.ä.). Ein Tooltip/Ein Textfeld (mit Zeiger?) schwebt über der erstellten Intersection, sodass der Nutzer selbst kleinste Überschneidungen erkennen kann. Der Tooltip enthält die Nachricht "Nicht erlaubte Überlagerung entfernen?" (o.ä.) mit einem Button "Ja, Entfernen". Wird auf den Button geklickt, wird die hervorgehobene Intersection genutzt, um diesen Anteil aus der gezeichneten Geometrie zu entfernen, sodass keine Grenzüberlagerung mehr stattfindet. Die Intersection wird dann ebenfalls gelöscht.

Ideen

sebastianpauli commented 3 weeks ago

Added in latest LANIS Update.

You can now specify the allowed drawing area by setting either "data-bounds" on the container element or config[ "tools" ][ "bounds" ] to a GeoJSON string containing polygons.

Additionally you can set to show the boundaries on the map using config[ "tools" ][ "show_bounds" ].

Example:

<main id="container" data-editable="true" data-bounds='{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[385947.1733847084,5587420.133948028],[385924.7215815909,5587575.524501444],[385983.8340881849,5587720.975589848],[386108.3204437366,5587816.649279207],[386128.61293018516,5587825.002716699],[386287.15210903366,5587844.293282578],[386433.12464682607,5587779.495015839],[386525.16063342174,5587648.972319218],[386533.51636313583,5587625.702029063],[386546.62565086246,5587472.317275605],[386481.9349259469,5587332.625306874],[386356.47850408487,5587243.409712766],[386337.3796933098,5587236.249623489],[386187.71257841075,5587220.454999909],[386049.20810348407,5587279.329662044],[385956.72279009596,5587398.057006087],[385947.1733847084,5587420.133948028]]]},"properties":null},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[386993.0181936734,5587227.7525485065],[386633.3370473852,5587978.680763736],[386923.60604263534,5588546.60966601],[387617.727553016,5588420.403243283],[387642.9683352116,5587934.508515782],[387232.80562453216,5588029.163332827],[387333.7687533148,5587549.578926463],[387655.5887263095,5587530.647963054],[387377.9401221572,5586893.305528278],[386993.0181936734,5587227.7525485065]]]},"properties":null},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[385705.73830169474,5586685.064930778],[386551.3045052493,5587019.511951006],[386993.0181936734,5586697.685573051],[386658.57782958087,5586306.445662595],[385970.76651474915,5586173.928918731],[385705.73830169474,5586685.064930778]]]},"properties":null}],"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::25832"}},"area":1928455.8138341408}'>

Inside Config:

"tools":
{
    "bounds": '{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[385947.1733847084,5587420.133948028],[385924.7215815909,5587575.524501444],[385983.8340881849,5587720.975589848],[386108.3204437366,5587816.649279207],[386128.61293018516,5587825.002716699],[386287.15210903366,5587844.293282578],[386433.12464682607,5587779.495015839],[386525.16063342174,5587648.972319218],[386533.51636313583,5587625.702029063],[386546.62565086246,5587472.317275605],[386481.9349259469,5587332.625306874],[386356.47850408487,5587243.409712766],[386337.3796933098,5587236.249623489],[386187.71257841075,5587220.454999909],[386049.20810348407,5587279.329662044],[385956.72279009596,5587398.057006087],[385947.1733847084,5587420.133948028]]]},"properties":null},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[386993.0181936734,5587227.7525485065],[386633.3370473852,5587978.680763736],[386923.60604263534,5588546.60966601],[387617.727553016,5588420.403243283],[387642.9683352116,5587934.508515782],[387232.80562453216,5588029.163332827],[387333.7687533148,5587549.578926463],[387655.5887263095,5587530.647963054],[387377.9401221572,5586893.305528278],[386993.0181936734,5587227.7525485065]]]},"properties":null},{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[385705.73830169474,5586685.064930778],[386551.3045052493,5587019.511951006],[386993.0181936734,5586697.685573051],[386658.57782958087,5586306.445662595],[385970.76651474915,5586173.928918731],[385705.73830169474,5586685.064930778]]]},"properties":null}],"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::25832"}},"area":1928455.8138341408}',
    "show_bounds": true
}