Térképek internetes publikálása

Lehetőségek, megoldások (1)

dr. Siki Zoltán
2003

A cikkben hivatkozott példák többségét honlapunkon itt megnézheti.

Egyre több honlapon jelennek meg térképek, térkép részletek, a legegyszerűbb szkennelt térképrészlettől az interaktív térinformatikai megoldásig. Számos egyszerű és profi megoldási lehetőség kínálkozik manapság a nyíltforrású programok között is. Az elvi áttekintés mellett, a számtalan lehetséges megoldás közül, néhány lehetőséget szeretnék bemutatni, működő példákkal.

A térképek internetes publikálásához szükség van egy web szerverre (pl. Apache), ennek ellenére megkülönböztethetünk kliens oldali, szerver oldali illetve kombinált megoldásokat. Itt arról van szó, hogy az alap internet web szerver-böngésző kliens párost melyik oldalon bővítjük, hogy a térinformatikai adatok megjelenítésére alkalmas legyen. A tisztán kliens oldali megoldások web szerver nélkül is használhatók a saját gépen vagy lokális hálózaton belül elérhető adatállományokkal.

Egyszerű HTML alapú megoldások

A web lapok leírására szolgáló HTML nyelv csak korlátozottan alkalmas arra, hogy azt használjuk térképeink, térinformatikai adatbázisunk publikálására. A HTML segítségével a web lapjainkra png, jpg, gif képeket illeszthetünk be, melyek akár térképeket is ábrázolhatnak. Az ilyen statikus képek a szemlélésen kívül más lehetőséget nem kínálnak, viszont egy szkenner elegendő a létrehozásukhoz. A képként beillesztett térképeket kép térképekkel (image map) fűszerezhetjük. A kép térkép segítségével a web lapba beillesztett kép különböző területeihez más-más URL-t rendelhetünk. A megfelelő kép részletre kattintva a hozzárendelt URL tartalma jelenik meg. Ezt elsősorban a térkép elemeihez kapcsolódó leíró adatok megjelenítésére használhatjuk.

A kép térképek használatára két megoldás alakult ki. Előszőr a szerver oldali kép térképek kerültek be a HTML által támogatott eszközök közé. Ebben az esetben a kliens elküldi a szerver felé a kattintás képen belüli koordinátáit, a koordinátarendszer origója a kép bal felső sarka . A további feldolgozás a szerver oldalon történik. A kép beillesztését megvalósító <img ...> elemet az ISMAP paraméterrel kell kiegészíteni, és egy linkbe kell beágyazni. Minta szerver oldali kép térkép használatára:

<a href="http://www.agt.bme.hu/php/imgxy.php">
<img src="http://www.agt.bme.hu/maps/shapes/bme_ref.png" ISMAP></a>

Az imgxy.php egy szerver oldali php script, mely ebben az esetben csak visszaírja a megkapott képkoordinátákat. A böngésző automatikusan kiegészíti a megadott URL-t a kattintás poziciójával, például:

http://www.agt.bme.hu/php/imgxy.php?193,14

Kattinson a képre, hogy a fenti példát kipróbálja.

Az imgxy.php fájl tartalma:

<html>
   <head>
   <title>Szerver oldali image map</title>
   </head>
   <body>
   <?php
     $pos = $QUERY_STRING;                                   a query string tartalmazza az URL ? utáni részét
       if (strlen($pos) > 0) {
         $xy = explode(",", $pos);                                   query string feldarabolása a vesszőnnél
         echo "Kép koordináták: x=$xy[0] y=$xy[1]<br>";        kép koordinták visszaírása
         $eovy = intval(650450.0 + 550.0 / 100.0 * $xy[0]);        a kép sarokpontok és képméret alapján 
         $eovx = intval(237600.0 + 600.0 / 155.0 * $xy[1]);        átszámítás geodéziai koordináta rendszerbe
         echo "EOV koordináták: Y=$eovy m";             geodéziai koordináták visszaírása
      } else {
         echo "Nincs koordináta";
      }
  ?>
</body>
</html>

A szerver oldali feldolgozásra standard cgi megoldások alakultak ki, például egy C nyelven készült megoldást itt találhat. A szerver oldalon ezen kívül a kép térkép (az aktív kép tartományok) megadására is szükség van, azaz melyik képterülethez melyik web lap tartozik. Például a következő alakban:

