• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
25743698 Pengenalan Mapserver
 

25743698 Pengenalan Mapserver

on

  • 2,411 views

Pengenalan mendasar bgt nih...mudah2an aj ngerti n kebaca,,susah jg nerangin nya..hehe...

Pengenalan mendasar bgt nih...mudah2an aj ngerti n kebaca,,susah jg nerangin nya..hehe...

Statistics

Views

Total Views
2,411
Views on SlideShare
2,411
Embed Views
0

Actions

Likes
0
Downloads
125
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    25743698 Pengenalan Mapserver 25743698 Pengenalan Mapserver Document Transcript

    • Tema : Sistem Informasi Geografis Berbasis Web Imat Ruhimat, Indonesian Computer University,2009 blog.imat@gmail.com PENGENALAN MAPSERVER Dasar pemikiran mapserver adalah mengubah data peta berupa vektor menjadi data raster (gambar) yang ditampilkan dalam halaman web. Mapserver dapat melakukan hal itu dengan menjalankan program CGI pada webserver. Secara umum hal yang dimaksud diatas adalah bahwa mapserver dijalankan pada server dan output yang berupa peta raster ditampilkan di web browser pada komputer pengguna. Data Masukan MapServer adalah : 1. File Konfigurasi (pada umumnya disebut file *.map) contoh : kabgarut.map 2. Satu atau lebih data peta berupa vektor (file *.shp) contoh : (pertanian.prj,,,,pertanian.shp,,,,,pertanian.shx) ketiganya hatus ada yaitu .shp,.shx,.prj 3. Satu atau lebih template web dalam format HTML, dalam hal ini sebagai media untuk menampilkan data peta berupa raster dalam format GIF. Contoh : qindustri.html, qkecamatan.html
    • Isi dari File Map (kabgarut.map) MAP # awal pendeskripsian file map NAME POTENSIGARUT #memberi awalan nama file output STATUS ON #mengaktifkan peta agar dapat terlihat SIZE 600 600 #ukuran peta dalam pixel FONTSET font/fontset.txt #font untuk label peta EXTENT 107.400710 -7.762052 108.124868 -6.921875 # koordinat peta UNITS DD #unit koordinat peta digunakan untuk skala SHAPEPATH "peta" #alamat tempat data disimpan IMAGECOLOR 128 128 255 #warna latar peta WEB #pendefinisian utk halaman web TEMPLATE kabgarut.html #halaman web untuk menampilkan peta IMAGEPATH "tmp" #alamat tempat output mapserver disimpan END QUERYMAP #menampilkan hasil query SIZE 300 300 #butuh gambar kecil utk hasil STATUS ON #agar query map terlihat STYLE HILITE #menandai pilihan COLOR 255 0 0 #dengan warna ini....utk yg ditandai END REFERENCE #pendefinisian peta referensi STATUS ON #visibilitas
    • IMAGE "referensi.gif" #gambar dasar untuk referensi SIZE 250 250 #ukuran gambar dalam pixel EXTENT 107.400710 -7.762052 108.124868 -6.921875 COLOR -1 -1 -1 #warna transparan untuk fill OUTLINECOLOR 255 0 0 #warna merah untuk outline END SCALEBAR #memulai objek balok skala IMAGECOLOR 255 255 255 #warna dasar putih LABEL COLOR 0 0 0 #warna tex hitam SIZE MEDIUM #ukuran relatif END SIZE 280 8 #ukuran panjang dan lebar dalam pixel COLOR 255 255 255 #warna pertama apada balok skala BACKGROUNDCOLOR 0 0 0 #warna dasar balok skala OUTLINECOLOR 0 0 0 #warna kedua pada balok skala UNITS KILOMETERS #unit pada balok skala INTERVALS 5 #jumlah interval yang diinginkan STATUS ON #visibilitas STYLE 0 style memiliki dua harga yaitu 0 dan 1 END LEGEND IMAGECOLOR 230 238 226 #warna latar legenda STATUS EMBED #legenda bergabung dengan peta POSITION LR #posisi legenda kanan-bawah KEYSIZE 15 10 #ukuran simbol
    • LABEL #memulai objek label COLOR 0 0 0 #warna tex SIZE 8 #ukuran font FONT arial #nama font TYPE truetype #tipe font END END SYMBOL NAME 'CIRCLE' TYPE ELLIPSE POINTS 1 1 END FILLED TRUE END SYMBOL NAME 'INDUSTRI' TYPE ELLIPSE POINTS 0 1 20 END FILLED TRUE END
    • SYMBOL #mendefinisikan symbol NAME 'PETERNAKAN' #objek yg dipilih utk ditampilkan dlm bntuk simbol TYPE VECTOR #tipe simbol POINTS 2 1 #bentukny mau kyk apa 22 12 END FILLED TRUE #fill nya ditampilkan END LAYER NAME kecamatan TYPE POLYGON #krna kecamatan mka typenya poliigon STATUS OFF #default tdk terlihat ,akan terlihat jika diceklis DATA kecamatan #nama file vektor (shp) LABELITEM "kecamatan" CLASS NAME Kecamatan #tex yg akan dtmpilkan pada legenda COLOR 255 255 100 OUTLINECOLOR 0 200 0 LABEL COLOR 000 SIZE 8 POSITION CC BUFFER 5 FONT tahoma TYPE truetype END
    • END TEMPLATE qkecamatan.php #file template utk menampilkan raster END LAYER NAME industri TYPE POINT STATUS OFF DATA industri CLASS NAME Industri COLOR 250 0 230 SYMBOL 'INDUSTRI' #simbol yang digunakan SIZE 8 END TEMPLATE qindustri.html END LAYER NAME pertanian TYPE POINT STATUS OFF DATA pertanian CLASS NAME Pertanian COLOR 0 0 100 SYMBOL 'CIRCLE' SIZE 9 END
    • TEMPLATE qpertanian.php END LAYER NAME peternakan TYPE POINT STATUS OFF DATA peternakan CLASS NAME peternakan COLOR 0 255 0 SYMBOL 'PETERNAKAN' SIZE 18 END TEMPLATE qpeternakan.html END LAYER NAME pasar_tradisional TYPE POINT STATUS OFF DATA pasar_tradisional CLASS NAME "Pasar Tradisional" COLOR 0 200 200 SYMBOL 'CIRCLE' SIZE 9 END TEMPLATE qpasar.html
    • END LAYER NAME jalan TYPE LINE #karena berupa garis maka gunakan tipe line STATUS OFF DATA jalan #akses data shp CLASS NAME Jalan COLOR 50 26 255 END TEMPLATE qjalan.html END LAYER NAME rel_kereta TYPE LINE STATUS OFF DATA rel_kereta CLASS NAME "Rel Kereta" COLOR 90 0 100 END TEMPLATE qrelkereta.html END END Isi dari kabgarut.html
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <title>Map Server Kabupaten Garut</title> <script language="javascript"><!-- function FullExtent(){ document.mapserv.imgext.value="107.400710 -7.762052 108.124868 -6.921875"; document.mapserv.imgxy.value="300 300"; document.mapserv.submit(); } function Koordinat(img){ var x=Number([minx] + ((event.clientX - img.offsetLeft)*([maxx] - [minx]))/[mapwidth]); var y=Number([maxy] - ((event.clientY - img.offsetTop)*([maxy] - [miny]))/[mapheight]); window.status="Koordinat Geografis :" + (x) + " and y=" + (y); } function Update(){setmode('browse');document.mapserv.submit();} function setmode(m) {document.mapserv.mode.value=m;} // --></script> <style type="text/css"> <!-- .style1 {font-family: Arial, Helvetica, sans-serif} .style5 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; } .style6 {font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } --> </style> </head> <body> <center> <form method="get" action="mapserv.exe" name="mapserv"> <table width="950" border="0" cellpadding="0" cellspacing="0"> <tr> <th scope="col"><table border="0" cellpadding="0" cellspacing="0" width="950"> <!-- fwtable fwsrc="Untitled-1.png" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "2100863515" fwnested="0" --> <tr> <td><img src="images/spacer.gif" width="100" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="94" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="98" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="97" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="412" height="1" border="0" alt="" /></td>
    • <td><img src="images/spacer.gif" width="132" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td> <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td> </tr> <tr> <td colspan="7"><img src="http://localhost/kabgarut/images/index_r1_c1.gif" alt="" name="index_r1_c1" width="950" height="127" border="0" id="index_r1_c1" /></td> <td><img src="images/spacer.gif" width="1" height="127" border="0" alt="" /></td> </tr> <tr> <td><a href="http://localhost/kabgarut/index.htm"><img src="http://localhost/kabgarut/images/index_r2_c1.gif" alt="" name="index_r2_c1" width="100" height="26" border="0" id="index_r2_c1" /></a></td> <td><a href="http://localhost/kabgarut/profil.php"><img src="http://localhost/kabgarut/images/index_r2_c2.gif" alt="" name="index_r2_c2" width="94" height="26" border="0" id="index_r2_c2" onmouseover="MM_showMenu(window.mm_menu_1112002012_0,0,26,null,'inde x_r2_c2')" onmouseout="MM_startTimeout();" /></a></td> <td><a href="http://localhost/kabgarut/profil_tani.php"><img src="http://localhost/kabgarut/images/index_r2_c3.gif" alt="" name="index_r2_c3" width="98" height="26" border="0" id="index_r2_c3" onmouseover="MM_showMenu(window.mm_menu_1112011151_0,0,26,null,'inde x_r2_c3')" onmouseout="MM_startTimeout();" /></a></td> <td><a href="http://localhost/kabgarut/isibukutamu.php"><img src="http://localhost/kabgarut/images/index_r2_c4.gif" alt="" name="index_r2_c4" width="97" height="26" border="0" id="index_r2_c4" onmouseover="MM_showMenu(window.mm_menu_1112013816_0,0,26,null,'inde x_r2_c4')" onmouseout="MM_startTimeout();" /></a></td> <td><img src="http://localhost/kabgarut/images/index_r2_c5.gif" alt="" name="index_r2_c5" width="412" height="26" border="0" id="index_r2_c5" /></td> <td><a href="peta.htm"><img src="http://localhost/kabgarut/images/index_r2_c6.gif" alt="" name="index_r2_c6" width="132" height="26" border="0" id="index_r2_c6" /></a></td> <td><img src="http://localhost/kabgarut/images/index_r2_c7.gif" alt="" name="index_r2_c7" width="17" height="26" border="0" id="index_r2_c7" /></td> <td><img src="images/spacer.gif" width="1" height="26" border="0" alt="" /></td> </tr> </table></th>
    • </tr> </table> <table width="950" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left" bgcolor="#000099"><p align="center" class="style5">LAYER </p> <p class="style6"> <input type="checkbox" name="layer" value="kecamatan" [kecamatan_check] onclick="Update()" /> Kecamatan<br /> <input type="checkbox" name="layer" value="jalan" [jalan_check] onclick="Update()" /> Jalan<br /> <input type="checkbox" name="layer" value="pasar_tradisional" [pasar_tradisional_check] onclick="Update()" /> Pasar Tradisional<br /> <input type="checkbox" name="layer" value="rel_kereta" [rel_kereta_check] onclick="Update()" /> Rel Kereta<br /> <input type="checkbox" name="layer" value="industri" [industri_check] onclick="Update()" /> Industri<br /> <input type="checkbox" name="layer" value="peternakan" [peternakan_check] onclick="Update()" /> Peternakan<br /> <input type="checkbox" name="layer" value="pertanian" [pertanian_check] onclick="Update()" /> Pertanian</p></td> <td width="639" rowspan="4" valign="top" bgcolor="#0033CC"><div align="center"> <p><span class="style5"> TOOLS : <input type="radio" name="zoomdir" value="1" [zoomdir_1_check] onclick="Update()"> Zoom In | <input type="radio" name="zoomdir" value="-1" [zoomdir_- 1_check] onclick="Update()"> Zoom Out | <input type="radio" name="zoomdir" value="0" [zoomdir_0_check] onclick="Update()" /> Pan | <input type="radio" name="zoomdir" value="0" onclick="FullExtent()" /> FullExtent | <input type="radio" name="zoomdir" value="0" onclick="setmode('query')" /> Info </span></p> <p> <input name="img" type="image" img src="/kabgarut/tmp/ [img]" alt="Kabupaten Garut" onmousemove="Koordinat(this);"> </p> </div> </td> </tr>
    • <tr align="center" bgcolor="#000099"> <td><div align="left" class="style6"> <p align="center"><strong>PETA REFERENSI </strong></p> <p align="center"><img name="ref" type="image" src="/kabgarut/tmp/[ref]"> </p> <p align="center"><span class="style1">Skala 1 : [scale]</span> </p> </div></td> </tr> <tr align="center" bgcolor="#000099"> <td><div align="left" class="style6"> <div align="center"><img src="/kabgarut/tmp/[scalebar]" name="skala" id="skala" type="image" /></div> </div></td> </tr> <tr align="left" bgcolor="#000099"> <td width="261"><div align="left" class="style6"> <div align="center"> <p>Badan Perencanaan Pembangunan Daerah (BAPPEDA)</p> <p>Subid. Pengolahan Data <br> </p> </div> </div></td> </tr></table> <input type="hidden" name="map" value="[map]"> <input type="hidden" name="imgext" value="[mapext]"> <input type="hidden" name="imgxy" value="[center]"> <input type="hidden" name="zoomsize" value="2"> <input type="hidden" name="mode" value="browse"> </form> </center> </body> </html>
    • Isi dari qindustri (salah satu contoh utk menampikan query) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Data Pasar Tradisional</title> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1"> <style type="text/css"> <!-- .style2 {font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } .style3 {color: #FFFFFF} .style4 {font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 24px; } --> </style> </head> <body> <table width="600" border="1" align="center"> <tr> <td align="center" bgcolor="#000099"><h1 class="style4">SENTRA INDUSTRI : [INDUSTRI]</h1></td> </tr> <tr> <td align="center" bgcolor="#0033CC"><p class="style3"><img src="/kabgarut/tmp/[img]" type="image"></p> <p class="style2">Keterangan : Warna merah adalah objek yang dipilih.</p></td> </tr> <tr> <td bgcolor="#0033CC"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50%" bgcolor="#0033CC" class="style2">Letak Desa </td> <td width="5%" bgcolor="#0033CC" class="style2">:</td> <td nowrap bgcolor="#0033CC" class="style2">[LETAK_DESA]</td> </tr> <tr> <td width="50%" bgcolor="#0033CC" class="style2">Nilai Investasi </td> <td width="5%" bgcolor="#0033CC" class="style2">:</td> <td nowrap bgcolor="#0033CC" class="style2">[INVESTASI]</td> </tr> <tr> <td bgcolor="#0033CC" class="style2">Kapasitas Produksi </td>
    • <td bgcolor="#0033CC" class="style2">&nbsp;</td> <td nowrap bgcolor="#0033CC" class="style2">[PRODUKSI]</td> </tr> <tr> <td bgcolor="#0033CC" class="style2">Nilai Produksi </td> <td bgcolor="#0033CC" class="style2">:</td> <td nowrap bgcolor="#0033CC" class="style2">[PRODUKSI0]</td> </tr> <tr> <td bgcolor="#0033CC" class="style2">Letak Kecamatan </td> <td bgcolor="#0033CC" class="style2">:</td> <td nowrap bgcolor="#0033CC" class="style2">[KECAMATAN]</td> </tr> <tr> <td width="50%" bgcolor="#0033CC" class="style2">Berita</td> <td width="5%" bgcolor="#0033CC" class="style2">:</td> <td nowrap bgcolor="#0033CC" class="style2">&nbsp;</td> </tr> </table></td> </tr> </table> </body> </html> Karena hanya pengenalan ,,jd nggak semua file ditampilkan disini...hanyha file2 penting konsep pembentukan petanya aja...hehe..