WEBGIS 1

Document Sample
WEBGIS 1 Powered By Docstoc
					WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

IV. MEMBUAT APLIKASI DEMO WEBGIS MAPSERVER

Untuk lebih mudahnya, kita akan menggunakan demo aplikasi Web GIS berbasis MapServer dan framework Chameleon yang dapat di download di http://www.hatma.info/download/gis/Demo_MapServer.zip . Setelah download selesai, ekstrak isi nya ke direktori yang sesuai, yaitu : apps, http.d dan Apache/htdocs, pada direktori ms4w anda. Kemudian restart Apache dengan mengeksekusi apache-restart.bat. Buka http://localhost dengan web browser, kemudian klik link demo pada “Hatma Suryotrisongko Demo Web GIS URLs:“ ( http://localhost/demo/demo.phtml )

Link URL demo program, pada halaman utama

Tampilan Demo Web GIS

www.hatma.info

1

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

FILE HTML DAN PHTML Dua buah file utama yang terletak pada D:\ms4w\apps\demo\samples\htdocs , yaitu :

demo.html Berisi template untuk interface aplikasi, dengan kode program/tag HTML standard dan program/tag framework chameleon, dengan ciri-ciri dibuka dekan tag <cwc2 ...> dan ditutup dengan </cwc2>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Demo Web GIS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ............................... dst ................................... <script language="JavaScript" type="text/javascript"> ............................... dst ................................... //--> </script> <link href="sample.css" rel="stylesheet" type="text/css"> </head>

<body onLoad="myOnLoad()"> <form method="post"> ............................... dst ...................................

<div id="MainMapLayer" name="MainMapLayer"> <!-- MapDHTML --> <cwc2 type="MapDHTML" visible="true" width="400" height="300" allowresize="true" marqueecolor="FF3333" marqueewidth="2" minscale="1" bordercolor="#0000ff" borderwidth="0"/></div> ............................... dst ...................................

<!-- include the javascript code that manages the DHTML layers --> <script language="JavaScript" src="sample.js" type="text/javascript"></script>

</form> </body> </html>

Isi dari file demo.html

demo.phtml Berisi pemanggilan class utama chameleon, mendefinisikan file template dan file map
<?php include( "../../htdocs/chameleon.php" );

www.hatma.info

2

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

$szTemplate = "./demo.html"; $szMapFile = "../map/chameleon.map";

class SampleApp extends Chameleon { function SampleApp() { parent::Chameleon(); $this->moMapSession = new MapSession_RW; $this->moMapSession->setTempDir( getSessionSavePath()); } }

$oApp = new SampleApp(); $oApp->registerSkin( 'skins/sample' ); $oApp->CWCInitialize( $szTemplate, $szMapFile ); $oApp->CWCExecute(); ?>

Isi dari file demo.phtml

DATA SHP Data spatial peta disimpan dengan format ESRI shp pada direktori D:\ms4w\apps\demo\samples\data . o image raster : layer bathymetry (bath_mapserver.tif) o polygon : layer land_fn (land_fn.shp); layer park (park.shp); layer drain_fn (drain_fn.shp); layer drainage (drainage.shp) o line : layer prov_bound (province.shp); layer fedlimit (fedlimit.shp); layer rail (rail.shp); layer road (road.shp); o point : layer popplace (popplace.shp); o grid : layer grid (grid.shp)

FILE KONFIGURASI (CHAMELEON.MAP) File konfigurasi (*.map) terletak pada D:\ms4w\apps\demo\samples\map, (chameleon.map), yang terdiri dari beberapa bagian. Antara lain : •

definisi umum
# # Start of map file # # Sample map file for a chameleon app.

www.hatma.info

3

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

# NAME DEMO STATUS ON SIZE 400 300 SYMBOLSET ../etc/symbols.sym EXTENT -2594561 -712631 3467361 3840000 UNITS METERS SHAPEPATH "../data" IMAGECOLOR 255 255 255 FONTSET ../etc/fonts.txt TRANSPARENT FALSE

•

definisi web interface
# # Start of web interface definition # WEB #MINSCALE 2000000 #MAXSCALE 50000000 # # On Windows systems, /tmp and /tmp/ms_tmp/ should be created at the root # of the drive where the .MAP file resides. # IMAGEPATH "/ms4w/tmp/ms_tmp/" IMAGEURL "/ms_tmp/" # LOG "/tmp/gmap.log" METADATA END END

•

peta referensi
# # Start of reference map # REFERENCE IMAGE images/keymap.gif EXTENT -2594561 -712631 3467361 3840000 STATUS ON COLOR -1 -1 -1 OUTLINECOLOR 255 0 0 SIZE 120 90 END

