IV. MEMBUAT APLIKASI DEMO WEBGIS MAPSERVER

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


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 dan ditutup dengan Demo Web GIS <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> ............................... dst ................................... <script language="JavaScript" type="text/javascript"> ............................... dst ................................... //-->

............................... dst ...................................

............................... dst ...................................

<script language="JavaScript" src="sample.js" type="text/javascript">

Isi dari file demo.html

demo.phtml Berisi pemanggilan class utama chameleon, mendefinisikan file template dan file map
www.hatma.info

2


$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


# 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


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


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


"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


•

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


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

IV. MEMBUAT APLIKASI DEMO WEBGIS MAPSERVER

Recommend Documents