Earth (WebWidget)
Das Earth-WebWidget bietet die Möglichkeit an, verschiedene Arten von Karten und geographischen (statistischen) Daten auf einem navigierbaren 3D-Globus zu visualisieren. Das WebWidget hat zudem einen flüssigen Übergang von der dreidimensionalen globalen Ebene zur bis auf die einzelnen Straßen genau hineingezoomten zweidimensionalen Ebene und umgekehrt. Es gibt zahlreiche Anwendungsfälle für dieses WebWidget in betriebswirtschaftlichen Anwendungen. Beispielhaft kann man die Menge aller Kunden oder Lieferanten gemäß ihren geographischen Standorten anzeigen und die Interaktionen mit den verschiedenen Standorten, als Pins auf der Karte dargestellt, ermöglichen. Das WebWidget unterstützt alle gängigen kartographischen Anbieter, von OpenStreetMap bis zu kundenspezifische Karten. Außerdem kommt das WebWidget mit einer Standardkarte der natürlichen Erde, falls man das WebWidget ohne Kartenserver verwenden möchte. |
Verwendung
Abhängigkeiten
- earth.html
- earth-directive.js
- dependencies/earth.css
- libs/cesium/*
-
thirdparty/dompurify/1.0.8/purify.min.js (Wird standardmäßig mit MorphIT ausgeliefert)
Nachrichtenschnittstelle
Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.
Name | Parameter | Beschreibung |
---|---|---|
Push-Nachrichten (IV→HTML) | ||
set_map | Map | Diese Nachricht übergibt ein Map-Objekt als CX_JSON_OBJECT ans WebWidget und legt die Karte fest, die auf dem Globus gezeichnet werden soll. |
set_position | Position & {fly?: Boolean} | Diese Nachricht übergibt eine geographische Position als CX_JSON_OBJECT ans WebWidget und legt somit die Kameraposition fest. Neben der geographsichen Fuktion kann man den Parameter fly auf true setzen, um eine Animation der Bewegung zu veranlassen. |
set_pins | ARRAY(Pin) | Diese Nachricht übergibt ein CX_JSON_ARRAY von Pin-Objekten ans WebWidget, die auf der Karte as Marker (Pins) gezeichnet werden und als Interaktionselemente zwischen dem WebWidget und der ClassiX-Instanz dienen sollen. |
Ereignisse (HTML→IV) | ||
INITIALIZE_SOCKET | - | Die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Dies signalisiert die Bereitschaft des WebWidgets, Push-Nachrichten zu empfangen und zu verarbeiten. |
SELECT_SOCKET | String | Diese Nachricht wird ausgelöst, wenn der Benutzer auf einen Marker (Pin) doppelklickt. Sie übermittelt die ID des Markers als String. |
Das Map-Objekt
Feld | Typ | Standardwert | Beschreibung |
---|---|---|---|
mapUrl | String | "none" |
Diese ist die URL zum MapTile-Server, der die gewünschte Karte anbietet. Eine Liste der Server, die OpenStreetMap als Grundlage verwenden, findet man unter dem folgenden Link. Außerdem sind fast alle gängigen Anbieter für eigens erstelle Karten mit diesem WebWidget kompatibel. Das Format der URL ist beliebig bis auf die Parameter x,y,z, die in der URL in der Form {x}, {y}, {z} bzw. ${x}, ${y}, ${z} vorliegen sollen. Beispiel: https://a.tile.openstreetmap.de/${z}/${x}/${y}.png Sollte die Verwendung von einem MapTile-Server nicht erwünscht sein, dann kann man "none" als String anbieten. Dies führt dazu, dass die Standard-Offline-Karte der natürlichen Erde verwendet wird. |
credit | String | "" |
Falls der Kartenanbieter das Anzeigen von einem bestimmten Urheberrechtshinweis am Rand des WebWidgets erfordert, wie es zum Beispiel OpenStreetMap tut, dann kann der IV-Entwickler hier einen HTML-Text übermitteln, der am rechten unteren Rand des WebWidgets angezeigt wird. |
Das Position-Objekt
Feld | Typ | Beschreibung |
---|---|---|
longitude | CX_NUMERIC | Der Langengrad der Position |
latitude | CX_NUMERIC | Der Breitengrad der Position |
height | CX_NUMERIC | Die Höhe zur Erdoberfläche in Metern |
Das Pin-Objekt
Feld | Typ | Beschreibung |
---|---|---|
id | String | Number | Die eindeutige ID des Markers (Pins) |
title | String | Der Titel des Markers, der angezeigt wird, wenn der Benutzer auf den Marker klickt. |
description | String | Eine textuelle Beschreibungs des Markers, die angezeigt wird, wenn der Benutzer auf ihn klickt. |
longitude | CX_NUMERIC | Der Langengrad der Position des Markers |
latitude | CX_NUMERIC | Der Breitengrad der Position des Markers |
color | String | Die Farbe des Markers als CSS-Color-String. Zum Beispiel: "red", "#ff0000", "rgb(255,0,0)" |