Lade...
 

Earth (WebWidget)

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.

Earth WebWidget
Earth WebWidget

Verwendung

Web(earth, "earth.html", 0, 0, 800, 600)

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 Diese Nachricht übergibt eine geographische Position als CX_JSON_OBJECT ans WebWidget und legt somit die Kameraposition fest.
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)"

InstantView Scriptsprache