Pengembangan Aplikasi Web GIS

Web Map Service (WMS) dengan MapServer dan OpenLayers

Auriza Akbar 16 Januari 2011

4 Tes instalasi MS4W Buka web browser and browse ke http://localhost.conf pada baris 173. The Apache MS4W Web Server service was started successfully. 1.org/dl/ms4w/ms4w_3. Errors reported here must be corrected before the service can be started.bat. httpd: Could not reliably determine the server's fully qualified domain name.0.3 Install Apache MS4W web server Buka cmd. edit /ms4w/Apache/conf/httpd.0..2 Unzip MS4W Unzip ke direktori root suatu drive. ServerName localhost:80 Restart Apache dengan menjalankan skrip /ms4w/apache-restart..1 Download MS4W • http://www.bat Installing the Apache MS4W Web Server service The Apache MS4W Web Server service is successfully installed. Testing httpd. 1. us ing 127.1 Instalasi MapServer for Windows (MS4W) 1.maptools.0.. Jika berhasil akan muncul direktori baru /ms4w. misalnya C:/. Untuk menghilangkan pesan error di atas.3. .1 for ServerName The Apache MS4W Web Server service is starting. C:\ms4w> apache-install.bat.zip (38 MB) 1.conf.exe sebagai administrator dan jalankan skrip /ms4w/apache-install.

site40.4 Tambahkan konfigurasi Apache di /ms4w/httpd. 2.d/httpd_workshop. 2.conf dan isikan dengan konfigurasi Apache di bawah ini. . Panduan ini akan memakai contoh data geografis daerah Jawa Barat.1 Buat direktori aplikasi baru di /ms4w/apps/workshop 2.2 Persiapan Aplikasi Web Baru 2. Alias /workshop "/ms4w/apps/workshop" <Directory "/ms4w/apps/workshop"> AllowOverride None Order Allow.d Buat file bernama /ms4w/httpd.bat.net/upload/shp.map di direktori tersebut.3 Download contoh data shapefile Download http://auriza.map 2.Deny Allow from all </Directory> <Directory "/ms4w/apps/workshop/map"> Order Deny.Allow Deny from all </Directory> SetEnv jabar /ms4w/apps/workshop/map/jabar.2 Buat mapfile kosong di direktori /ms4w/apps/workshop/map Buat file bernama jabar.zip dan unzip ke direktori yang sama seperti di atas.5 Restart Apache Jalankan skrip /ms4w/apache-restart.

