Anda di halaman 1dari 12

Pengembangan Aplikasi Web GIS

Web Map Service (WMS) dengan MapServer dan OpenLayers

Auriza Akbar 16 Januari 2011

1 Instalasi MapServer for Windows (MS4W)


1.1 Download MS4W
http://www.maptools.org/dl/ms4w/ms4w_3.0.3.zip (38 MB)

1.2 Unzip MS4W


Unzip ke direktori root suatu drive, misalnya C:/. Jika berhasil akan muncul direktori baru /ms4w.

1.3 Install Apache MS4W web server


Buka cmd.exe sebagai administrator dan jalankan skrip /ms4w/apache-install.bat.
C:\ms4w> apache-install.bat Installing the Apache MS4W Web Server service The Apache MS4W Web Server service is successfully installed. Testing httpd.conf.... Errors reported here must be corrected before the service can be started. httpd: Could not reliably determine the server's fully qualified domain name, us ing 127.0.0.1 for ServerName The Apache MS4W Web Server service is starting. The Apache MS4W Web Server service was started successfully.

Untuk menghilangkan pesan error di atas, edit /ms4w/Apache/conf/httpd.conf pada baris 173.
ServerName localhost:80

Restart Apache dengan menjalankan skrip /ms4w/apache-restart.bat.

1.4 Tes instalasi MS4W


Buka web browser and browse ke http://localhost.

2 Persiapan Aplikasi Web Baru


2.1 Buat direktori aplikasi baru di /ms4w/apps/workshop 2.2 Buat mapfile kosong di direktori /ms4w/apps/workshop/map
Buat file bernama jabar.map di direktori tersebut. Panduan ini akan memakai contoh data geografis daerah Jawa Barat.

2.3 Download contoh data shapefile


Download http://auriza.site40.net/upload/shp.zip dan unzip ke direktori yang sama seperti di atas.

2.4 Tambahkan konfigurasi Apache di /ms4w/httpd.d


Buat file bernama /ms4w/httpd.d/httpd_workshop.conf dan isikan dengan konfigurasi Apache di bawah ini.
Alias /workshop "/ms4w/apps/workshop" <Directory "/ms4w/apps/workshop"> AllowOverride None Order Allow,Deny Allow from all </Directory> <Directory "/ms4w/apps/workshop/map"> Order Deny,Allow Deny from all </Directory> SetEnv jabar /ms4w/apps/workshop/map/jabar.map

2.5 Restart Apache


Jalankan skrip /ms4w/apache-restart.bat.

3 Penulisan Mapfile
Mapfile merupakan input bagi program MapServer. Mapfile berisi rincian sumber data geografis dan pewarnaan untuk data tersebut.

3.1 Struktur Mapfile

Secara umum, mapfile berisi satu objek map dengan beberapa layer. Proyeksi pada objek map merupakan proyeksi output, sedangkan proyeksi pada objek layer merupakan proyeksi data input.

3.2 Kerangka Dasar Mapfile


Berikut adalah kerangka dasar mapfile yang berisi objek map. Di dalam objek map dapat ditambahkan beberapa objek layer. Untuk contoh kali ini, objek layer masih kosong. Mapfile berisi objek dan pasangan key-value. Untuk objek map, key dan objek yang penting adalah name, extent, imagecolor, dan projection.
extent

merupakan batasan peta dalam satuan derajat desimal: xmin, ymin, xmax, ymax. merupakan warna background peta. merupakan proyeksi output peta, biasanya ditulis dalam kode EPSG.

imagecolor projection

