�ݺ�ߣ

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.

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

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

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

Mapfile példa #2: osztályozás
Mapfile tartalma:
...
CLASS NAME "0-300000"
EXPRESSION ([Pop]<=300000)
STYLE
COLOR 180 255 180
END
END # class 0-300000
STYLE
COLOR 180 255 180
END
STYLE
COLOR 180 255 180
END
CLASS NAME "900000-"
STYLE
COLOR 180 255 180
END
END # class 900000...

Eredmény:

Megjegyzés:
Minden egyes objektum az első olyan
osztályba kerül, amelyikbe beleillik!

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]
COLOR 255 0 0
END
END # class Gyerek
CLASS
NAME "Felnőtt"
STYLE
SIZE [Felnott]
COLOR 0 255 0
END
END # class Felnőtt
CLASS
NAME "Idős"
STYLE
SIZE [Idős]
COLOR 0 0 255
END
END # class Idős
END # layer Pop_chart
...

Eredmény:

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.

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.

OpenLayers térkép elhelyezése a weboldalon
1. Az OpenLayers könyvtár csatolása
<script src=/slideshow/gede-mtys-webes-trinformatikai-alkalmazsok-a-mapserver-s-az-openlayers/27745005/"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()">

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=/slideshow/gede-mtys-webes-trinformatikai-alkalmazsok-a-mapserver-s-az-openlayers/27745005/"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>

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)

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

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

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);
...

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

„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
…

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

�ݺ�ߣ

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

More Related Content

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