Skip to content

Commit

Permalink
working on #43: text changes due to customer request
Browse files Browse the repository at this point in the history
  • Loading branch information
@helllth
helllth committed Feb 24, 2021
1 parent 47587d8 commit 06d8a25
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 203 deletions.
30 changes: 16 additions & 14 deletions src/components/starkregen/Help10Datengrundlage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,23 @@ const Component = ({ uiState, uiStateActions, showModalMenu }) => {
<div>
<p>
Die Starkregengefahrenkarte Wuppertal stellt in zwei umschaltbaren Kartenansichten
jeweils in einem 1m x 1m Raster maximale Wasserstände bzw. maximale
Fließgeschwindigkeiten dar, die im Verlauf von simulierten Starkregenereignissen
auftreten. Die <b>Wasserstände</b> werden dabei in vier Stufen (größer als 10, 30, 50
und 100 cm) klassifiziert, die in der Karte durch unterschiedliche Einfärbung der
Rasterzellen (von blau nach rot) dargestellt werden. Die Einfärbung der Rasterzellen für
die Darstellung der <b>Fließgeschwindigkeiten</b> jenseits eines Schwellwertes von 0,5
Meter pro Sekunde (m/s) bis hin zu Maximalwerten größer als 6 m/s erfolgt über einen
Farbverlauf von gelb nach dunkelrot. Die Simulationsberechnungen wurden im Auftrag der
Stadt Wuppertal und der Wuppertaler Stadtwerke (WSW Energie und Wasser AG) durch das
maximale Wasserstände bzw. maximale Fließgeschwindigkeiten dar, die im Verlauf von
simulierten Starkregenereignissen auftreten. Dazu wird ein Raster mit einer Kantenlänge
von 1 m benutzt. Die Wasserstände und Fließgeschwindigkeiten werden jeweils mit einem
Farbverlauf visualisiert. Der Farbverlauf für die <strong>Wasserstände</strong> benutzt
die Eckwerte 20 cm (blau), 40 cm (gelb), 75 cm (orange) und 100 cm (rot). Wasserstände
unter 10 cm werden nicht farbig ausgeprägt (transparente Darstellung). Zur
Visualisierung der <strong>Fließgeschwindigkeiten</strong>, angegeben in Meter pro
Sekunde (m/s), werden die Eckwerte 0,5 m/s (gelb), 2,0 m/s (orange), 4,0 m/s (hellrot)
und 6 m/s (dunkelrot) verwendet. Der untere Grenzwert für die farbige Anzeige einer
Fließgeschwindigkeit liegt bei 0,5 m/s. Die Simulationsberechnungen wurden im Auftrag
der Stadt Wuppertal und der Wuppertaler Stadtwerke (WSW Energie und Wasser AG) durch das
Ingenieurbüro Dr. Pecher AG (Erkrath) durchgeführt. Der Regenwasserabfluss im Kanalnetz
und durch Überstau aus dem Kanalnetz austretendes Wasser wurden hierbei vereinfacht
berücksichtigt, ebenso die unterschiedlichen Abflussgeschwindigkeiten auf Oberflächen
mit unterschiedlicher Rauhigkeit (z. B. auf einer Straße schneller als auf einer Wiese).
Durch die Verwendung des Datenbestands der Versiegelungsart von Oberflächen (VerDIS)
kann das Abflussgeschehen flächenbasiert simuliert werden.
Die Informationen zur Oberflächenbeschaffenheit stammen dabei zum größten Teil aus dem
Versiegelungsdaten-Informationssystem VerDIS der Stadtverwaltung Wuppertal.
</p>

<p>
Expand All @@ -40,9 +42,9 @@ const Component = ({ uiState, uiStateActions, showModalMenu }) => {
Anfang 2015). Das DGM wurde um die Gebäude aus dem Wuppertaler Liegenschaftskataster und
das Kanalnetz inklusive verrohrter Gewässerabschnitte aus der Kanalnetzdatenbank der WSW
Energie &amp; Wasser AG ergänzt, um eine hydrologisch korrekte Abflussberechnung zu
gewährleisten. Für eine präzisere Simulation des Fließgeschehens wurden darüber hinaus
39 Brücken manuell rekonstruiert und zehn Regenrückhaltebecken des Wupperverbandes
inklusive deren Leitungen berücksichtigt.{' '}
gewährleisten.Für eine präzisere Simulation des Fließgeschehens wurden ab Version 2.0
der Simulationsberechnungen 39 Brücken manuell rekonstruiert und zehn
Regenrückhaltebecken des Wupperverbandes mitsamt ihren Zuleitungen berücksichtigt.
</p>

<p>
Expand Down
109 changes: 52 additions & 57 deletions src/components/starkregen/Help30InKartePositionieren.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,62 +3,57 @@ import GenericModalMenuSection from 'components/commons/GenericModalMenuSection'
import Icon from 'components/commons/Icon';

const Component = ({ uiState, uiStateActions }) => {
return (
<GenericModalMenuSection
uiState={uiState}
uiStateActions={uiStateActions}
sectionKey='positionieren'
sectionTitle='In Karte positionieren'
sectionBsStyle='success'
sectionContent={
<div>
<p>
Um die Gefährdung durch Starkregen in einem bestimmten Bereich des
Stadtgebietes zu erkunden, geben Sie den Anfang (mindestens zwei Zeichen)
eines Stadtteils (Stadtbezirk oder Quartier), einer Adresse, eines
interessanten Ortes (Point of Interest POI) oder eines GEP-Bereichs im
Eingabefeld links unten ein. (Die Bedeutung der GEP-Bereiche wird am Ende
dieses Abschnittes der Kompaktanleitung erläutert!) In der inkrementellen
Auswahlliste werden Ihnen passende Treffer angeboten. (Wenn Sie weitere
Zeichen eingeben, wird der Inhalt der Auswahlliste angepasst.) Durch das
vorangestellte Symbol erkennen Sie, ob es sich dabei um einen{' '}
<Icon name='circle' /> Stadtbezirk, ein <Icon name='pie-chart' /> Quartier,
eine <Icon name='home' /> Adresse, eine <Icon name='road' /> Straße ohne
zugeordnete Hausnummern, einen <Icon name='tag' /> POI, die{' '}
<Icon name='tags' /> alternative Bezeichnung eines POI oder einen{' '}
<Icon name='code-fork' /> GEP-Bereich handelt.
</p>
<p>
Nach der Auswahl eines Treffers aus der Liste wird die Karte auf die
zugehörige Position zentriert. Bei Suchbegriffen mit Punktgeometrie
(Adresse, Straße, POI) wird außerdem ein großer Maßstab (Zoomstufe 14)
eingestellt und ein Marker <Icon name='map-marker' /> auf der Zielposition
platziert. Bei Suchbegriffen mit Flächengeometrie (Stadtbezirk, Quartier,
GEP) wird der Maßstab so eingestellt, dass die Fläche vollständig
dargestellt werden kann. Zusätzlich wird der Bereich außerhalb dieser Fläche
abgedunkelt (Spotlight-Effekt).
</p>
<p>
Durch Anklicken des Werkzeugs <Icon name='close' /> links neben dem
Eingabefeld können Sie die Suche zurücksetzen (Entfernung von Marker bzw.
Abdunklung, Löschen des Textes im Eingabefeld).
</p>
<p>
<b>Erläuterung der GEP-Bereiche:</b> In der Generalentwässerungsplanung
(GEP), dem langfristigen Prozess zur Weiterentwicklung des Wuppertaler
Kanalnetzes, wird nahezu das gesamte Stadtgebiet in Teilbereiche
(GEP-Bereiche) eingeteilt. Die GEP-Bereiche haben eine Nummer und einen
Namen, der zumeist dem Bach entspricht, in den der GEP-Bereich entwässert,
z. B. "GEP 09 Mirker Bach". Alternativ können Sie die GEP-Bereiche auch über
den vorangestellten Namen ansprechen, also z. B. "Mirker Bach (GEP 09)".
Zusätzlich haben wir weitere wichtige Wuppertaler Bäche, die direkt in die
Wupper oder die Düssel einmünden, als Alias für die zugehörigen GEP-Bereiche
angelegt. Diese werden dann in der Form "Burgholzbach (im GEP 27
Cronenberg-West)" angezeigt.
</p>
</div>
}
/>
);
return (
<GenericModalMenuSection
uiState={uiState}
uiStateActions={uiStateActions}
sectionKey="positionieren"
sectionTitle="In Karte positionieren"
sectionBsStyle="success"
sectionContent={
<div>
<p>
Um die Gefährdung durch Starkregen in einem bestimmten Bereich des Stadtgebietes zu
erkunden, geben Sie den Anfang (mindestens zwei Zeichen) eines Stadtteils (Stadtbezirk
oder Quartier), einer Adresse, eines interessanten Ortes (Point of Interest POI) oder
eines GEP-Bereichs im Eingabefeld links unten ein. (Die Bedeutung der GEP-Bereiche wird
am Ende dieses Abschnittes der Kompaktanleitung erläutert!) In der inkrementellen
Auswahlliste werden Ihnen passende Treffer angeboten. (Wenn Sie weitere Zeichen
eingeben, wird der Inhalt der Auswahlliste angepasst.) Durch das vorangestellte Symbol
erkennen Sie, ob es sich dabei um einen <Icon name="circle" /> Stadtbezirk, ein{' '}
<Icon name="pie-chart" /> Quartier, eine <Icon name="home" /> Adresse, eine{' '}
<Icon name="road" /> Straße ohne zugeordnete Hausnummern, einen <Icon name="tag" /> POI,
die <Icon name="tags" /> alternative Bezeichnung eines POI, eine <Icon name="child" />{' '}
Kindertageseinrichtung oder einen <Icon name="code-fork" /> GEP-Bereich handelt.
</p>
<p>
Nach der Auswahl eines Treffers aus der Liste wird die Karte auf die zugehörige Position
zentriert. Bei Suchbegriffen mit Punktgeometrie (Adresse, Straße, POI) wird außerdem ein
großer Maßstab (Zoomstufe 14) eingestellt und ein Marker <Icon name="map-marker" /> auf
der Zielposition platziert. Bei Suchbegriffen mit Flächengeometrie (Stadtbezirk,
Quartier, GEP) wird der Maßstab so eingestellt, dass die Fläche vollständig dargestellt
werden kann. Zusätzlich wird der Bereich außerhalb dieser Fläche abgedunkelt
(Spotlight-Effekt).
</p>
<p>
Durch Anklicken des Werkzeugs <Icon name="close" /> links neben dem Eingabefeld können
Sie die Suche zurücksetzen (Entfernung von Marker bzw. Abdunklung, Löschen des Textes im
Eingabefeld).
</p>
<p>
<b>Erläuterung der GEP-Bereiche:</b> In der Generalentwässerungsplanung (GEP), dem
langfristigen Prozess zur Weiterentwicklung des Wuppertaler Kanalnetzes, wird nahezu das
gesamte Stadtgebiet in Teilbereiche (GEP-Bereiche) eingeteilt. Die GEP-Bereiche haben
eine Nummer und einen Namen, der zumeist dem Bach entspricht, in den der GEP-Bereich
entwässert, z. B. "GEP 09 Mirker Bach". Alternativ können Sie die GEP-Bereiche auch über
den vorangestellten Namen ansprechen, also z. B. "Mirker Bach (GEP 09)". Zusätzlich
haben wir weitere wichtige Wuppertaler Bäche, die direkt in die Wupper oder die Düssel
einmünden, als Alias für die zugehörigen GEP-Bereiche angelegt. Diese werden dann in der
Form "Burgholzbach (im GEP 27 Cronenberg-West)" angezeigt.
</p>
</div>
}
/>
);
};
export default Component;
113 changes: 54 additions & 59 deletions src/components/starkregen/Help50WasserstandAbfragen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,59 @@ import Icon from 'components/commons/Icon';
/* eslint-disable jsx-a11y/anchor-is-valid */