default www.valahol/valami.html                     alapértelmezett lap, akkor jelenik meg, 
rect www.mashol/elso.html 15,8 135,39          ha olyan területre kattintunk amelyikhez rendeltünk URL-t
rect www.sehol/masodik.html 245,86 504,143 
rect www.mindenhol/harmadik.html 117,122 175,158 

Vannak olyan web szerverek, melyek beépített támogatást biztosítanak a kép térképek feldolgozására, például az Apache mod_imap module. A modul lehetőséget biztosít téglalap, kör, zárt sokszög és pont alakú aktív területek megadására. Ezeket egy .map kiterjesztésű állományban adhatjuk meg.


Kattinson a képre, hogy a példát kipróbálja.

Minta Apache map fájl
   rect http://www.agt.bme.hu 0,0 20,20"kezdőlap"
   circle http://www.agt.bme.hu/maps 0,40 30,70 "térképek"
   point http://www.agt.bme.hu/gita/ 100,100 "gita"
   rect mailto:siki@agt.bme.hu 50,0 100,30 "Info"
A map fájl használa
   <a href="demo.map">
     <img scr="../shapes/bme_ref.png" ISMAP>
   </a> 
 

A szerver oldali kép térkép kezelésnél hatékonyabb megoldást biztosít a később kialakult kliens oldali kép térkép. Ebben az esetben nincs szükség szerver oldali feldolgozásra, a böngésző program képes kikeresni a képterülethez rendelt URL-t, manapság az elterjedtebb böngésző (pl. Mozilla, Netscape, Internet Explorer, Opera) programok képesek erre. A kliens oldali kép térkép esetében minden információ a html nyelv segítségével adható meg. A <map> </map> HTML elemek között adhatjuk meg az aktív képterületek koordinátáit és a hozzájuk rendelt URL-t. Az egyes aktív képterületek adatait az <area ...> elemben írhatjuk le. Megadhatunk téglalap, kőr és zárt sokszög alakú területeket.

<map name="minta">
<area shape="circle" coords="30,30 50,50" href="http://valahol>
<area shape="rect" coords="70,40 90,60" href="http://mashol>
</area>

Kliens oldali kép térkép megadása

A HTML 4.0 specifikáció megengedi a kliens oldali kép térképek megadását az <object ...> elemen belül is.

kezdőlap térképek gita Info
<object data="http://www.agt.bme.hu/maps/shapes/bme_ref.png" shapes>
    <a href="http://www.agt.bme.hu" shape="rect "  coords="0,0,20,20">kezdőlap</a>
<a href="http://www.agt.bme.hu/maps" shape="circle" coords="15,55,15">térképek</a>
<a href="http://www.agt.bme.hu/gita/" shape="circle" coords="100,100,20">gita</a>
<a href="mailto:siki@agt.bme.hu" shape="rect " coords="50,0,100,30">Info</a>
</object>

Tanszékünk térképéhez kapcsolódó komplexebb példát is nézze meg itt. A kliens oldali kép térképek létrehozásával kapcsolatos további segítséget itt találhat.

Amennyiben mind a térkép, mind a hozzákapcsolt attribútumok statikusak, akkor a html keretek (frame) és a képtérképek felhasználásával egyszerűen megvalósítható megoldást kapunk. Honlapunkon itt találhat egy egyszerű példát a keretek és a kép térkép együttes használatára. Ahhoz, hogy a kép térképhez rendelt URL egy másik keretben jelenjen meg az <area ...> elemet a target paraméterrel kell kiegészíteni. Az alábbi példában az "adat" egy keret neve. A title paraméter után megadott szöveget a böngésző megjeleníti, ha rámutatunk az aktív területre.

 <area shape="circle" coords="350,208,30" href="mo_adat.html#BUDAPEST"  target="adat" title="Budapest">

A kép térképek segítségével is létrehozhatunk fix nagyítási fokozatokat, ha a térkép egyes nagyításainak megfelelő képet előre előállítjuk. Általában valamelyik asztali térinformatikai rendszert kiegészítő program állítja elő automatikusan a szükséges képeket és a html dokumentumokat. Ilyen megoldásra honlapunkon itt talál példát. Ez a példa jól szemlélteti, hogy pusztán a HTML és JavaScriptek felhasználásával is látványos megoldásokat lehet elérni..

