90102903 Modul Pembuatan WebGIS
-
Upload
zahratul-ainiyah -
Category
Documents
-
view
101 -
download
6
Transcript of 90102903 Modul Pembuatan WebGIS
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.
Double klik file apache-restart.bat di direktori c:/ms4w/
Ketik http://localhost/tutorial/ pada browser. Jika berhasil akan tampil seperti
dibawah ini.
3. Anatomi Aplikasi MapServer
Map File : File berisi konfigurasi untuk membangun mapserver yang
berekstensi *.map.
Geographic Data: Data spasial yang digunakan dapat berupa vektor,
raster. Jenis file yang umum digunakan adalah shapefile dari ESRI
(*.shp). Berbagai macam jenis file lain dapat juga dipergunakan.
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, dan menerima gambar, file ,dan lain-lain.
HTTP Server: Web server untuk mengirim dokumen web ke internet,
web server yang umum digunakan adalah Apache dan IIS.
Arsitektur dasar aplikasi MapServer
4. MapFile
Untuk memanfaatkan fungsionalitasnya yang paling sederhana sekalipun, MapServer
akan selalu membutuhkan minimal sebuah mapfile. Mapfile merupakan file teks biasa
yang berekstensi *.map yang akan mendeskripsikan apa dan dimana sumber datanya,
dan bagaimana cara data tersebut harus ditampilkan. Oleh karena itu, penting bagi kita
untuk memahami struktur mapfile ini terlebih dahulu sebelum memasuki bahasan
selanjutnya.
Sebelum benar-benar menggunakan MapServer untuk pertama kalinya, pengguna
harus membuat file teks yang berekstensi *.map. File yang disebut mapfile tersebut
memiliki ketentuan-ketentuan penulisan sebagai berikut:
Teks pada mapfile tidak bersifat case-sensitive.
Penulisan string yang berisi campuran beberapa karakter non-alphanumerik (selain
karakter huruf dan angka) atau keywords milik MapServer harus diapit oleh tanda
petik ganda ( “ ).
Penulisan path lokasi file bisa dilakukan secara absolut maupun relatif.
Susunan atau isi mapfile memiliki hierarki struktur dengan objek “MAP” sebagai
“root”. Sementara objek-objek lainnya berada di bawah objek ini.
Pengguna dapat menambahkan baris-baris komentar di dalam mapfile dengan cara
mengawali komentar tersebut dengan karakter pagar (#).
4.1.Contoh Pembuatan MapFile Sederhana
Sebagai contoh pertama kita, berikut ini adalah isi mapfile sederhana yang dapat
digunakan untuk menampilkan sebuah layer peta di dalam program aplikasi browser
internet.
Keterangan (sesuai urutan baris):
MapFile tersebut memiliki objek MAP yang bernama “Ciamis”
File sementara yang dihasilkan oleh MapServer nantinya berupa file JPEG (bisa juga
berupa GIF maupun PNG).
Jangkauan batas koordinat peta adalah (817736.087952, 9132478.264415);
(950803.900246, 9224249.169445). Nilai-nilai tersebut diambil dari (extent) cakupan
peta aslinya.
Semua layer dimunculkan (STATUS ON).
# # Komentar untuk mapfile # MAP # tanda awal mapfile NAME Ciamis # nama mapfile IMAGETYPE JPEG # bisa juga GIF, PNG EXTENT 817736.087952 9132478.264415 950803.900246 9224249.169445 SYMBOLSET "../common/symbols/symbols-pmapper.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.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 END # akhir mapfile
Satuan koordinat peta dalam meters. Digunakan untuk menentukan scalebar dan
komputasi lainnya yang terkait dengan koordinat & skala.
Ukuran (resolusi) gambar yang dihasilkan adalah 600×400 pixel.
Warna latar pada peta adalah warna biru muda (RGB: 108 166 205). Untuk
memudahkan dalam memilih warna, Anda bisa menggunakan tool ColorPic yang
dapat di download di internet.
Pada peta “Indonesia” tersebut, terdapat layer yang bernama “Asean”.
Nama shapefile yang digunakan untuk layer “Asean” tersebut adalah “Asean-
oceania.shp”.
Layer tersebut statusnya dimunculkan (STATUS ON).
Di dalam layer “ciamis_u” terdapat unsur-unsur spasial yang bertipe poligon dengan
nama “ciamis” juga.
Kelas “ciamis” akan disajikan dengan warna latar putih (RGB: 255 255 255) dengan
garis tepi warna biru muda yang sama dengan warna latar peta.
4.2.Objek-objek di dalam MapFile
Pada contoh sederhana di bagian sebelumnya, kita lihat bahwa secara garis besar
mapfile terdiri dari 5 bagian: Map, Layer, Class, Label, dan Style. Kita akan bahas 5
bagian tersebut satu-per-satu.
4.2.1. Map
Objek ini mendefinisikan objek master milik mapfile, yang isinya adalah parameter-
parameter global untuk peta yang akan ditampilkan.
4.2.2. Layer
Objek ini paling sering digunakan untuk mendefinisikan layer-layer yang kemudian
membentuk peta. Urutan penempatan layer di peta adalah sesuai dengan urutan
penulisannya. Artinya, layer yang paling dulu dituliskan akan ditempatkan di bagian
paling bawah dari peta.
#
# BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN
#
MAP
...
...
END # AKHIR MAP
4.2.3. Class
Objek ini digunakan untuk mendefinisikan kelas tematik untuk suatu layer. Jadi bisa
dikatakan, setiap layer pasti memiliki paling tidak satu kelas. Ketika layer memiliki
lebih dari satu kelas, maka kelas-kelas tersebut dibedakan oleh nilai-nilai yang terkait
beserta ekspresi yang digunakan untuk mengevaluasinya. Mengenai ekspresi akan
dibahas di bagian selanjutnya.
4.2.4. Label
Objek ini digunakan untuk mendefinisikan anotasi suatu unsur dalam peta. Selain itu,
label juga dapat dijadikan sebagai simbol.
#
# BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN
#
MAP
...
LAYER
...
CLASS
...
END # AKHIR DEFINISI CLASS
...
END # AKHIR DEFINISI OBJEK LAYER
...
END # AKHIR MAP
#
# BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN
#
MAP
...
LAYER
...
END # AKHIR DEFINISI OBJEK LAYER
...
END # AKHIR MAP
4.2.5. Style
Objek ini digunakan untuk menentukan parameter-parameter simbol yang dipakai.
Dengan adanya objek ini, setiap kelas dapat memiliki simbol dengan tipe, ukuran, dan
warna tersendiri.
4.3.Menampilkan MapFile
#
# BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN
#
MAP
...
LAYER
...
CLASS
...
STYLE
...
END # AKHIR DEFINISI STYLE
LABEL
...
END # AKHIR DEFINISI LABEL
...
END # AKHIR DEFINISI CLASS
...
END # AKHIR DEFINISI OBJEK LAYER
...
END # AKHIR MAP
#
# BARIS KOMENTAR UNTUK MAPFILE YANG BERSANGKUTAN
#
MAP
...
LAYER
...
CLASS
...
LABEL
...
END # AKHIR DEFINISI LABEL
...
END # AKHIR DEFINISI CLASS
...
END # AKHIR DEFINISI OBJEK LAYER
...
END # AKHIR MAP
Untuk menampilkan peta pertama kita, silahkan buka melalui browser dengan
perintah:
http://localhost/cgi-bin/mapserv.exe?map=c:\ms4w\apps\map-ciamis\web-
ciamis\config\latihan\latihan.map&mode=map&layers=all
5. Instalasi pmapper
Untuk mendapatkan instalasi mapserver, silahkan untuk di download di
www.maptools.org. Pilihlah paket pmapper untuk MS4W. untuk tutorial ini
digunakan ms4w.zip. Untuk instalasi pmapper silahkan untu meng-ekstraknya di
tempat MS4W berada contoh c:\ms4w\. dan pastikan di folder app c:\ms4w\apps\
terdapat folder “map-ciamis”. Setelah itu restart apache yang berada dalam folder
c:\ms4w\apache-restart.bat. Dan masuk kembali ke halaman http://localhost/,
sehingga pada bagian aplikasi terdapat tulisan pmapper yang telah terinstal
Gambar 5 pmapper
5.1.Konfigurasi HTTPD
Apache menyediakan fungsi untuk memanggil halaman web selain di “htdocs”.
Dalam tutorial ini httpd telah tersedia setelah kita meng-extrak pmmaper. Untuk
melihat isinya silahkan untuk melihatnya memakai “notepad” atau aplikasi sejenisnya.
Gambar Isi dari httpd_pmapper
5.2.Konfigurasi pmapper
Gambar 7 struktur file pmapper
Untuk melakukan konfigurasi pmapper, dibutuhkan suatu applikasi yang dapat meng-
edit scripts pmapper, bisa pake notepad ataupun program khusus. Untuk tutorial ini
digunakan notepad++.
5.3.Direktori dan File struktur
5.3.1. Config
Direktori untuk konfigurasi file, didalamnya terdapat file “config.ini: dan subdirektori
“default”. Pada subdirektori “default” terdapat file “custom.js”, “js_config.php”,
“php_config.php”, “search.xml”, dan mapfile. Disinilah nanti subdirektori untuk
pembuatan peta baru.
5.3.2. Doc
Didalamnya terdapat documentasi mengenai pmapper.
5.3.3. Images
Didalamnya terdapat file-file image yang digunakan untuk tampilan di web. Pada
subdirektori “legend” terdapat icon untuk legenda.
5.3.4. Incphp
Pada direktori ini terdapat file php dengan berbagai macam fungsi diantaranya
Common.php : berfungsi untuk menentukan variabel-variabel yang biasa digunakan
Custom.php : untuk kostumisasi setting pada toolbar
Js_init.php : menentukan variabel untuk javascript
/init/init.php & initmap.php : inisialisasi aplikasi
Initgroups.php : inisialisasi untuk GROUP dan GLAYER objek
Map.php : berfungsi untuk merender map
/query/… : fungsi untuk query (identify, select, search)
Legend.php : berfungsi untuk membuat legenda
Group.php : class untuk fungsi GROUP dan GLAYER objek
Util.php : fungsi utiliti
/print/print.php : fungsi untuk melakukan print (cetak gambar)
/print/pdfprint.php : fungsi khusus untuk membuat file pdf
/print/tcpdf.php : fungsi untuk pdf
/xajax/… : fungsi scripts ajax
5.3.5. Javascript
fungsi Javascript:
common.js: fungsi umum aplikasi
custom.js: kostumisasi aplikasi seperti hyperlink
forms.js: fungsi untuk form dan memilih skala
geometry.js: library untuk mengukur jarak
layout.js: layout parameter seperti (width/height, left/top) khusus tampilan
mapserver.js: fungsi utama untuk membuat peta dari file-file spasial, query dan
lainnya.
pmapper.js: fungsi, resize, GUI.
pmdraw.js: fungsu untuk mengukur jarak di peta
pminit.js: inisialisasi fungsi
pmjson.js: fungsi untuk query
pmquery.js: fungsi untuk query
search.js: fungsi untuk pencarian
sorttable.js: pengaturan untuk hasil pencarian. A-Z atau Z-A
toc.js: definisi untuk legenda
dtree.js: struktur untuk menampilkan layer di legenda
wz_jsgraphics.js: menggambarkan garis pada saat pengukuran di peta
xmlhttp.js: XMLHttp/AJAX fungsi
zslider.js: fungsi untuk tools zoom geser
zoombox.js: DHTML zoom/pan
5.4.Penyimpanan data
Untuk mempermudah dalam pembuatan web-sig, alangkah baiknya dalam
penyimpanan data dibuat struktur sejelas mungkin (masalah letak). Hal ini untuk
meminimalisir kesalahan yang terjadi, seperti tidak munculnya peta. Untuk tutorial ini
folder “data” diletakan sebagai subdirektori dari pmapper, hal ini dilakukan agar pada
saat pemindahan aplikasi tidak perlu lagi melakukan konfigurasi lagi.
Dalam folder “data” di usahakan dibuat sestruktur mungkin, seperti mana file vektor
dan mana file raster dan file-file lainnya yang akan mendukung dalam pembuatan
web-sig.
Untuk totorial kali ini data akan disimpan sebagai subirektori dari pmapper
C:\ms4w\apps\pmapper\pmapper-3.2.0\data\...
MODUL-MODUL
1. Membuat config untuk latihan
Langkah-langkah untuk menampilkan peta
1) Copy folder latihan kedalam direktori C:\ms4w\apps\map-ciamis\web-
ciamis\config\
2) Masuk kedalam direktori latihan tersebut
3) Pada direktori tersebut berisi file latihan.map, custom.js dan js_config.php.
4) Berikut ini sebagian dari isi file latihan.map
5) Membuat file config_latihan.xml di direktori C:\ms4w\apps\map-ciamis\web-
ciamis\config\
6) Berikut ini isi sebagian dari file config_latihan.xml
7) Mengecek pada browser internet apakah konfigurasi yang dilakukan telah
benar dengan mengetik alamat berikut ini
http://localhost/map-ciamis/map.phtml?config=latihan
2. Menampilkan peta inset
Untuk menampilkan peta inset, terlebih dahulu harus kita buat file image (bisa *.jpg, *.png,
atau *.bmp). cara membuatnya, buka kembali aplikasi Qgis. Kemudian klik fileexport as
image.
Kemudian save image tersebut sebagai file *.png dan simpan file tersebut di folder
C:\ms4w\apps\map-ciamis\web-ciamis\images\reference_latihan.png
Seletah itu buka pmapper_latihan.map dan ubah bagian REFERENCE
Setelah itu refresh…
3. Interaktif Peta (zoom in, zoom out, dan pan)
Fungsi secara otomatis berfungsi apabila di peta telah muncul gambar peta yang di
harapkan.
4. Legenda
Apabila konfigurasi config_latihan benar, maka secara otomasti legenda pun akan muncul.
Apabila tidak silahkan untuk melalukan pengecekan ulang pada file latihan.map dan
config_latihan.ini
5. Identifikasi
Fungsi identifikasi akan menampilkan informasi mengenai atribut apabila pada file
latihan.map telah didefisinikan terlebih dahulu. Untuk itu rubah parameter layer di
latihan.map menjadi
6. Pencarian
Pencarian akan berfungsi apabila kita terlebih dahulu melakukan konfigurasi pada
config_latihan.xml yang berada di direktori latihan. C:\ms4w\apps\map-ciamis\web-
ciamis\config\config_latihan.xml
Rubah konfigurasi
7. Peta Tematik
Untuk menggambarkan peta secara tematik, kita harus membuat layer baru, misalnya kita
akan membuat layer tematik rasio guru dan sekolah (MI)
########################################################################## ###################### 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.mi_negeri_swasta_u using unique gid using SRID=32748" ################################# METADATA "DESCRIPTION" "Rasio Guru : Sekolah (MI)" #"RESULT_FIELDS" "KECAMATAN, SEKOLAH, MURID, GURU" # Uncomment if Folder Data "RESULT_FIELDS" "kecamatan, sekolah, murid, guru" # Uncomment if PostGIS "RESULT_HEADERS" "Kecamatan, Sekolah, Murid, Guru" END CLASS NAME "0 - 1.5" COLOR 230 254 230 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] >= 0 and [ras_gr_skl] <= 1.5) END # CLASS CLASS NAME "1.5 - 3" COLOR 175 254 175 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] > 1.5 and [ras_gr_skl] <=3) END # CLASS CLASS NAME "3 - 4.5" COLOR 0 255 0 OUTLINECOLOR 10 10 10 EXPRESSION ([ras_gr_skl] > 3 and [ras_gr_skl] <= 4.5) END # CLASS CLASS NAME "4.5 - 6"