1 Struktur Mapfile Secara umum. merupakan proyeksi output peta. • • • extent merupakan batasan peta dalam satuan derajat desimal: xmin. imagecolor. dan projection. xmax. merupakan warna background peta. Proyeksi pada objek map merupakan proyeksi output. sedangkan proyeksi pada objek layer merupakan proyeksi data input. key dan objek yang penting adalah name.3 Penulisan Mapfile Mapfile merupakan input bagi program MapServer. imagecolor projection Komentar pada mapfile diawali dengan tanda pagar (#). Untuk objek map. Untuk contoh kali ini. Di dalam objek map dapat ditambahkan beberapa objek layer. 3. biasanya ditulis dalam kode EPSG. Mapfile berisi rincian sumber data geografis dan pewarnaan untuk data tersebut. 3. Mapfile berisi objek dan pasangan key-value. mapfile berisi satu objek map dengan beberapa layer. Tiap objek harus ditutup dengan keyword end. .2 Kerangka Dasar Mapfile Berikut adalah kerangka dasar mapfile yang berisi objek map. extent. ymin. objek layer masih kosong. ymax.

layer name "jalan" status on type line data "shp/jalan.shp" projection "init=epsg:4326" end class name "Administrasi" style color 198 217 161 outlinecolor 228 237 209 end end end 3.3 Penambahan Layer Polygon Berikut adalah contoh penulisan objek layer untuk data administrasi yang berjenis polygon.8 imagecolor 255 255 255 projection "init=epsg:4326" end # tambahkan metadata dan layer-layer di sini end 3.4 Penambahan Layer Line Berikut adalah contoh penulisan objek layer untuk data jalan yang berjenis line.Berikan indentasi supaya susunan objek dapat dibedakan dengan mudah. map name "jabar" extent 105 -8 109 -5. layer name "administrasi" status on type polygon data "shp/jabar.shp" projection "init=epsg:32748" end class name "Jalan" style color 255 0 0 end end end .

.3.6 Pengujian Mapfile Untuk menguji apakah mapfile yang kita buat sudah benar. buka browser dan akses langsung ke http://localhost/cgi-bin/mapserv.5 Penambahan Layer Point Berikut adalah contoh penulisan objek layer untuk data BTS yang berjenis point.exe?map=jabar&mode=map&layers=all&imgsize=400+300.shp" projection "init=epsg:4326" end class name "BTS" style symbol "circle" size 5 color 255 255 0 outlinecolor 127 127 0 end end end symbol name "circle" type ellipse filled true points 1 1 end end 3. layer name "bts" status on type point data "shp/sta_bts.

Isian wms_include_items disesuaikan dengan nama tabel pada shapefile. Untuk menambahkan kemampuan WMS.exe?map=jabar&" "EPSG:4326" "*" end .1 Metadata Objek map Tambahkan metadata di bawah ini di dalam objek map.POP1" end template null 4.3 Mapfile Lengkap Berikut adalah mapfile yang sudah lengkap.4 Penambahan Metadata WMS pada Mapfile WMS penting untuk interoperabilitas dengan data dari server lain yang juga mendukung standar WMS.exe?map=jabar&" "EPSG:4326" "*" 4.2 Metadata Objek layer Tambahkan metadata di bawah ini di dalam objek layer.KABUPATEN.8 imagecolor 255 255 255 projection "init=epsg:4326" end web metadata "wms_title" "wms_onlineresource" "wms_srs" "wms_enable_request" end "Peta BTS Jawa Barat" "http://localhost/cgi-bin/mapserv. metadata "wms_title" "Administrasi" "wms_include_items" "PROVINSI. map name "jabar" extent 105 -8 109 -5. Pada tiap objek layer juga perlu ditambahkan template.SQKM. maka pada mapfile perlu ditambahkan metadata WMS pada objek map dan tiap objek layer. Berikut adalah contoh metadata untuk layer administrasi. 4. web metadata "wms_title" "wms_onlineresource" "wms_srs" "wms_enable_request" end end "Peta BTS Jawa Barat" "http://localhost/cgi-bin/mapserv.

shp" projection "init=epsg:4326" end metadata "wms_title" "BTS" "wms_include_items" "ID.POP1" end template null class name "Administrasi" style color 198 217 161 outlinecolor 228 237 209 end end end layer name "jalan" status on type line data "shp/jalan.TINGGI.OPERATOR.TGL_INSTAL.KETINGGIAN" end template null class name "BTS" .SQKM.layer name "administrasi" status on type polygon data "shp/jabar.KABUPATEN.shp" projection "init=epsg:32748" end metadata "wms_title" "Jalan" "wms_include_items" "FID" end template null class name "Jalan" style color 255 0 0 end end end layer name "bts" status on type point data "shp/sta_bts.shp" projection "init=epsg:4326" end metadata "wms_title" "Administrasi" "wms_include_items" "PROVINSI.

end end style symbol "circle" size 5 color 255 255 0 outlinecolor 127 127 0 end symbol name "circle" type ellipse filled true points 1 1 end end end .

addLayers([jabar]). var jabar = new OpenLayers. var url = "http://localhost/cgi-bin/mapserv.exe?map=jabar&". format: "image/png".11/OpenLayers.html.Layer.js"></script> <!-.addControl(new OpenLayers.3 Buat Kerangka HTML Buat file HTML di /ms4w/apps/workshop/jabar. -8.zip (8.html.5 Menampilkan WMS dengan OpenLayers OpenLayers digunakan untuk menampilkan peta dinamis dari server WMS. </script> .ScaleLine()).8)).css" /> </head> <body> <h1>Peta Stasiun BTS Jawa Barat</h1> <div id="map" style="width:512px. { layers: "administrasi. height:256px. url.bts".addControl(new OpenLayers. 5. <script> window.onload = function() { var map = new OpenLayers.zoomToExtent(new OpenLayers. 109.4 Kode OpenLayers Dasar Kode JavaScript berikut akan menampilkan peta Jawa Barat dalam satu layer WMS.Control. bgcolor: "99b3cc" }).LayerSwitcher())."></div> <script src="OpenLayers-2.Bounds(105.11. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Peta Stasiun BTS Jawa Barat</title> <link rel="stylesheet" href="OpenLayers-2. map. 5.Control. -5. map.jalan. // tambahkan GetFeatureInfo di sini map.org/download/OpenLayers-2.1 Download OpenLayers • http://openlayers.Map("map").11/theme/default/style.WMS("BTS Jawa Barat". }.tambahkan kode openlayers di sini --> </body> </html> 5.2 Unzip OpenLayers Unzip ke direktori aplikasi /ms4w/apps/workshop. map.7 MB) 5. Setelah itu browse ke http://localhost/workshop/jabar.

var url = "http://localhost/cgi-bin/mapserv.5 Kode OpenLayers untuk Multiple Layers Kode JavaScript berikut akan menampilkan peta Jawa Barat yang dipisahkan untuk setiap layernya.addControl(new OpenLayers. sedangkan layer lainnya diset sebagai overlay. bts]. map. jln. 109.WMSGetFeatureInfo({ layers: [adm.Control.8)).ScaleLine()). . var adm = new OpenLayers.Control. var jln = new OpenLayers.xy).exe?map=jabar&".Map("map").getLonLatFromPixel(e. true )).addControl(info).text + "</pre>". maxFeatures: 1.addLayers([adm. bts]).WMS("Administrasi".addPopup( new OpenLayers. -5. Layer administrasi diset sebagai base layer. queryVisible: true. bgcolor: "99b3cc" }). -8.5. "<pre>" + event.FramedCloud( "popupInfo".Bounds(105.6 Kode OpenLayers untuk GetFeatureInfo Tambahkan kode JavaScript berikut ini untuk menambahkan kontrol GetFeatureInfo. map.onload = function() { var map = new OpenLayers. infoFormat: "text/plain".Control. { layers: "jalan".Popup. Setelah menambahkan kode ini. transparent: "true" }). { layers: "administrasi".zoomToExtent(new OpenLayers.addControl(new OpenLayers. var info = new OpenLayers. var bts = new OpenLayers. // tambahkan GetFeatureInfo di sini map. <script> window. url. Ubah kode di atas dengan kode di bawah ini. }}}). transparent: "true" }. eventListeners: { getfeatureinfo: function(e) { map.Layer.WMS("Jalan". url. null. </script> 5. map.Layer. format: "image/png". { visibility: "false" }). null. url. map.Layer.WMS("BTS".LayerSwitcher()). info. sehingga jika peta diklik akan menampilkan informasi fitur pada tiap layer. }.activate(). map. klik pada salah satu titik di peta untuk menampilkan info fitur. jln. { layers: "bts".

format: "image/png" }). var metacarta = new OpenLayers.5. jln. sehingga peta-peta dapat disatukan dengan mudah.tiles... adm. Berikut adalah contoh penambahan WMS online dari MetaCarta.WMS("MetaCarta". Hal ini karena standar WMS menjamin interoperabilitas antar server.osgeo. bts]). . . map.org/wms/vmap0?". "http://vmap0.7 Menambahkan Layer WMS Online Layer WMS dari server mana pun dapat ditambahkan ke aplikasi kita.addLayers([metacarta. { layers: "basic".Layer.