Kliens oldali megoldások

A tisztán kliens oldali megoldások esetén a kibővített térinformatikai funkcionalitást a kliens számítógépen futó alkalmazás biztosítja. Ezt a megoldást vastag kliens megoldásnak is nevezik, mivel a munka nagyobbik része a kliens számítógépen folyik, a hálózati sávszélesség mellett a kliens számítógép teljesítménye a meghatározó. A web szerver az adatokat, esetleg a letöltendő programokat szolgáltatja. A szerver oldalon nincs szükség speciális térinformatikai igények támogatására. Ezt a legtöbbször Java Applet vagy a böngészőbe beépülő modul (plug-in) segítségével valósítják meg. Ez a megoldás már nem csak raszteres képek, hanem vektoros térképek publikálását is lehetővé teszi.

Applet alapú megoldások

Az appletek speciális Java nyelven írt programok, melyeket a böngészőből futtathatunk, amennyiben a számítógépünkre telepítettük a Java Runtime Environment (JRE) megfelelő verziójú változatát. Appletet nem kell a kliens gépre telepíteni, a szerverről automatikusan letölti a böngésző program, ha valamelyik HTML oldal egy Java Appletet használ. Az Appletek hívását a HTML kódban az <applet ...> </applet> elemek segítségével valósíthatjuk meg.

<applet archive="jars/support.jar,jars/geotools.jar,jars/collections.jar"  code="MapViewer.class" width="500" height="480">
   <param name="NumOfLayers" value="5">
   <param name="shapefile0" value="shapes/telek">
   <param name="shapefile1" value="shapes/park">
   <param name="colorBy1" value="65280">
   <param name="shapefile2" value="shapes/epulet">
   <param name="colorBy2" value="15728640">
   <param name="labelBy2" value="NEV">
   <param name="shadeBy2" value="KOD">
   <param name="shapefile3" value="shapes/falkeri">
   <param name="shapefile4" value="shapes/lepcso">
</applet>

Példa applet beágyzására a html oldalba

Az <applet> elemben számos paraméter adható meg. A code paraméter határozza meg, hogy melyik Java osztály végrehajtásával indul az applet, ennek az osztálynak a Java standard Applet osztályából kell származnia (extends Applet). A width és height paraméter az applet által elfoglalt képernyő terület méretét adja meg pixelekben. Ezt a méretet nem tudja megváltoztatni az applet. Az archive paraméter tartalmazza a használt java archive (jar/zip) fájlokat vesszővel elválasztva.

A HTML 4.0 specifikációban az <applet> elem helyett az <object> elem használatát javasolják. A manapság használt böngészők mindegyike támogatja még az <applet> elem használatát is.

Applet elem használata

<APPLET code="demo.class" width="500" height="500">
<param name="xxx" value="yyy">
</APPLET>

Object elem használata

<OBJECT codetype="application/octet-stream"
   classid="java:demo.class" width="500" height="500">
  <param name="xxx" value="yyy">
</OBJECT>

A Java nyelv tartalmazza az alapvető grafikus elemek/objektumok halmazát (awt/Beens stb.), segítségével készíthetünk olyan appletet, mely a szerveren lévő térinformatikai adatbázisok tartalmát megjeleníti a kliens számítógép monitorán. Miután már többen felismerték ezt a lehetőséget és ilyen funkcionalitással bíró appletet, könyvtárat készítettek. Ebben az esetben a térinformatikai adatoknak és az appletnek ugyanazon a számítógépen kell lennie, ugyanis egy applet csak azon a számítógépen nyithat meg fájlokat, ahonnan letöltötték. Ez elsősorban a kliens számítógép védelmét szolgálja (pl. vírus). Az ilyen appletek használatához nincs szükség web szerverre, ha a kliens számítógépre telepítették az appletet és az adatokat is. Tehát ez a megoldás nem csak internetes elérést biztosít, hanem az intraneten belül (akár egy szóló számítógépen) is használható. Ilyen applet például a JShape és a GeoTools.

