Geofachdaten im Internet mit OpenLayers: Unterschied zwischen den Versionen

Aus kvwmap
Wechseln zu: Navigation, Suche
 
(2 dazwischenliegende Versionen des gleichen Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
--[[Benutzer:Hschmidt|Hschmidt]] 09:21, 8. Nov 2010 (CET) geändert und ergänzt 23.05.2012<br>
+
--[[Benutzer:Hschmidt|Hschmidt]] 09:21, 8. Nov 2010 (CET) geändert und ergänzt 03.07.2012<br>
 
Am Beispiel des Themas "[http://www.kreis-swm.de/Landkreis/Service/Buergerbueros/_Karten/Standorte_der_Buergerbueros29135/index.jsp Bürgerbüros im Landkreis Ludwigslust-Parchim]" wird ein einfaches Beispiel zur Präsentation von Geofachdaten im Internet aufgezeigt.
 
Am Beispiel des Themas "[http://www.kreis-swm.de/Landkreis/Service/Buergerbueros/_Karten/Standorte_der_Buergerbueros29135/index.jsp Bürgerbüros im Landkreis Ludwigslust-Parchim]" wird ein einfaches Beispiel zur Präsentation von Geofachdaten im Internet aufgezeigt.
  
Zeile 75: Zeile 75:
 
Die Präsentation der "[http://194.25.109.22/olt/buergerbuero-lwlpch.htm Bürgerbüros"] kann leicht auf das eigene Thema angepasst werden. Hier als einfachstes Beispiel ein Punkt-Thema. <br>Ein weiteres Beipiel findet man unter "[http://www.schwerin.de/?&internet_inhalt_id=4154&internet_navigation_id=1205 www.schwerin.de - Übersichtskarte Immobilienangebote]"
 
Die Präsentation der "[http://194.25.109.22/olt/buergerbuero-lwlpch.htm Bürgerbüros"] kann leicht auf das eigene Thema angepasst werden. Hier als einfachstes Beispiel ein Punkt-Thema. <br>Ein weiteres Beipiel findet man unter "[http://www.schwerin.de/?&internet_inhalt_id=4154&internet_navigation_id=1205 www.schwerin.de - Übersichtskarte Immobilienangebote]"
  
'''Tip:''' Die Ladezeiten der Kartenanwendung wurden hier erheblich verbessert, indem die API OpenLayers.js über die externe Quelle http://openlayers.org/api/OpenLayers.js eingebunden wurde und nicht vom eigenen Server!<br>
+
'''Tip:''' Die Ladezeiten der Kartenanwendung wurden hier erheblich verbessert, indem man eine reduzierte und komprimierte Version von OL auf dem eigenen Server hostet. Die Hinweise auf http://docs.openlayers.org/library/deploying.html sind nützlich.<br>
Das hat allerdings den Nachteil, dass man dann vom Openlayers-Server abhängig ist. Ist dieser nicht erreichbar, so funktioniert auch die eigene Openlayers-Anwendung nicht.
+
Für das build meiner eigenen Version hat sich ein Profile mit folgenden Inhalt bewährt.
 +
[first]
 +
 +
[last]
 +
 +
[include]
 +
OpenLayers/Map.js
 +
OpenLayers/Kinetic.js
 +
OpenLayers/Projection.js
 +
OpenLayers/Lang.js
 +
OpenLayers/Layer.js
 +
OpenLayers/Layer/Vector.js
 +
OpenLayers/Layer/OSM.js
 +
OpenLayers/Layer/WMS.js
 +
OpenLayers/Popup/FramedCloud.js
 +
OpenLayers/Control/Navigation.js
 +
OpenLayers/Control/Zoom.js
 +
OpenLayers/Control/Attribution.js
 +
OpenLayers/Control/SelectFeature.js
 +
OpenLayers/Control/LayerSwitcher.js
 +
OpenLayers/Control/ScaleLine.js
 +
OpenLayers/Control/Permalink.js
 +
OpenLayers/Control/OverviewMap.js
 +
OpenLayers/Control/ZoomToMaxExtent.js
 +
