Gede Mátyás: Webes térinformatikai alkalmazások a MapServer és az OpenLayers felhasználásával

976 views
941 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
976
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Gede Mátyás: Webes térinformatikai alkalmazások a MapServer és az OpenLayers felhasználásával

  1. 1. Gede Mátyás Webes térinformatikai alkalmazások A MapServer és az OpenLayers felhasználásával ELTE TÁMOP-4.1.2.A/1-11/1-2011-0056 2013. 10. 29.
  2. 2. MapServer és OpenLayers alapú webes szolgáltatások felépítése Böngésző a kliens oldalon Az Internet többi része OpenLayers a weboldalon - A térkép kezelőfelülete (nagyítás, mozgatás, stb.) - Raszteres/vektoros adatok megjelenítése - Egyéb interaktív funkciók - Raszteres képek - XML (KML, SVG, GeoRSS, GML , …) - WMS szolgáltatások Szerver Webszerver - WFS szolgáltatások MapServer Térkép generálása az adatokból Fájlok ([tér]képek, adatok) geoDB - Geokódoló szolgáltatások
  3. 3. MapServer • Az UMN (University of Minnesota) által kifejlesztett szoftver • Nyílt forráskódú • Működhet CGI-ként vagy szerver oldali script nyelvek kiegészítőjeként • Térképet szerkeszt a bemenő geoadatokból. • Bemeneti formátumok: Shapefile, MapInfo TAB, KML, raszteres képek, stb. • Lehetséges térképformátumok: JPEG, PNG, GeoTIFF, SVG … A Mapfile • Minden MapServer alkalmazás lelke • A térkép „receptje”: leírja, hogyan jelenjenek meg a különféle adatok a térképen • Szöveges formátum • Tartalma: különféle objektumok hierarchikus rendben
  4. 4. Mapfile példa #1: egyszerű térkép shapefile-ból Mapfile tartalma: MAP NAME "Magyarország" STATUS ON SIZE 800 600 IMAGETYPE png EXTENT 420000 45000 950000 380000 SHAPEPATH "data" PROJECTION "init=epsg:23700" END LAYER NAME "Megyék" TYPE polygon DATA "megyek.shp" STATUS DEFAULT PROJECTION "init=epsg:23700" END CLASS NAME "default" STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END END END Eredmény: URL: http://mercator.elte.hu/cgi-bin/mapserv? map=/home/oktatok/saman/public_html/hu/okt/mapserver/p1.map& mode=map
  5. 5. Mapfile példa #2: osztályozás Mapfile tartalma: ... CLASS NAME "0-300000" EXPRESSION ([Pop]<=300000) STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 0-300000 CLASS NAME "3-500000" EXPRESSION ([Pop]<=500000) STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 3-500000 CLASS NAME "5-900000" EXPRESSION ([Pop]<=900000) STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 5-900000 CLASS NAME "900000-" STYLE OUTLINECOLOR 0 127 0 COLOR 180 255 180 END END # class 900000... Eredmény: Megjegyzés: Minden egyes objektum az első olyan osztályba kerül, amelyikbe beleillik!
  6. 6. Mapfile példa #3: chart layer Mapfile tartalma: ... LAYER NAME "Pop_chart" TYPE chart DATA "megyek.shp" PROCESSING "CHART_SIZE_RANGE= Pop 15 30 200000 1700000" STATUS DEFAULT PROJECTION "init=epsg:23700" END CLASS NAME "Gyerek" STYLE SIZE [Gyerek] OUTLINECOLOR 0 127 0 COLOR 255 0 0 END END # class Gyerek CLASS NAME "Felnőtt" STYLE SIZE [Felnott] OUTLINECOLOR 0 127 0 COLOR 0 255 0 END END # class Felnőtt CLASS NAME "Idős" STYLE SIZE [Idős] OUTLINECOLOR 0 127 0 COLOR 0 0 255 END END # class Idős END # layer Pop_chart ... Eredmény:
  7. 7. Mapfile példa #4: vonalstílusok Mapfile tartalma: Eredmény: ... LAYER TYPE line CLASSITEM type ... CLASS # Autópálya EXPRESSION "AP" NAME "Autópálya" STYLE # Alapvonal WIDTH 8 COLOR 127 127 127 END STYLE # Kitöltés WIDTH 5 COLOR 250 220 127 END STYLE # Középvonal WIDTH 1 COLOR 127 127 127 END END # class Autópálya ... Megjegyzés: az összetett vonaltípusokat többféle vonal egymásra helyezésével definiáljuk.
  8. 8. MapServer és OpenLayers alapú webes szolgáltatások felépítése Böngésző a kliens oldalon Az Internet többi része OpenLayers a weboldalon - A térkép kezelőfelülete (nagyítás, mozgatás, stb.) - Raszteres/vektoros adatok megjelenítése - Egyéb interaktív funkciók - Raszteres képek - XML (KML, SVG, GeoRSS, GML , …) - WMS szolgáltatások Szerver Webszerver - WFS szolgáltatások MapServer Térkép generálása az adatokból Fájlok ([tér]képek, adatok) geoDB - Geokódoló szolgáltatások
  9. 9. OpenLayers • Nyílt forráskódú JavaScript függvénykönyvtás raszteres és vektoros geoadatok megjelenítéséhez • Az OpenLayers nem tartalmaz semmiféle „beépített” térképet, csak megjeleníti a különféle forrásból származó adatokat! • Számos formátum és szolgáltatás támogatása: - raszteres térképek - WMS szolgáltatások - mozaikolt térképszolgáltatások (pl. OpenStreetMap, Google Maps, stb.) - WFS szolgáltatások - KML fájlok - GeoRSS stb. • Az OpenLayers térkép (map) egy vagy több rétegből (layer) áll. A rétegek különböző típusúak is lehetnek.
  10. 10. OpenLayers térkép elhelyezése a weboldalon 1. Az OpenLayers könyvtár csatolása <script src="http://openlayers.org/api/OpenLayers.js"></script> 2. A térképet tartó <DIV> deklarálása <div id=”terkep_helye” style=”width:600px;height:400px”></div> 3. A térképet létrehozó script hozzáadása <script type="text/javascript"> function init() // betöltéskor végrehajtandó függvény { // térkép létrehozása a ’terkep_helye’ azonosítójú elemben var map = new OpenLayers.Map('terkep_helye', {}); // egy OpenStreetMap réteg létrehozása és a térképhez adása map.addLayer(new OpenLayers.Layer.OSM()); // a térképkivágat Magyarországra állítása map.zoomToExtent(new OpenLayers.Bounds(1790000,5730000,2560000,6210000)); } </script> 4. Az onload eseménykezelő beállítása a <BODY> elemnél <body onload="init()">
  11. 11. OpenLayers térkép elhelyezése a weboldalon <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>OpenLayers térkép</title> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> function init() // az oldal betöltésekor végrehajtandó függvény { // létrehozzuk a térképet a 'terkep_helye' azonosítójú div elemben var map = new OpenLayers.Map('terkep_helye', {}); // létrehozunk egy OSM réteget és hozzáadjuk a térképhez map.addLayer(new OpenLayers.Layer.OSM()); // kb. Magyarországra nagyítunk map.zoomToExtent(new OpenLayers.Bounds(1790000,5730000,2560000,6210000)); } </script> </head> <body onload="init()"> <h1>OpenLayers térkép</h1> <div style="width:650px; height:400px" id="terkep_helye"></div> </body> </html>
  12. 12. MapServer térkép, mint WMS réteg ... // létrehozunk egy WMS réteget var wms = new OpenLayers.Layer.WMS( "Madárvédelmi területek", 'http://mercator.elte.hu/cgi-bin/mapserv?map=/home/oktatok/saman/public_html/hu/okt/mapserver/mo.map', { layers: ['madaras'], isBaseLayer: false, transparent: true }, { singleTile: true }); // hozzáadjuk a réteget a térképhez map.addLayer(wms); // a LayerSwitcher kezelőszerv segítsével kapcsolgathajuk a rétegeket map.addControl(new OpenLayers.Control.LayerSwitcher); ... Lényeges részletek: - a Mapserver WMS szolgáltatás URL-je - A „singleTile” opciót akkor használjuk, ha nem akarunk mozaikolást (elsősorban dinamikusan generált feliratokat tartalmazó WMS esetén) - LayerSwitcher control - Két réteg kategória (Base Layer / Overlay)
  13. 13. Image layer ... // creating an Image layer var img = new OpenLayers.Layer.Image( "Raster world map", 'http://mercator.elte.hu/~saman/webglobes/globe_greenwich.jpg', new OpenLayers.Bounds(-180, -90, 180, 90), new OpenLayers.Size(3600,1800), { numZoomLevels: 6, maxResolution: 0.4 }); // adding the layer to map map.addLayer(img); ... Az Image layert kisebb raszteres térképek megjelenítésére használhatjuk. Nagyméretű térképek esetén a betöltés és a megjelenítés akadozhat, különösen kis sávszélesség és gyengébb számítógép esetén
  14. 14. Markers layer A Markers layer Marker objektumokat tartalmaz – egyszerű helyjelző ikonokat. A Markereknek nem lehet felirata. ... // creating Markers layer var markerLayer = new OpenLayers.Layer.Markers('Places'); // creating markers - lat/lons are transformed into Spherical Mercator var Budapest=new OpenLayers.Marker(new OpenLayers.LonLat(19.1,47.5).transform("EPSG:4326","EPSG:900913")); var Dresden=new OpenLayers.Marker(new OpenLayers.LonLat(13.74,51.05).transform("EPSG:4326","EPSG:900913")); // adding markers to layer markerLayer.addMarker(Budapest); markerLayer.addMarker(Dresden); // adding Markers layer to map map.addLayer(markerLayer); ... Figyeljük meg a koordináta-átszámítást a markerek definiálásakor. Az EPSG:4326 (WGS84 lat/lon) és az EPSG:900913 (Spherical Mercator) vetületek be vannak építve az OpenLayersbe, de más vetületek is definiálhatók. Bonyolultabb esetekben célszerűbb a Vector layer használata a Markers helyett
  15. 15. Vector layer A Vector layer pontszerű, vonalas vagy felületi elemeket tartalmaz. Az elemeknek attribútumaik is lehetnek, és akár a réteghez, akár külön az elemekhez is rendelhetünk stílust. A réteg tartalma megadható akár az elemek egyenként való definiálásával, akár valamilyen adatforrás hozzárendelésével. ... // creating style var pointStyle= new OpenLayers.StyleMap({ externalGraphic: 'http://openlayers.org/api/img/marker.png', graphicHeight: 21, graphicWidth: 16, label: '${name}', // using attribute value for labeling labelAlign: 'lb', fontWeight: 'bold', fontColor: 'purple', labelXOffset: 8 }); // creating Vector layer var vectorLayer = new OpenLayers.Layer.Vector('Places' {styleMap: pointStyle}); // creating points - lat/lons are transformed into Spherical Mercator var p1=new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(19.05,47.5).transform("EPSG:4326","EPSG:900913"),{ name: 'Budapest' }); var p2=new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(13.74,51.05).transform("EPSG:4326","EPSG:900913"),{ name: 'Dresden' }); // adding features to layer vectorLayer.addFeatures([p1,p2]); // adding Vector layer to map map.addLayer(vectorLayer); ...
  16. 16. MapServer adatok megjelenítése WFS-sel Vector layeren ... // creating WFS vector layer... var wfs=new OpenLayers.Layer.Vector( "WFS", { isBaseLayer: true, strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.WFS( { version: "1.0.0", url: "http://mercator.elte.hu/cgi-bin/mapserv?map=/home/oktatok/saman/public_html/hu/okt/mapserver/p2_wfs.map", featureType: "Megye_nepesseg", srsName: "EPSG:23700", propertyNames: ['msGeometry','Nev','Nepesseg','Gyermek','Felnott','Idos'] }) }); ... - a strategies tömbben az adatok lekéréséhez használt stratégiákat soroljuk fel. A Fixed stratégia az összes adatot egyszerre kéri le (akkor használjuk, ha nincs sok elem). - a protocol definiálja az adatforrás típusát és tulajdonságait
  17. 17. „Control”-ok A különféle Control objektumok az OpenLayers térképek hasznos kiegészítői. Néhány a leggyakrabban használtak közül: LayerSwitcher – rétegek ki-be kapcsolgatásához MousePosition – Kiírja az egérmutató helyének térképi koordinátáit DragFeature – egy Vector réteg elemeit áthelyezhetővé teszi DrawFeature – segítségével rajzolhatunk a térképen Measure – hossz, vagy területmérő eszköz Scale – kiírja az aktuális méretarányt ScaleLine – dinamikus mértékléc …
  18. 18. Források, letöltések, dokumentáció MapServer: http://mapserver.org/ OpenLayers: http://openlayers.org/ http://wms.elte.hu/ol/ (saját jegyzet, folyamatosan frissül) Könyv (nyomtatott / e-book): Erik Hazzard: OpenLayers 2.10 Beginners’ Guide Packt Publishing, 2011

×