Az egy kliens oldali appletre alapozott megoldások általában nem alkalmasak nagy térinformatikai adatbázisok publikálására. Ennek az az oka, hogy a teljes adatbázist le kell tölteni a kliens számítógépre, ugyanis az alap web szerverek csak teljes fájlokat képesek átküldeni a klienseknek, és minden egyes fájl átküldése újabb kapcsolat felépítését és lebontását jelenti. Amíg ez a megoldás a viszonylag kisebb méretű HTML oldalak és képek esetén hatékony, a nagyméretű térinformatikai adatbázisok esetén már nem. Ha a térinformatikai adatbázisnak csak azt a részét szeretnénk letölteni a kliens számítógépre, ami aktuálisan megjelenik, akkor szerver oldalon is további programmal vagy programokkal kell bővíteni a web szerver funkcionalitását, esetleg speciális csak térinformatikai adatok küldésére alkalmas szervert kell készíteni. Például egy szerver oldali Java alkalmazás (Servlet) közvetlenül is kommunikálhat az applettel egy saját tcp/ip porton, melyet a használat során folyamatosan nyitva tart. Ebben az esetben a kliens és a szerver oldali alkalmazások közötti kommunikáció protokolját a programozóknak kell kialakítaniuk, erre a célra a http protokol nem megfelelő.

A JShape egy ingyenesen letölthető applet, mely ESRI Shape fájlok és raszteres állományok megjelenítésére alkalmas. Az applet forráskódja nem nyilvános, így csak a fejlesztők által elkészített funkciókat és felhasználói felületet használhatjuk. Az általános megjelenítési funkciókat támogatja, nagyítás, kicsinyítés, rétegek be/kikapcsolása tematikus térkép, keresés, azonosítás, stb. A JShape lehetőséget biztosít a shape fájlok tömörítésére (.csp), amivel a shape fájlok méretét harmadra, negyedére csökkenthetjük, ez felgyorsítja az adatok letöltését a kliens számítógépre. Egy JShape alapú megoldást itt találhat honlapunkon.

A GeoTools nem egy kész applet, hanem egy nyílt forráskódú java könyvtár ESRI Shape fájlok megjelenítéséhez. Segítségével néhány tíz, száz sor program megírása után elkészíthetjük saját appletünket. A GeoTools a shape fájlok mellett támogatja a rektifikált georeferenciával ellátott raszteres adatok (scannelt térképek, ortofotók, űrfelvételek) megjelenítését is. A hatékonyabb letöltés érdekében a shape fájlok tömörített formában (.zip) tárolhatók a szerveren. A GeoTools jar fájljainak felhasználásával egy általános nézegető appletet készítettem. Az applet forrás kódját itt tekintheti meg. Az applet paramétereinek segítségével lehet megadni a megjelenítendő térkép tartalmát. Az applet lehetőséget biztosít a nagyítás, kicsinyítés, eltolás mellett tematikus térképek megjelenítésére, rétegek be/kikapcsolására és egy raszteres réteg megjelenítésére. A GeoTools használatát segítő oktató anyagok magyar nyelvű fordítását is elkészítettem, ezeket itt találja. Honlapunkon két mintapéldát is talál, az egyik a vektoros adatok publikálását mutatja be, a másik pedig szkennelt térkép kezelését demonstrálja. A MapViewer applet használatát a következő HTML részlet mutatja be.

<APPLET ARCHIVE="jars/support.jar,jars/geotools.jar,jars/collections.jar"  CODE="MapViewer.class" WIDTH="500" HEIGHT="480"    ALIGN="BOTTOM">
   <PARAM NAME="LayerControl" VALUE="yes">	réteg be/kikapcsolás biztosítása
   <PARAM NAME="NumOfLayers" VALUE="5">	megjelenítendő rétegek száma
   <PARAM NAME="shapefile0" VALUE="shapes/telek">	telek réteg megjelenítése alapértelmezett szürke szinnel
   <PARAM NAME="shapefile1" VALUE="shapes/park">	parkok megjelenítése
   <PARAM NAME="colorBy1" VALUE="65280">		zöld szinnel (decimális RGB érték)
   <PARAM NAME="shapefile2" VALUE="shapes/epulet">	épület réteg megjelenítése
   <PARAM NAME="labelBy2" VALUE="NEV">	felbukkanó cimke (tooltip) a név oszlop tartalmával
   <PARAM NAME="shadeBy2" VALUE="KOD">	tematikus térkép a kod oszlop alapján, epulet.key fájl szükséges hozzá
   <PARAM NAME="shapefile3" VALUE="shapes/falkeri">	falak és kerítések réteg
   <PARAM NAME="shapefile4" VALUE="shapes/lepcso">	lépcső réteg
 </APPLET>