OpenLayers/Control/WMSGetFeatureInfo.js
 +
OpenLayers/Control/Geolocate.js
 +
OpenLayers/Renderer/SVG.js
 +
OpenLayers/Renderer/VML.js
 +
OpenLayers/Format/GML/Base.js
 +
OpenLayers/Protocol/HTTP.js
 +
 +
[exclude]
 +
Den Inhalt in eine Datei mit dem namen my.cfg gepackt und mit "./build.py my" wird die eigene OL-Version erzeugt. Diese Testen, wenn irgendwas fehlt einfach mit dem entsprechenden erweiterten Profil neu erzeugen.
  
'''Tip 2:''' Das Thema (Layer), das als WMS eingebunden wird sollte als "OpenLayers.Layer.WMS.Untiled" definiert werden. Sonst gibt es Probleme mit abgeschnittenen Labels und Symbolen.
+
'''Tip 2:''' Das Thema (Layer), das als WMS eingebunden wird sollte als "OpenLayers.Layer.WMS" wie unten definiert erzeugt werden. Sonst gibt es Probleme mit abgeschnittenen Labels und Symbolen.<br>'''Achtung''' ab der OL-'''Version 2.12''' gibt es den Konstruktor "OpenLayers.Layer.WMS.Untiled" nicht mehr.
 +
Der Layer ist dann z.b.: so zu definieren
 +
OpenLayers.Layer.WMS("Buergerbueros", "http://URL-meines-WMS", {layers: 'Buergerbueros', format: 'image/png', transparent: 'true' }, {singleTile: true, ratio: 1});
 +
Auf das "{singleTile: true, ratio: 1}" kommt es an!
  
 
'''Zu 4. OpenStreetMap:<br>'''
 
'''Zu 4. OpenStreetMap:<br>'''
OpenStreetMap ist für Webanwendungen sehr gut geeignet. Zum Einbinden ist es erforderlich die OpenStreetMap.js einzubinden.<br>
+
OpenStreetMap ist für Webanwendungen sehr gut geeignet. Der Layer ist einfach so:
Quelle: http://www.openstreetmap.org/openlayers/OpenStreetMap.js <br>
+
<br>
 +
var osm = new OpenLayers.Layer.OSM("OpenStreetMap");
 +
zu erzeugen.
 +
 
 
Alles weitere ergibt sich aus dem o.g. Beispiel mit den Bürgerbüros.
 
Alles weitere ergibt sich aus dem o.g. Beispiel mit den Bürgerbüros.
  

Aktuelle Version vom 3. Juli 2012, 11:11 Uhr

--Hschmidt 09:21, 8. Nov 2010 (CET) geändert und ergänzt 03.07.2012
Am Beispiel des Themas "Bürgerbüros im Landkreis Ludwigslust-Parchim" wird ein einfaches Beispiel zur Präsentation von Geofachdaten im Internet aufgezeigt.

Es werden folgenden Techniken eingesetzt:

1. Datenerfassung mit kvwmap über den generischen Layereditor (GLE)

2. Datenbereitstellung als ogc-WMS (hier über den kvwmap-Server)

3. Web Map Client "Openlayers"

4. Basiskarte "OpenStreetMap (OSM)"


Zu 1. Datenerfassung:
Die Datenerfassung mit dem GLE wird als bekannt vorausgesetzt.

Zu 2. Datenbereitstellung:
Zur Bereitstellung wurde ein WMS auf das Thema aufgebaut. Einfach geht das über den WMS-Export von kvwmap. Die somit erstellte WMS-Datei und der Dienst sollte dann noch angepasst werden. Hierbei ist folgendes zu beachten:

Der WMS-Dienst sollte die sog. Google-Projektion, Spherical Mercator, EPSG 900913 unterstützen um ihn in Verbindung mit OpenStreetMap Daten zu verwenden. Dazu die epsg Datei von proj4 auf dem wms-Server durch diese Zeile ergänzen, falls nicht schon vorhanden:

# Spherical Mercator
<900913> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs <>

