P. 1
Modul Pembuatan WebGIS

Modul Pembuatan WebGIS

|Views: 2,692|Likes:
Dipublikasikan oleh Agung Prihadi Suharyono

More info:

Published by: Agung Prihadi Suharyono on Apr 19, 2012
Hak Cipta:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

04/25/2015

pdf

text

original

Modul Pembuatan dan Updating WebGIS

1. Pengenalan Mapserver

MapServer merupakan salah satu aplikasi pemetaan online (web GIS) yang dikembangkan oleh Universitas Minnesota, NASA, dan Departemen Sumber Daya Alam Minnesota (Minnesota Departemen of Natural Resources). MapServer dapat dijalankan pada beberapa sistem operasi yaitu Unix/Linux, MacOS dan Windows. Web-GIS merupakan Sistem Informasi Geografi berbasis web yang terdiri dari beberapa komponen yang saling terkait. Web-GIS merupakan gabungan antara design grafis pemetaan, peta digital dengan analisa geografis, pemrograman komputer, dan sebuah database yang saling terhubung menjadi satu bagian web design dan web pemetaan. Fitur yang didukung oleh MapServer adalah:  Format vektor: ESRI shapefile, ESRI ArcSDE, mapinfo tab  Format raster: TIFF/GeoTIFF, GIF, PNG, ERDAS, JPEG, EPPL7  Quadtree spatial indexing untuk shapefile  Dapat sepenuhnya dikustomisasi untuk menghasilkan hasil yang diinginkan  Pemilihan fitur menggunakan item/nilai, titik, area atau fitur lainnya  Mendukung TrueType font  Mendukung OpenGIS  Mendukung penggabungan data raster dan vektor (untuk penyajian data)  Legenda dan skala yang otomatis  Mendukung pengembangan peta tematik online  Pelabelan fitur  Konfigurasi dapat dilakukan secara online (on-the fly configuration)  Proyeksi dapat dilakukan secara online (on-the-fly projection) Sumber: Tutorial Mapserver, Mapserver-pmapper 2008 2. Instalasi Mapserver  Tutorial ini menggunakan MapServer for Windows  Extract ms4w.zip atau MS4W.rar ke directori C:/  Double klik file apache-install.bat di direktori c:/ms4w/

Ketik http://localhost pada browser (eg. Firefox). Jika MapServer sudah berhasil di install akan muncul tampilan berikut pada browser.

 

Membuat folder untuk membangun suatu aplikasi pada MapServer di direktori c:/ms4w/apps/. Beri nama tutorial pada folder tersebut. Buat file index.html dalam folder yang baru dibuat. Ketik seperti di bawah ini.

Untuk registrasi folder tersebut, buat file baru bernama httpd_tutorial.conf di direktori c:/ms4w/httpd.d/. Edit file tersebut dengan aplikasi text editor (eg. notepad), ketik konfigurasi seperti contoh dibawah ini.

HTML Pages : Halaman web yang dibangun menggunakan HTML (HyperText Markup Language) untuk tampilan antar muka pengguna. MapServer CGI: File binari atau yang dapat dieksekusi berfungsi untuk mengirim. meminta. MapFile Untuk memanfaatkan fungsionalitasnya yang paling sederhana sekalipun.shp).map. Geographic Data: Data spasial yang digunakan dapat berupa vektor.bat di direktori c:/ms4w/ Ketik http://localhost/tutorial/ pada browser. dan menerima gambar. Jenis file yang umum digunakan adalah shapefile dari ESRI (*. 3. Anatomi Aplikasi MapServer   Map File : File berisi konfigurasi untuk membangun mapserver yang berekstensi *. file . Mapfile merupakan file teks biasa .dan lain-lain. MapServer akan selalu membutuhkan minimal sebuah mapfile. Jika berhasil akan tampil seperti dibawah ini.  Double klik file apache-restart. Berbagai macam jenis file lain dapat juga dipergunakan. HTTP Server: Web server untuk mengirim dokumen web ke internet. raster.    Arsitektur dasar aplikasi MapServer 4. web server yang umum digunakan adalah Apache dan IIS.