Példa a MapViewer applet használatára

Böngésző programba beépülő modulok (plug-in)

Több, a kliens számítógépre telepítendő plug-in tölthető le ingyenesen, melyet a böngésző program automatikusan hív meg, a letöltött adatállomány típusa (content type) alapján. Ezek egyetlen adatállomány (fájl) megjelenítésére korlátozódnak. Talán ez a legegyszerűbben használható megoldás a publikálásra, a HTML lapon egy linket kell elhelyezni, mely a térképet tartalmazó fájlra mutat. Több cég és a w3c is kidolgozott hatékony grafikus adat formátumot az internetes publikálás céljára.

Az Extensible Markup Language (XML) megjelenése jelentős változást hozott az internetes térinformatikai formátumokban is. Az XML egy egyszerű, nagyon rugalmas szöveges formátum, melyet az SGML alapján dolgoztak ki. Előnye még, hogy a szöveges formátum miatt platform független, a számítógép architekturák (LSB/MSB) és az operációs rendszerek közötti különbségek nem okoznak problémát. Eredetileg nagyméretű elektronikus publikációkhoz tervezték, de napjainkban egyre szélesebb körben alkalmazzák az internetes adatátvitel területén, így a térinformatikai adatok esetén is. Sikerét annak is köszönheti, hogy ingyenes, nyíltforrású eszközök állnak a fejlesztők rendelkezésére, az XML állományok értelmezésére (parser), például a xerces Java parser.

A Scalable Vector Graphics (SVG) kétdimenziós grafikus elemeket leíró nyelv, mely az XML-re alapul. Háromféle alapelemet támogat a vektoros alakzatokat (vonalak, görbék), a képeket és a szövegeket. A grafikus elemek csoportokba foglalhatók, transzformálhatók, sőt animációt is rendelhetünk hozzájuk. Az SVG rajzok dinamikussá és interaktívvá tehetők. Az SVG Document Object Model-je (DOM) elérhető scriptekből (pl. JavaScript) és manipulálható. Például onmouseover, onclick esemény kezelők rendelhetők bármelyik SVG objektumhoz. Honlapunkon részletesebb magyar nyelvű ismertetést és mintapéldát találhat az SVG-ről, megtekintéséhez az Adobe SVGViewer-t le kell töltenie.

Az Autodesk szintén kidolgozta az internetes megoldásokhoz a könnyített rajzi formátumot (.dwf). A dwf formátumú rajzok megjelenítésére szolgáló plugin (Autodesk ExpressViewer) ingyenesen letölthető, korábban a whip! plugin szolgált erre a célra. DWF fájl használatára honlapunkon itt talál egy példát. A példa megtekintése előtt az Autodesk ExpressViewer telepítenie kell a számítógépre, csak Internet Explorerrel használható.

Számos további térinformatikai/rajzi formátumhoz kapcsolódó megjelenítő modul található az interneten. Például Computer Graphics Metafile-ok (CGM) megjelenítésére alkalmas plug-in-t innen tölthető le.

Szerver oldali megoldások

Nagyobb méretű térinformatikai adatbázisok internetes publikálása esetén hatékonyabb megoldás érhető el szerver oldali térinformatikai támogatással. Ebben az esetben nincs feltétlenül szükség a teljes térinformatikai adatbázis átmásolására a kliens gépre, csak az aktuálisan szükséges részét kell mozgatni a kliens és szerver között. Azok a térkép szerverek, melyek használatához nincs szükség kliens oldali kiegészítőre (plug-in), egyszerűen jpg, png képeket küldenek a kliens oldali böngészőnek. Ez a megoldás kisebb sávszélesség esetén is hatékonyan használható, hiszen csak pár 10-100 Kbyte-os tömörített kép állományokat kell átküldeni a hálózaton. Ennek a "vékony kliens" megoldásnak további előnye, hogy nincs szükség kiegészítő programok telepítésére a kliens oldalon, a kliens számítógép sebessége nem befolyásolja döntően a működést. Hátránya viszont, hogy minden felhasználói művelet feldolgozása a szerveren történik, ennek megfelelően kell méretezni a szerver oldali teljesítményt.