Tip am Rande: Bei der Gelegenheit die nicht benötigten Einträge von exotischen Projektionen entfernen!

Die Tabelle spatial_ref_sys von PostGIS mit dem Eintrag für Spherical Mercator ergänzen falls noch nicht vorhanden:

INSERT INTO spatial_ref_sys (srid, auth_name, auth_srid, srtext, proj4text) VALUES (900913, 'EPSG', 900913, 'GEOGCS["WGS 84", DATUM["World Geodetic System 1984", SPHEROID["WGS 84", 6378137.0,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0.0,AUTHORITY["EPSG","8901"]], UNIT["degree",0.017453292519943295],AXIS["Longitude", EAST], AXIS["Latitude",NORTH],AUTHORITY["EPSG","4326"]],PROJECTION["Mercator_1SP"],PARAMETER["semi_minor", 6378137.0],PARAMETER["latitude_of_origin",0.0], PARAMETER["central_meridian", 0.0], PARAMETER["scale_factor",1.0], PARAMETER["false_easting", 0.0], PARAMETER["false_northing", 0.0],UNIT["m", 1.0], AXIS["x", EAST], AXIS["y", NORTH],AUTHORITY["EPSG","900913"]] |', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs');

Dem Mapfile sollte besondere Beachtung geschenkt werden, weil es eine häufige Fehlerursache insbesondere bei der Sachdatenabfrage ist:
Im WEB-Objekt darf der Eintrag "wms_feature_info_mime_type" "text/html" und der Eintrag EPSG:900913 nicht fehlen.
Beispiel:

  WEB
   IMAGEPATH "/usr/local/apache2/htdocs/tmp/"
   IMAGEURL "/tmp/"
     METADATA
       "wms_feature_info_mime_type" "text/html"
       "wms_onlineresource"    "http://mein-server/cgi-bin/mapserv?map=/usr/local/apache2/wms/bbinfo.map&"
       "wms_extent"    "4404000 5886000 4491500 5953000"
       "ows_srs"    "EPSG:4326 EPSG:25832 EPSG:25833 EPSG:2398 EPSG:2399 EPSG:31468 EPSG:31469 EPSG:900913"
       "ows_title"    "Bürgerbüros im Landkreis Ludwigslust-Parchim"
       "ows_abstract"    "Bürgerbüros im Landkreis LWL"        
       "ows_contactperson"    "Mein Name"
       "ows_contactposition"    "Team GIS / Geodatenmanagement"
       "ows_contactorganization"    "Landkreis Ludwigslust-Parchim"        
       "ows_contactelectronicmailaddress"    "meine.mail@domain.de"        
       "ows_fees"    "frei nutzbar"
       "wms_accessconstraints"    "none"
     END
   QUERYFORMAT text/html
   LEGENDFORMAT text/html
   BROWSEFORMAT text/html
 END

Für die Sachdatenabfrage über getFeatureInfo ist es unbedingt erforderlich, dass jeder Layer - auch wenn er nicht abgefragt werden soll einen Template-Eintrag hat. In den CLASS-Abschnitten sind keine TEMPLATE-Einträge erforderlich.

TEMPLATE "/usr/local/apache2/htdocs/templates/bbinfo.htm"

Wenn das Mapfile aus dem kvwmap WMS-Export stammt, prüfen ob nicht irgendwelche unnötigen Einträge vorhanden sind. Diese verursachen schon mal Probleme bei der Sachdatenabfrage. Z.B. führen leere HEADER- und FOOTER-Einträge dazu, dass die Sachdatenabfrage nicht funktioniert. Diese müssen aus den Layern entfernt werden.

Das Template für die Sachdatenabfrage benötigt als erste Zeile unbedingt den "Magic String MapServer Template"!
Probleme mit dem Internetexplorer bei der Sachdatenabfrage konnten auf den Eintrag

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

im Template zurückgeführt werden. Dieses darf also im Template nicht drin stehen!!!

Probleme bei der Ausgabe von Umlauten in der Sachdatenabfrage kann man lösen in dem man im connection string des Layers im Mapfile das encoding angibt.
z.B.:

CONNECTION "user=myuser password=mypassword dbname=mydb options='-c client_encoding=utf8'"

Zu 3. OpenLayers:
Eine kartenbasierte Darstellung lässt sich einfach mit OpenLayers realisieren.
Die Präsentation der "Bürgerbüros" kann leicht auf das eigene Thema angepasst werden. Hier als einfachstes Beispiel ein Punkt-Thema.
Ein weiteres Beipiel findet man unter "www.schwerin.de - Übersichtskarte Immobilienangebote"

Tip: Die Ladezeiten der Kartenanwendung wurden hier erheblich verbessert, indem man eine reduzierte und komprimierte Version von OL auf dem eigenen Server hostet. Die Hinweise auf http://docs.openlayers.org/library/deploying.html sind nützlich.
Für das build meiner eigenen Version hat sich ein Profile mit folgenden Inhalt bewährt.

[first]

[last]

[include]
OpenLayers/Map.js
OpenLayers/Kinetic.js
OpenLayers/Projection.js
OpenLayers/Lang.js
OpenLayers/Layer.js
OpenLayers/Layer/Vector.js
OpenLayers/Layer/OSM.js
OpenLayers/Layer/WMS.js
OpenLayers/Popup/FramedCloud.js
OpenLayers/Control/Navigation.js
OpenLayers/Control/Zoom.js
OpenLayers/Control/Attribution.js
OpenLayers/Control/SelectFeature.js
OpenLayers/Control/LayerSwitcher.js
OpenLayers/Control/ScaleLine.js
OpenLayers/Control/Permalink.js
OpenLayers/Control/OverviewMap.js
OpenLayers/Control/ZoomToMaxExtent.js
OpenLayers/Control/WMSGetFeatureInfo.js
OpenLayers/Control/Geolocate.js
OpenLayers/Renderer/SVG.js
OpenLayers/Renderer/VML.js
OpenLayers/Format/GML/Base.js
OpenLayers/Protocol/HTTP.js

[exclude]

Den Inhalt in eine Datei mit dem namen my.cfg gepackt und mit "./build.py my" wird die eigene OL-Version erzeugt. Diese Testen, wenn irgendwas fehlt einfach mit dem entsprechenden erweiterten Profil neu erzeugen.

Tip 2: Das Thema (Layer), das als WMS eingebunden wird sollte als "OpenLayers.Layer.WMS" wie unten definiert erzeugt werden. Sonst gibt es Probleme mit abgeschnittenen Labels und Symbolen.
Achtung ab der OL-Version 2.12 gibt es den Konstruktor "OpenLayers.Layer.WMS.Untiled" nicht mehr. Der Layer ist dann z.b.: so zu definieren

OpenLayers.Layer.WMS("Buergerbueros", "http://URL-meines-WMS", {layers: 'Buergerbueros', format: 'image/png', transparent: 'true' }, {singleTile: true, ratio: 1});

Auf das "{singleTile: true, ratio: 1}" kommt es an!

Zu 4. OpenStreetMap:
OpenStreetMap ist für Webanwendungen sehr gut geeignet. Der Layer ist einfach so:


var osm = new OpenLayers.Layer.OSM("OpenStreetMap");

zu erzeugen.

Alles weitere ergibt sich aus dem o.g. Beispiel mit den Bürgerbüros.

Zum Schluß wird die HTML-Datei über ein "iframe" im CMS für die entsprechende Website eingebunden.
Beipiel: http://www.kreis-swm.de/Landkreis/Service/Buergerbueros/_Karten/Standorte_der_Buergerbueros29135/index.jsp
Tip: Hier sind entsprechend Anpassungen in dem div (height und width) vorzunehmen, damit das Kartenfenster ohne scroll-Leisten dargestellt wird. Am besten erst testen wie breit die Karte im Layout der Website sein kann und dann entsprechend in der Kartenanwendung im body die Tabelle für die map definieren. Die map muss dabei immer etwas kleiner sein als die maximal mögliche breite der Karte in der Website. Testen ist angesagt ... :-)

Viel Erfolg und Spaß dabei !!!