ADMIN Magazin Gestapelt - Schneller und sicherer mit RAID (Vorschau)

Openlayers
Webbrowser
Generierte
HTML-Seite
Content-Type:
text/plain
dynamischer Landkarten auf der eigenen
Webseite.
Zugang über Layer
OpenLayers.Request.POST
OpenLayers.Request.GET
Callback zu
OpenLayers.Request.POST
OpenLayers.Request.GET
Webseite mit
JavaScript
Parameter auswerten
Datenbank abfragen
HTML-Code genieren
CGI-Skript für Datenbankzugriff
Die in einer Landkarte eingetragenen geografischen
Punkte werden in einer Ebene
durch das Objekt »OpenLayers.Layer.Vector«
zusammengefasst. Darin sind zwei
interessante Schnittstellen integriert, die
einen Zugriff auf externe Datenbestände
Datenbank
Abbildung 2: Zugriff auf Datenbankinhalte mittels der Methoden »OpenLayers.Request.GET« und
»OpenLayers.Request.POST«.
Listing 1: Initialisierung
01 /* Projektion definieren */
02 var spherMerc = new OpenLayers.
Projection('EPSG:900913');
03 var epsg4326 = new OpenLayers.
Projection('EPSG:4326');
04 var zoom = 14;
05
06 /* Kartenausschnitt definieren */
07 var l = new OpenLayers.LonLat(8, 53).
transform(epsg4326, spherMerc);
erlauben und die Ausgabe steuern. Die
Funktionsweise ist komplexer als bei
den Objekten der Gruppe »OpenLayers.
Request«. Kartenausschnitte lassen sich
per Maus vergrößern, verkleinern und
verschieben. Jeder dieser Aktionen generiert
ein Ereignis (Event), das Openlayers
mitteilt, einen neuen Kartenausschnitt zu
laden. Diese Events werden an alle Ebenen
(Layer) übermittelt, um eine Neuberechnung
der Position auf der Karte zu
08 var r = new OpenLayers.LonLat(14, 43).
transform(epsg4326, spherMerc);
09 var extent = new OpenLayers.Bounds(l.lon,
l.lat, r.lon, r.lat);
10
11 /* allgemeine Variablen */
12 var freex, freex_o_r_p, freex_l_h_s;
13 var mitTransformation = true;
14 var ohneTransformation = false;
15 ...
erzwingen. Wenn viele POIs eingetragen
sind, erfordert das viel Rechenleistung
und viel Zeit aufseiten des Clients. Das
lässt sich reduzieren, indem man nur
die Objekte neu darstellt, die im Kartenausschnitt
auch wirklich zu sehen sind
oder neu hinzukommen. Diese Strategie
realisiert das Objekt »OpenLayers.Strategy.BBOX«.
Um analog die Positionsangaben der
einzelnen POIs zu erhalten, bedient
man sich eines Kommunikationskanals
mit dem Objekt »OpenLayers.Protocol.
HTTP«. Es übermittelt den aktuellen Kartenausschnitt
an ein CGI-Skript und gibt
als Ergebnis eine Liste mit POIs zurück,
die im neuen Kartenausschnitt zu sehen
sind. Die neuen Angaben werden an
»OpenLayers.Layer.Vector« zurückgegeben
und dargestellt, die nicht mehr sichtbaren
POIs automatisch gelöscht. Das
reduziert nicht nur den Speicherbedarf,
sondern gleichermaßen die Rechenzeit.
Abbildung 3 stellt den Ablauf nochmals
grafisch dar.
Einen weiteren Vorteil bietet diese Methode
bei großen Mengen von POIs: Es
lässt sich angeben, wie viele Punkte maximal
dargestellt werden sollen. So kann
man beispielsweise erst eine Grobübersicht
über die wichtigsten POIs anzeigen.
Je kleiner der Kartenausschnitt gewählt
wird, umso mehr verfeinert man dann
die Übersicht. Auch hier sei Abbildung 1
nochmals als Beispiel herangezogen. Es
gibt in den USA circa 3100 Wetterstationen
als POIs. Um diese große Anzahl anzuzeigen,
braucht ein durchschnittlicher
Webbrowser etwa zwanzig Sekunden.
Die Darstellung nach der eben beschriebenen
Methode dauert im Vergleich nur
noch eine Sekunde, weil nur er noch
etwa 160 Stationen verarbeiten muss.
Nach diesen theoretischen Betrachtungen
Listing 2: Layer mit statischen POI
01 function map_poi(layer, lon, lat, label,
farbe) {
02 var l = new OpenLayers.LonLat(lon, lat).
03 transform(epsg4326, spherMerc);
04 var point = new OpenLayers.Geometry.
Point(l.lon, l.lat);
05 var pf = new OpenLayers.Feature.
Vector(point);
06 if (pf) {
07 pf.attributes = {text: label, color:
farbe};
08 layer.addFeatures([pf]);
09 }
10 }
11
12 function map_layer(map, layer_name) {
13 var layer = new OpenLayers.Layer.
Vector(layer_name, {
14 projection: map.displayProjection,
15 renderers: map.renderer,
16 displayInLayerSwitcher: true,
17 wrapDateLine: false,
18 displayOutsideMaxExtend: true,
19 isBaseLayer: false,
20 styleMap: new OpenLayers.StyleMap(style)
21 });
22
23 map_poi(layer, 9.00448, 48.68750,
24 "FreeX‐Verlag", "#FFEE00");
25 map_poi(layer, 11.80008, 47.85878,
26 "FreeX‐Leser", "#FFEE00");
27 map_poi(layer, 11.55735, 48.14042,
28 "FreeX‐Leser", "#FFEE00");
29
30 return layer;
31 }
108 Ausgabe 06-2012 Admin www.admin-magazin.de