A legegyszerűbb ilyen program egy nagyfelbontású részletes raszteres térkép/ortofoto részleteit állíthatja elő, a kliens által igényelt felbontással. Ezzel a módszerrel hatékonyan tudunk nagy méretű raszteres állományokat publikálni. Az alábbi kis php script egy nagyobb kép egy részletét állítja elő a kivánt felbontással.




<?php
// clip & resize a part from a jpeg image on the fly
// specify image name from server root
// usage: <img src="???/imageclip.php?params>
// params: pic=imagename name of picture from server root
// width=nn target width of image
// height=mm target height of image
// row=xx start row to clip from
// col=yyy start col to clip from
// swidth=nn width of source
// sheight==mm height of source
 header("Content-type: image/jpg");
         @$name = $_GET['pic'];
         @$wt = $_GET['width']; // target width
         @$ht = $_GET['height']; // target height
         @$ws = $_GET['swidth']; // source width
         @$hs = $_GET['sheight']; // source height
         @$rs = $_GET['row']; // source row start
         @$cs = $_GET['col']; // source col start
 $simage = imagecreatefromjpeg("/var/www/html" . $name);
         $w = imagesx($simage); // size of original image
         $h = imagesy($simage);
         if (strlen($wt) == 0) {
             $wt = 300; // default 300 x 300 image target size
         }
         if (strlen($ht) == 0) {
            $ht = 300;
         }
         if (strlen($ws) == 0) {
            $ws = $w; // full image
         }
         if (strlen($hs) == 0) {
            $hs = $h;
         }
         if (strlen($rs) == 0) {
            $rs = 0;
         }
         if (strlen($cs) == 0) {
            $cs = 0;
         }
         $timage = imagecreate($wt, $ht);
         imagecopyresized($timage, $simage, 0, 0, $rs, $cs, $wt, $ht, $ws, $hs);
         imagejpeg($timage);
 ?>

A bal oldali képeket az alábbi utasításokkal állítottam elő
<img  src="/php/imageclip.php?pic=/maps/shapes/bme2g.jpg&width=100&height=100&swidth=200&sheight=200&row=0&col=0">
<img src="/php/imageclip.php?pic=/maps/shapes/bme2g.jpg&width=150&height=150&swidth=800&sheight=800&row=0&col=0"> <img src="/php/imageclip.php?pic=/maps/shapes/bme2g.jpg&width=150&height=150&swidth=800&sheight=800&row=50&col=50">

Komoly térinformatikai web szervert nem csak a kereskedelmi szoftverek között találhatunk, hanem a nyílt forrású programok között is. A nyílt forrású megoldások között az egyik legelterjedtebb a University Minnesota Mapserver programja. A Mapserver a web szerver Common Gateway Interface-hez (CGI) kapcsolódik. A CGI egy web szerver és programozási nyelv független megoldás az alap web szerver funkcionalitásának bővítésére. A CGI programok általában az URL-ben kapják meg a működésükhöz szükséges paramétereket. A CGI program outputját a web szerver továbbítja a kérést küldő kliens felé. Ebből következik, hogy a CGI programnak a böngésző programok számára közvetlenül értelmezhető outputot kell előállítania. Ez egy html dokumentum vagy egy a böngésző program által megjeleníthető kép lehet. A Mapserver nagyon szép példája a különböző nyílt forrású könyvtárak alkalmazásának. A következő könyvtárakat használja:

A Mapserver a publikálás során HTML sablonok (template) és a megjelenítendő rétegek leírását tartalmazó Map fájl alapján dinamikusan állítja elő a kliens oldalon megjelenő lapot. A sablon állományban "[" "]" jelek közé tett elemeket a CGI program speciálisan kezeli, helyükre térkép részletet, áttekintő térképet, jelkulcsot vagy léptéket helyez el. A Mapserver vezérléséhez a HTML ürlapok (form) elemeit vagy kliens oldali appletet (Mapplet) használhatunk. A Mapserver alkalmazására néhány példát itt talál a honlapunkon.

Christy Shostal: Internetes GIS MapServer alapokon előadásának magyar fordítása (ppt)

(1) A kutatás az OTKA T 030643 téma keretében támogatásban részesült