gede mátyás: webes térinformatikai alkalmazások a mapserver és az openlayers...

Gede Mátyás

Webes térinformatikai alkalmazásokA MapServer és az OpenLayers

felhasználásával

ELTE TÁMOP-4.1.2.A/1-11/1-2011-0056

2013. 10. 29.

Szerver

Böngésző a kliens oldalon Az Internet többi része

MapServer

Térkép generálása az

adatokból

Webszerver

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

Fájlok([tér]képek, adatok)

geoDB

- Raszteres képek

- XML

(KML, SVG, GeoRSS, GML

, …)

- WMS szolgáltatások

- WFS szolgáltatások

- Geokódoló szolgáltatások

MapServer és OpenLayers alapú webes szolgáltatások felépítése

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

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

Mapfile példa #1: egyszerű térkép shapefile-ból

Mapfile tartalma: Eredmény:

URL:http://mercator.elte.hu/cgi-bin/mapserv?

map=/home/oktatok/saman/public_html/hu/okt/mapserver/p1.map&

mode=map

...

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-

...

Mapfile példa #2: osztályozás


Megjegyzés:

Minden egyes objektum az első olyan

osztályba kerül, amelyikbe beleillik!

...

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

...

Mapfile példa #3: chart layer


...

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

...

Mapfile példa #4: vonalstílusok


Megjegyzés: az összetett vonaltípusokat többféle vonal egymásra

helyezésével definiáljuk.

Szerver

Böngésző a kliens oldalon Az Internet többi része

MapServer

Térkép generálása az

adatokból

Webszerver

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

Fájlok([tér]képek, adatok)

geoDB

- Raszteres képek

- XML

(KML, SVG, GeoRSS, GML

, …)



- Geokódoló szolgáltatások

MapServer és OpenLayers alapú webes szolgáltatások felépítése

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


- mozaikolt térképszolgáltatások (pl. OpenStreetMap, Google Maps, stb.)


- 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="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="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 di-

namikusan 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 akadoz-

hat, különösen kis sáv-

szélesség és gyen-

gé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

http://openlayers.org/

http://wms.elte.hu/ol/

gede mátyás: webes térinformatikai alkalmazások a mapserver és az openlayers...

Documents