Komentar pada mapfile diawali dengan tanda pagar (#). Tiap objek harus ditutup dengan keyword end.

Berikan indentasi supaya susunan objek dapat dibedakan dengan mudah.


map name "jabar" extent 105 -8 109 -5.8 imagecolor 255 255 255 projection "init=epsg:4326" end # tambahkan metadata dan layer-layer di sini end

3.3 Penambahan Layer Polygon


Berikut adalah contoh penulisan objek layer untuk data administrasi yang berjenis polygon.
layer name "administrasi" status on type polygon data "shp/jabar.shp" projection "init=epsg:4326" end class name "Administrasi" style color 198 217 161 outlinecolor 228 237 209 end end end

3.4 Penambahan Layer Line


Berikut adalah contoh penulisan objek layer untuk data jalan yang berjenis line.
layer name "jalan" status on type line data "shp/jalan.shp" projection "init=epsg:32748" end class name "Jalan" style color 255 0 0 end end end

3.5 Penambahan Layer Point


Berikut adalah contoh penulisan objek layer untuk data BTS yang berjenis point.
layer name "bts" status on type point data "shp/sta_bts.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.6 Pengujian Mapfile


Untuk menguji apakah mapfile yang kita buat sudah benar, buka browser dan akses langsung ke http://localhost/cgi-bin/mapserv.exe?map=jabar&mode=map&layers=all&imgsize=400+300.

4 Penambahan Metadata WMS pada Mapfile


WMS penting untuk interoperabilitas dengan data dari server lain yang juga mendukung standar WMS. Untuk menambahkan kemampuan WMS, maka pada mapfile perlu ditambahkan metadata WMS pada objek map dan tiap objek layer. Pada tiap objek layer juga perlu ditambahkan template.

4.1 Metadata Objek map


Tambahkan metadata di bawah ini di dalam objek map.
web metadata "wms_title" "wms_onlineresource" "wms_srs" "wms_enable_request" end end "Peta BTS Jawa Barat" "http://localhost/cgi-bin/mapserv.exe?map=jabar&" "EPSG:4326" "*"

4.2 Metadata Objek layer


Tambahkan metadata di bawah ini di dalam objek layer. Berikut adalah contoh metadata untuk layer administrasi. Isian wms_include_items disesuaikan dengan nama tabel pada shapefile.
metadata "wms_title" "Administrasi" "wms_include_items" "PROVINSI,KABUPATEN,SQKM,POP1" end template null

4.3 Mapfile Lengkap


Berikut adalah mapfile yang sudah lengkap.
map name "jabar" extent 105 -8 109 -5.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.exe?map=jabar&" "EPSG:4326" "*"

end

layer name "administrasi" status on type polygon data "shp/jabar.shp" projection "init=epsg:4326" end metadata "wms_title" "Administrasi" "wms_include_items" "PROVINSI,KABUPATEN,SQKM,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.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" "BTS" "wms_include_items" "ID,OPERATOR,TGL_INSTAL,TINGGI,KETINGGIAN" end template null class name "BTS"

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

5 Menampilkan WMS dengan OpenLayers


OpenLayers digunakan untuk menampilkan peta dinamis dari server WMS.

5.1 Download OpenLayers


http://openlayers.org/download/OpenLayers-2.11.zip (8.7 MB)

5.2 Unzip OpenLayers


Unzip ke direktori aplikasi /ms4w/apps/workshop.

5.3 Buat Kerangka HTML


Buat file HTML di /ms4w/apps/workshop/jabar.html.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Peta Stasiun BTS Jawa Barat</title> <link rel="stylesheet" href="OpenLayers-2.11/theme/default/style.css" /> </head> <body> <h1>Peta Stasiun BTS Jawa Barat</h1> <div id="map" style="width:512px; height:256px;"></div> <script src="OpenLayers-2.11/OpenLayers.js"></script> <!-- tambahkan kode openlayers di sini --> </body> </html>

5.4 Kode OpenLayers Dasar


Kode JavaScript berikut akan menampilkan peta Jawa Barat dalam satu layer WMS. Setelah itu browse ke http://localhost/workshop/jabar.html.
<script> window.onload = function() { var map = new OpenLayers.Map("map"); var url = "http://localhost/cgi-bin/mapserv.exe?map=jabar&"; var jabar = new OpenLayers.Layer.WMS("BTS Jawa Barat", url, { layers: "administrasi,jalan,bts", format: "image/png", bgcolor: "99b3cc" }); map.addLayers([jabar]); // tambahkan GetFeatureInfo di sini map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToExtent(new OpenLayers.Bounds(105, -8, 109, -5.8)); }; </script>

5.5 Kode OpenLayers untuk Multiple Layers


Kode JavaScript berikut akan menampilkan peta Jawa Barat yang dipisahkan untuk setiap layernya. Layer administrasi diset sebagai base layer, sedangkan layer lainnya diset sebagai overlay. Ubah kode di atas dengan kode di bawah ini.
<script> window.onload = function() { var map = new OpenLayers.Map("map"); var url = "http://localhost/cgi-bin/mapserv.exe?map=jabar&"; var adm = new OpenLayers.Layer.WMS("Administrasi", url, { layers: "administrasi", format: "image/png", bgcolor: "99b3cc" }); var jln = new OpenLayers.Layer.WMS("Jalan", url, { layers: "jalan", transparent: "true" }, { visibility: "false" }); var bts = new OpenLayers.Layer.WMS("BTS", url, { layers: "bts", transparent: "true" }); map.addLayers([adm, jln, bts]); // tambahkan GetFeatureInfo di sini map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToExtent(new OpenLayers.Bounds(105, -8, 109, -5.8)); }; </script>

5.6 Kode OpenLayers untuk GetFeatureInfo


Tambahkan kode JavaScript berikut ini untuk menambahkan kontrol GetFeatureInfo, sehingga jika peta diklik akan menampilkan informasi fitur pada tiap layer. Setelah menambahkan kode ini, klik pada salah satu titik di peta untuk menampilkan info fitur.
var info = new OpenLayers.Control.WMSGetFeatureInfo({ layers: [adm, jln, bts], infoFormat: "text/plain", maxFeatures: 1, queryVisible: true, eventListeners: { getfeatureinfo: function(e) { map.addPopup( new OpenLayers.Popup.FramedCloud( "popupInfo", map.getLonLatFromPixel(e.xy), null, "<pre>" + event.text + "</pre>", null, true )); }}}); map.addControl(info); info.activate();

5.7 Menambahkan Layer WMS Online


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