IV. MEMBUAT APLIKASI DEMO WEBGIS MAPSERVER

Ukuran: px

Mulai penontonan dengan halaman:

Download "IV. MEMBUAT APLIKASI DEMO WEBGIS MAPSERVER"

Indra Sugiarto
7 tahun lalu
Tontonan:

1 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 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 dengan web browser, kemudian klik link demo pada Hatma Suryotrisongko Demo Web GIS URLs: ( ) Link URL demo program, pada halaman utama Tampilan Demo Web GIS 1

2 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 ">... 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">  <cwc2 type="mapdhtml" visible="true" width="400" height="300" allowresize="true" marqueecolor="ff3333" marqueewidth="2" minscale="1" bordercolor="0000ff" borderwidth="0"/></div>... dst...  <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" ); 2

3 $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. 3

4 NAME DEMO SIZE SYMBOLSET../etc/symbols.sym EXTENT UNITS METERS SHAPEPATH "../data" IMAGECOLOR FONTSET../etc/fonts.txt TRANSPARENT FALSE definisi web interface Start of web interface definition WEB MINSCALE MAXSCALE 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" peta referensi Start of reference map REFERENCE IMAGE images/keymap.gif EXTENT COLOR OUTLINECOLOR SIZE skala Start of scalebar 4

5 SCALEBAR IMAGECOLOR LABEL SIZE SMALL SIZE COLOR BACKGROUND OUTLINE UNITS kilometers INTERVALS 5 mekanisme penggambaran peta sebagai hasil proses query QUERYMAP STYLE HILITE COLOR sistem proyeksi peta Definisi Layer: layer bathymetry (bath_mapserver.tif), raster image GROUP "Raster" NAME bathymetry "DESCRIPTION" "Elevation/Bathymetry" "GROUP" "Raster" "" "bathymetry" TYPE RASTER DATA bath_mapserver.tif Contoh layer bertipe polygon : layer land_fn (land_fn.shp) 5

6 GROUP "Polygon" NAME land_fn "DESCRIPTION" "Foreign Lands" "GROUP" "Polygon" "" "land_fn" TYPE POLYGON DATA land_fn NAME "Foreign Lands" COLOR OUTLINECOLOR Contoh layer bertipe line : layer prov_bound (province.shp) GROUP "Line" NAME prov_bound "DESCRIPTION" "Province" "GROUP" "Line" "" "prov_bound" TYPE LINE DATA province NAME "Province" COLOR Contoh layer bertipe point : layer popplace (popplace.shp) GROUP "Point" NAME popplace "DESCRIPTION" "Cities" 6

7 "RESULT_FIELDS" "NAME" "GROUP" "Point" "" "popplace" TYPE POINT DATA popplace LabelItem "Name" ITEM "Capital" EXPRESSION "1" TEMPLATE "ttt_query.html" SYMBOL 2 SIZE 8 NAME "Cities" LABEL COLOR FONT fritqat-italic TYPE truetype SIZE 8 POSITION AUTO PARTIALS FALSE OUTLINECOLOR EXPRESSION /2 3/ TEMPLATE "ttt_query.html" SYMBOL 7 SIZE 6 NAME "Cities" LABEL FONT fritqat TYPE truetype SIZE 8 POSITION AUTO PARTIALS FALSE OUTLINECOLOR TOLERANCE 5 7

8 layer grid (grid.shp) GROUP "Grid" NAME "grid" "DESCRIPTION" "Grid" "GROUP" "Grid" "" "grid" TYPE LINE STATUS OFF DATA "grid" NAME "Graticule" 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 Walaupun ada 3 fitur utama (MapEdit, MapBrowser dan GmapFactory), untuk membuat/merubah file konfigurasi peta (*.map) kita menggunakan menu MapEdit. Gambar halaman awal MapEdit 8

9 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 9

dokumen-dokumen yang mirip

VII. MEMBUAT APLIKASI DEMO WEBGIS MAPSERVER - POSTGIS

VII. MEMBUAT APLIKASI DEMO WEBGIS MAPSERVER - POSTGIS Kita akan mengubah demo/sample aplikasi Web GIS yang sudah kita buat diatas, menjadi aplikasi webgis mapserver yang mengambil data geometri dan atribut