Sementara objek-objek lainnya berada di bawah objek ini. Penulisan string yang berisi campuran beberapa karakter non-alphanumerik (selain karakter huruf dan angka) atau keywords milik MapServer harus diapit oleh tanda petik ganda ( “ ). pengguna harus membuat file teks yang berekstensi *.map. Pengguna dapat menambahkan baris-baris komentar di dalam mapfile dengan cara mengawali komentar tersebut dengan karakter pagar (#). Penulisan path lokasi file bisa dilakukan secara absolut maupun relatif. File yang disebut mapfile tersebut memiliki ketentuan-ketentuan penulisan sebagai berikut:      Teks pada mapfile tidak bersifat case-sensitive. penting bagi kita untuk memahami struktur mapfile ini terlebih dahulu sebelum memasuki bahasan selanjutnya.map yang akan mendeskripsikan apa dan dimana sumber datanya. dan bagaimana cara data tersebut harus ditampilkan. . Oleh karena itu.yang berekstensi *. Sebelum benar-benar menggunakan MapServer untuk pertama kalinya. Susunan atau isi mapfile memiliki hierarki struktur dengan objek “MAP” sebagai “root”.

087952 9132478.sym" #konfigurasi simbol UNITS meters SIZE 600 500 # ukuran image yang dihasilkan IMAGECOLOR 108 166 205 # # Mulai pendefinisian layer # LAYER # tanda awal definisi layer NAME “ciamis_u” # nama layer CONNECTIONTYPE postgis CONNECTION "user=postgres password=1234 dbname=ciamis host=localhost port=5432" DATA "the_geom FROM administrasi. PNG EXTENT 817736. (950803. Jangkauan batas koordinat peta adalah (817736. # # Komentar untuk mapfile # MAP # tanda awal mapfile NAME Ciamis # nama mapfile IMAGETYPE JPEG # bisa juga GIF.ciamis_u using unique gid using SRID=32748" STATUS ON # layer dimunculkan TYPE POLYGON # untuk tipe poligon CLASS NAME “ciamis” STYLE COLOR 255 255 255 # warna latar putih OUTLINECOLOR 108 166 205 # warna batas luar poligon END # akhir style END #akhir class END #akhir definisi layer Keterangan mapfile urutan baris): END # akhir (sesuai     MapFile tersebut memiliki objek MAP yang bernama “Ciamis” File sementara yang dihasilkan oleh MapServer nantinya berupa file JPEG (bisa juga berupa GIF maupun PNG).900246. Nilai-nilai tersebut diambil dari (extent) cakupan peta aslinya. Semua layer dimunculkan (STATUS ON).087952.4. 9132478.1. berikut ini adalah isi mapfile sederhana yang dapat digunakan untuk menampilkan sebuah layer peta di dalam program aplikasi browser internet..169445).900246 9224249.169445 SYMBOLSET ".Contoh Pembuatan MapFile Sederhana Sebagai contoh pertama kita.264415).264415 950803./common/symbols/symbols-pmapper. . 9224249.

Anda bisa menggunakan tool ColorPic yang dapat di download di internet.. Artinya.2.. 4. # # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP . dan Style. .2. Kelas “ciamis” akan disajikan dengan warna latar putih (RGB: 255 255 255) dengan garis tepi warna biru muda yang sama dengan warna latar peta. Digunakan untuk menentukan scalebar dan komputasi lainnya yang terkait dengan koordinat & skala. Pada peta “Indonesia” tersebut.2. Warna latar pada peta adalah warna biru muda (RGB: 108 166 205). yang isinya adalah parameterparameter global untuk peta yang akan ditampilkan. kita lihat bahwa secara garis besar mapfile terdiri dari 5 bagian: Map. Layer tersebut statusnya dimunculkan (STATUS ON)..1. END # AKHIR MAP 4.shp”.        Satuan koordinat peta dalam meters. Ukuran (resolusi) gambar yang dihasilkan adalah 600×400 pixel. Urutan penempatan layer di peta adalah sesuai dengan urutan penulisannya. layer yang paling dulu dituliskan akan ditempatkan di bagian paling bawah dari peta. Map Objek ini mendefinisikan objek master milik mapfile.2. terdapat layer yang bernama “Asean”.. Di dalam layer “ciamis_u” terdapat unsur-unsur spasial yang bertipe poligon dengan nama “ciamis” juga. 4. Untuk memudahkan dalam memilih warna. Layer Objek ini paling sering digunakan untuk mendefinisikan layer-layer yang kemudian membentuk peta. Kita akan bahas 5 bagian tersebut satu-per-satu.Objek-objek di dalam MapFile Pada contoh sederhana di bagian sebelumnya. Label. Layer. Nama shapefile yang digunakan untuk layer “Asean” tersebut adalah “Aseanoceania. . Class.

. . END # AKHIR MAP 4... # # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP ..... Label Objek ini digunakan untuk mendefinisikan anotasi suatu unsur dalam peta. CLASS . Ketika layer memiliki lebih dari satu kelas. maka kelas-kelas tersebut dibedakan oleh nilai-nilai yang terkait beserta ekspresi yang digunakan untuk mengevaluasinya.. Jadi bisa dikatakan. END # AKHIR DEFINISI OBJEK LAYER .2..2. label juga dapat dijadikan sebagai simbol. LAYER .. END # AKHIR MAP 4. Mengenai ekspresi akan dibahas di bagian selanjutnya. setiap layer pasti memiliki paling tidak satu kelas.. LAYER .4.3. Selain itu.. END # AKHIR DEFINISI CLASS .....# # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP . Class Objek ini digunakan untuk mendefinisikan kelas tematik untuk suatu layer. END # AKHIR DEFINISI OBJEK LAYER .

Menampilkan MapFile .5... END # AKHIR DEFINISI OBJEK LAYER ....... END # AKHIR DEFINISI STYLE LABEL . STYLE . Style Objek ini digunakan untuk menentukan parameter-parameter simbol yang dipakai.. LABEL .. CLASS .. END # AKHIR DEFINISI CLASS . END # AKHIR DEFINISI LABEL . END # AKHIR DEFINISI CLASS .. END # AKHIR MAP 4. END # AKHIR MAP 4. dan warna tersendiri..3. Dengan adanya objek ini. # # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP ..# # BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN # MAP . LAYER ...... setiap kelas dapat memiliki simbol dengan tipe. ukuran. LAYER . END # AKHIR DEFINISI OBJEK LAYER ...2... CLASS ........ END # AKHIR DEFINISI LABEL .

silahkan buka melalui browser dengan perintah: http://localhost/cgi-bin/mapserv.map&mode=map&layers=all .exe?map=c:\ms4w\apps\map-ciamis\webciamis\config\latihan\latihan.Untuk menampilkan peta pertama kita.

Untuk melihat isinya silahkan untuk melihatnya memakai “notepad” atau aplikasi sejenisnya. Setelah itu restart apache yang berada dalam folder c:\ms4w\apache-restart.maptools. Dalam tutorial ini httpd telah tersedia setelah kita meng-extrak pmmaper.5. Pilihlah paket pmapper untuk MS4W.zip.1. Untuk instalasi pmapper silahkan untu meng-ekstraknya di tempat MS4W berada contoh c:\ms4w\. Instalasi pmapper Untuk mendapatkan instalasi mapserver. sehingga pada bagian aplikasi terdapat tulisan pmapper yang telah terinstal Gambar 5 pmapper 5.org. Dan masuk kembali ke halaman http://localhost/. Gambar Isi dari httpd_pmapper . silahkan untuk di download di www. dan pastikan di folder app c:\ms4w\apps\ terdapat folder “map-ciamis”.Konfigurasi HTTPD Apache menyediakan fungsi untuk memanggil halaman web selain di “htdocs”. untuk tutorial ini digunakan ms4w.bat.

xml”.ini: dan subdirektori “default”. “search.Konfigurasi pmapper Gambar 7 struktur file pmapper Untuk melakukan konfigurasi pmapper. dibutuhkan suatu applikasi yang dapat mengedit scripts pmapper. 5. Untuk tutorial ini digunakan notepad++. bisa pake notepad ataupun program khusus.1.php”. didalamnya terdapat file “config. Pada subdirektori “default” terdapat file “custom.2.5. Doc Didalamnya terdapat documentasi mengenai pmapper. Config Direktori untuk konfigurasi file. “php_config. dan mapfile.3.3.php”. 5.js”.3. Disinilah nanti subdirektori untuk pembuatan peta baru. “js_config.2.Direktori dan File struktur 5. .

php : inisialisasi untuk GROUP dan GLAYER objek Map.php & initmap.js: fungsi untuk form dan memilih skala geometry.php : inisialisasi aplikasi Initgroups.php : fungsi utiliti /print/print.js: inisialisasi fungsi pmjson. pmapper. left/top) khusus tampilan mapserver.php : fungsi khusus untuk membuat file pdf /print/tcpdf.js: struktur untuk menampilkan layer di legenda wz_jsgraphics. Pada subdirektori “legend” terdapat icon untuk legenda.php : fungsi untuk melakukan print (cetak gambar) /print/pdfprint.js: fungsi utama untuk membuat peta dari file-file spasial. resize.js: pengaturan untuk hasil pencarian.3.js: fungsu untuk mengukur jarak di peta pminit.js: layout parameter seperti (width/height.js: fungsi.php : berfungsi untuk menentukan variabel-variabel yang biasa digunakan Custom. Incphp Pada direktori ini terdapat file php dengan berbagai macam fungsi diantaranya Common. Javascript fungsi Javascript:                 common.3. A-Z atau Z-A toc.js: definisi untuk legenda dtree.php : fungsi untuk pdf /xajax/… : fungsi scripts ajax               5.js: fungsi umum aplikasi custom.5. Images Didalamnya terdapat file-file image yang digunakan untuk tampilan di web.4.js: menggambarkan garis pada saat pengukuran di peta .3.php : berfungsi untuk membuat legenda Group. 5.js: fungsi untuk pencarian sorttable. pmdraw.js: fungsi untuk query pmquery.js: library untuk mengukur jarak layout.php : menentukan variabel untuk javascript /init/init.php : berfungsi untuk merender map /query/… : fungsi untuk query (identify.php : untuk kostumisasi setting pada toolbar Js_init. GUI.3. select.5.js: fungsi untuk query search.js: kostumisasi aplikasi seperti hyperlink forms. search) Legend.php : class untuk fungsi GROUP dan GLAYER objek Util. query dan lainnya.

custom. Hal ini untuk meminimalisir kesalahan yang terjadi. Untuk tutorial ini folder “data” diletakan sebagai subdirektori dari pmapper.2.4..js dan js_config.js: fungsi untuk tools zoom geser zoombox. hal ini dilakukan agar pada saat pemindahan aplikasi tidak perlu lagi melakukan konfigurasi lagi.js: XMLHttp/AJAX fungsi zslider. MODUL-MODUL 1.map.   xmlhttp. Membuat config untuk latihan Langkah-langkah untuk menampilkan peta 1) Copy folder latihan kedalam direktori C:\ms4w\apps\map-ciamis\webciamis\config\ 2) Masuk kedalam direktori latihan tersebut 3) Pada direktori tersebut berisi file latihan. Untuk totorial kali ini data akan disimpan sebagai subirektori dari pmapper C:\ms4w\apps\pmapper\pmapper-3. Dalam folder “data” di usahakan dibuat sestruktur mungkin. alangkah baiknya dalam penyimpanan data dibuat struktur sejelas mungkin (masalah letak).Penyimpanan data Untuk mempermudah dalam pembuatan web-sig. . seperti mana file vektor dan mana file raster dan file-file lainnya yang akan mendukung dalam pembuatan web-sig.js: DHTML zoom/pan 5.php.. seperti tidak munculnya peta.0\data\.