•

skala
# # Start of scalebar #

www.hatma.info

4

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

SCALEBAR IMAGECOLOR 255 255 255 LABEL COLOR 0 0 0 SIZE SMALL END SIZE 150 5 COLOR 255 255 255 BACKGROUNDCOLOR 0 0 0 OUTLINECOLOR 0 0 0 UNITS kilometers INTERVALS 5 STATUS ON END

•

mekanisme penggambaran peta sebagai hasil proses query
QUERYMAP STYLE HILITE COLOR 255 0 0 END

•

sistem proyeksi peta
PROJECTION "init=epsg:42304" END

Definisi Layer: • layer bathymetry (bath_mapserver.tif), raster image
LAYER GROUP "Raster" NAME bathymetry METADATA "DESCRIPTION" "Elevation/Bathymetry" "GROUP" "Raster" "LAYER" "bathymetry" END TYPE RASTER STATUS ON DATA bath_mapserver.tif PROJECTION "init=epsg:42304" END END

•

Contoh layer bertipe polygon : layer land_fn (land_fn.shp)

www.hatma.info

5

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

LAYER GROUP "Polygon" NAME land_fn METADATA "DESCRIPTION" "Foreign Lands" "GROUP" "Polygon" "LAYER" "land_fn" END TYPE POLYGON STATUS ON DATA land_fn CLASS NAME "Foreign Lands" COLOR 240 240 240 OUTLINECOLOR 199 199 199 END PROJECTION "init=epsg:42304" END END

•

Contoh layer bertipe line : layer prov_bound (province.shp)
LAYER GROUP "Line" NAME prov_bound METADATA "DESCRIPTION" "Province" "GROUP" "Line" "LAYER" "prov_bound" END TYPE LINE STATUS ON DATA province CLASS NAME "Province" COLOR 120 120 120 END PROJECTION "init=epsg:42304" END END

•

Contoh layer bertipe point : layer popplace (popplace.shp)
LAYER GROUP "Point" NAME popplace METADATA "DESCRIPTION" "Cities"

www.hatma.info

6

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

"RESULT_FIELDS" "NAME" "GROUP" "Point" "LAYER" "popplace" END TYPE POINT STATUS ON DATA popplace LabelItem "Name" CLASSITEM "Capital" CLASS EXPRESSION "1" TEMPLATE "ttt_query.html" SYMBOL 2 SIZE 8

NAME "Cities" LABEL COLOR 255 0 0 FONT fritqat-italic TYPE truetype SIZE 8 POSITION AUTO PARTIALS FALSE OUTLINECOLOR 255 255 255 END COLOR 0 0 0 END CLASS EXPRESSION /2|3/ TEMPLATE "ttt_query.html" SYMBOL 7 SIZE 6 NAME "Cities" LABEL COLOR 0 0 0 FONT fritqat TYPE truetype SIZE 8 POSITION AUTO PARTIALS FALSE OUTLINECOLOR 255 255 255 END COLOR 0 0 0 END TOLERANCE 5 PROJECTION "init=epsg:42304" END END

www.hatma.info

7

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

•

layer grid (grid.shp)
LAYER GROUP "Grid" NAME "grid" METADATA "DESCRIPTION" "Grid" "GROUP" "Grid" "LAYER" "grid" END TYPE LINE STATUS OFF DATA "grid" CLASS NAME "Graticule" COLOR 0 0 0 END PROJECTION "init=epsg:42304" END END

Selengkapnya lihat file chameleon.map pada D:\ms4w\apps\demo\samples\map\chameleon.map

ADMINISTRASI FILE KONFIGURASI MENGGUNAKAN MAPLAB Supaya lebih memudahkan dan menghindari penulisan file konfigurasi yang salah, disediakan halaman administrasi berbasis web yang dapat diakses dengan alamat http://localhost/maplab/. Walaupun ada 3 fitur utama (MapEdit, MapBrowser dan GmapFactory), untuk membuat/merubah file konfigurasi peta (*.map) kita menggunakan menu MapEdit.

Gambar halaman awal MapEdit

www.hatma.info

8

WebgGIS dengan MapServer – MapLab – Chameleon - PostGIS

MapEdit sedang membuka file konfigurasi peta dari sample web GIS diatas

Tes konfigurasi yang telah kita buat, dengan klik tombol preview

Preview file konfigurasi chameleon.map pada MapEdit

www.hatma.info

9


				
DOCUMENT INFO