const Component = ({ uiState, uiStateActions, showModalMenu }) => {
return (
<GenericModalMenuSection
uiState={uiState}
uiStateActions={uiStateActions}
sectionKey='wasserstand'
sectionTitle='Max. Wasserstand oder Fließgeschwindigkeit abfragen'
sectionBsStyle='success'
sectionContent={
<div>
<p>
Durch Anklicken der Schaltfläche <Icon name='crosshairs' /> oberhalb des
Kontrollfelds aktivieren Sie abhängig von der eingestellten Kartenansicht
(Wasserstände vs. Fließgeschwindigkeiten) den Modus zur Abfrage des
maximalen Wasserstandes bzw. der maximalen Fließgeschwindigkeit. Diese
Maximalwerte sind im Verlauf jeder Simulation für eine jede 1m x 1m
Rasterzelle berechnet worden. Anstelle der Schaltfläche erscheint in diesem
Modus das Anzeigefeld "Maximaler Wasserstand" bzw. "Maximale
Fließgeschwindigkeit", zunächst mit einem kurzen Bedienungshinweis. Ein
Klick auf eine beliebige Position in der Karte bewirkt jetzt, dass die Zelle
in der Karte markiert und der zugehörige Maximalwert des Wasserstandes bzw.
der Fließgeschwindigkeit in diesem Feld angezeigt wird. Die Anzeige der
maximalen Wasserstände wird dabei auf volle 10 cm gerundet (z. B. "ca. 90
cm"), um die{' '}
<a onClick={() => showModalMenu('aussagekraft')}>
beschränkte Aussagekraft der Simulationsergebnisse
</a>{' '}
zu verdeutlichen. Aus demselben Grund werden berechnete Wasserstände von
mehr als 150 cm nur als "> 150 cm" angezeigt. Die Anzeige der maximalen
Fließgeschwindigkeiten erfolgt in der Einheit "Meter pro Sekunde" (m/s),
gerundet auf eine Nachkommastelle. Fließgeschwindigkeiten von mehr als 6
Meter pro Sekunde werden als "> 6 m/s" angezeigt.
</p>
<p>
<b>Tipp für die Abfrage der maximalen Fließgeschwindigkeiten:</b>{' '}
Deaktivieren Sie die{' '}
<a onClick={() => showModalMenu('karteninhalt')}>Animation</a> und stellen
Sie einen sehr großen Betrachtungsmaßstab ein (Zoomstufe 17 oder 18). Dann
wird Ihnen in der Kartendarstellung auch die zu der maximalen
Fließgeschwindigkeit gehörende Fließrichtung zellenscharf angezeigt.
</p>
<p>
Wenn Sie nach der Abfrage eines maximalen Wasserstandes bzw. einer maximalen
Fließgeschwindigkeit eine andere Simulation auswählen, wird der angezeigte
Zellwert automatisch aktualisiert So können Sie für eine bestimmte Position
bequem alle angebotenen Simulations-Szenarien durchgehen. Auch im
Abfragemodus können Sie die Karte mit gedrückter linker Maustaste
verschieben. Wenn Sie auf diese Weise oder durch{' '}
<a onClick={() => showModalMenu('positionieren')}>
Positionierung über einen Suchbegriff
</a>{' '}
einen Kartenausschnitt auswählen, in dem die zuletzt abgefragte Zelle nicht
mehr enthalten ist, wird das Anzeigefeld auf seinen Startzustand
zurückgesetzt. Mit einem Klick auf das <Icon name='close' /> Symbol rechts
oben im Anzeigefeld beenden Sie den Abfragemodus.
</p>
</div>
}
/>
);
return (
<GenericModalMenuSection
uiState={uiState}
uiStateActions={uiStateActions}
sectionKey="wasserstand"
sectionTitle="Max. Wasserstand oder Fließgeschwindigkeit abfragen"
sectionBsStyle="success"
sectionContent={
<div>
<p>
Durch Anklicken der Schaltfläche <Icon name="crosshairs" /> oberhalb des Kontrollfelds
aktivieren Sie abhängig von der eingestellten Kartenansicht (Wasserstände vs.
Fließgeschwindigkeiten) den Modus zur Abfrage des maximalen Wasserstandes bzw. der
maximalen Fließgeschwindigkeit. Diese Maximalwerte sind im Verlauf jeder Simulation für
eine jede 1m x 1m Rasterzelle berechnet worden. Anstelle der Schaltfläche erscheint in
diesem Modus das Anzeigefeld "Maximaler Wasserstand" bzw. "Maximale
Fließgeschwindigkeit", zunächst mit einem kurzen Bedienungshinweis. Ein Klick auf eine
beliebige Position in der Karte bewirkt jetzt, dass die Zelle in der Karte markiert und
der zugehörige Maximalwert des Wasserstandes bzw. der Fließgeschwindigkeit in diesem
Feld angezeigt wird. Die Anzeige der maximalen Wasserstände wird dabei auf volle 10 cm
gerundet (z. B. "ca. 90 cm"), um die{' '}
<a onClick={() => showModalMenu('aussagekraft')}>
beschränkte Aussagekraft der Simulationsergebnisse
</a>{' '}
zu verdeutlichen. Aus demselben Grund werden berechnete Wasserstände von mehr als 150 cm
nur als "> 150 cm" angezeigt. Die Anzeige der maximalen Fließgeschwindigkeiten erfolgt
in der Einheit "Meter pro Sekunde" (m/s), gerundet auf eine Nachkommastelle.
Fließgeschwindigkeiten von mehr als 6 Meter pro Sekunde werden als "> 6 m/s" angezeigt.
</p>
<p>
<b>Tipp für die Abfrage der maximalen Fließgeschwindigkeiten:</b> Deaktivieren Sie die{' '}
<a onClick={() => showModalMenu('karteninhalt')}>Animation</a> und stellen Sie einen
sehr großen Betrachtungsmaßstab ein (Zoomstufe 17 oder 18). Dann wird Ihnen in der
Kartendarstellung auch die zu der maximalen Fließgeschwindigkeit gehörende Fließrichtung
zellenscharf angezeigt.
</p>
<p>
Wenn Sie nach der Abfrage eines maximalen Wasserstandes bzw. einer maximalen
Fließgeschwindigkeit eine andere Simulation auswählen, wird der angezeigte Zellwert
automatisch aktualisiert. So können Sie für eine bestimmte Position bequem alle
angebotenen Simulations-Szenarien durchgehen. Auch im Abfragemodus können Sie die Karte
mit gedrückter linker Maustaste verschieben. Wenn Sie auf diese Weise oder durch{' '}
<a onClick={() => showModalMenu('positionieren')}>
Positionierung über einen Suchbegriff
</a>{' '}
einen Kartenausschnitt auswählen, in dem die zuletzt abgefragte Zelle nicht mehr
enthalten ist, wird das Anzeigefeld auf seinen Startzustand zurückgesetzt. Mit einem
Klick auf das <Icon name="close" /> Symbol rechts oben im Anzeigefeld beenden Sie den
Abfragemodus.
</p>
</div>
}
/>
);
};
export default Component;
2 changes: 1 addition & 1 deletion src/components/starkregen/Help70AussagekraftDerSimulationen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Component = ({ uiState, uiStateActions, showModalMenu }) => {
Unsere Starkregengefahrenkarte zeigt die Ergebnisse von Simulationen, die
dem heutigen Stand der Technik entsprechen. Die Berechnungen basieren auf
einem vereinfachten Modell der tatsächlichen Verhältnisse. Für eine noch
differenzierte Modellierung fehlen zum einen die Daten, zum anderen ließe
differenziertere Modellierung fehlen zum einen die Daten, zum anderen ließe
sich die automatisierte Berechnung nicht mehr in erlebbarer Zeit
durchführen!{' '}
</p>
Expand Down
Loading

0 comments on commit 06d8a25

Please sign in to comment.