Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,270 views

Published on

  • Be the first to comment

  • Be the first to like this

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

×