webgis-mapserver-openlayers

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" AllowOverride None Order Allow,Deny Allow from all Order Deny,Allow Deny from all 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. merupakan batasan peta dalam satuan derajat desimal: xmin, ymin, xmax, ymax.

•

extent

•

imagecolor

merupakan warna background peta.

•

projection

merupakan proyeksi output peta, biasanya ditulis dalam kode EPSG.

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

"Peta BTS Jawa Barat" "http://localhost/cgi-bin/mapserv.exe?map=jabar&" "EPSG:4326" "*"

end

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

end

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" "*"

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

style symbol "circle" size 5 color 255 255 0 outlinecolor 127 127 0 end

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. Peta Stasiun BTS Jawa Barat Peta Stasiun BTS Jawa Barat

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. 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)); };

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. 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)); };

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, "" + event.text + "", 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]);