xml di direktori C:\ms4w\apps\map-ciamis\webciamis\config\ 6) Berikut ini isi sebagian dari file config_latihan.xml .map 5) Membuat file config_latihan.4) Berikut ini sebagian dari isi file latihan.

Kemudian klik fileexport as image. terlebih dahulu harus kita buat file image (bisa *.7) Mengecek pada browser internet apakah konfigurasi yang dilakukan telah benar dengan mengetik alamat berikut ini http://localhost/map-ciamis/map. cara membuatnya. *. buka kembali aplikasi Qgis. atau *.jpg.png. .bmp).phtml?config=latihan 2. Menampilkan peta inset Untuk menampilkan peta inset.

png dan simpan file tersebut di folder C:\ms4w\apps\map-ciamis\web-ciamis\images\reference_latihan.Kemudian save image tersebut sebagai file *.map dan ubah bagian REFERENCE Setelah itu refresh… .png Seletah itu buka pmapper_latihan.

zoom out. maka secara otomasti legenda pun akan muncul. dan pan) Fungsi secara otomatis berfungsi apabila di peta telah muncul gambar peta yang di harapkan. Interaktif Peta (zoom in.ini .3. 4. Legenda Apabila konfigurasi config_latihan benar.map dan config_latihan. Apabila tidak silahkan untuk melalukan pengecekan ulang pada file latihan.

map menjadi 6.map telah didefisinikan terlebih dahulu. Untuk itu rubah parameter layer di latihan.xml Rubah konfigurasi . Identifikasi Fungsi identifikasi akan menampilkan informasi mengenai atribut apabila pada file latihan.5. C:\ms4w\apps\map-ciamis\webciamis\config\config_latihan.xml yang berada di direktori latihan. Pencarian Pencarian akan berfungsi apabila kita terlebih dahulu melakukan konfigurasi pada config_latihan.

kita harus membuat layer baru.7. Peta Tematik Untuk menggambarkan peta secara tematik. misalnya kita akan membuat layer tematik rasio guru dan sekolah (MI) .

5) END # CLASS CLASS NAME "1.1.5 and [ras_gr_skl] <=3) END # CLASS CLASS NAME "3 . Sekolah. Murid.mi_negeri_swasta_u using unique gid using SRID=32748" ################################# METADATA "DESCRIPTION" "Rasio Guru : Sekolah (MI)" #"RESULT_FIELDS" "KECAMATAN. guru" # Uncomment if PostGIS "RESULT_HEADERS" "Kecamatan. SEKOLAH.5" COLOR 0 255 0 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] > 3 and [ras_gr_skl] <= 4. Guru" END CLASS NAME "0 . GURU" # Uncomment if Folder Data "RESULT_FIELDS" "kecamatan.########################################################################## ###################### Rasio Guru : Sekolah (MI) ########################### ########################################################################## LAYER NAME "rasio_SekolahGuruMI" TYPE polygon TRANSPARENCY 95 TEMPLATE void PROJECTION #"init=epsg:4326" "+proj=utm +zone=48 +south +ellps=WGS84 +datum=WGS84 +units=m +no_defs no_defs" END ##### Connection to POSTGIS ##### CONNECTIONTYPE postgis CONNECTION "user=postgres password=1234 dbname=ciamis host=localhost port=5432" DATA "the_geom FROM pendidikan. MURID.3" COLOR 175 254 175 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] > 1.5 .5) END # CLASS CLASS . sekolah.4. murid.5" COLOR 230 254 230 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] >= 0 and [ras_gr_skl] <= 1.

You're Reading a Free Preview

Mengunduh
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->