membangun interface web gis menggunakan opengeo client
TRANSCRIPT
Membangun interface web GIS menggunakan Opengeo Client-SDKMar 24, 2013 ~ Leave a Comment ~ Written by awahyudi
Graphical User Interface merupakan komponen yang penting dalam development aplikasi
webgis. Karena lewat media web mapping ini data-data GIS dapat ditampilkan dan
disampaikan kepada user. Opengeo suite, selain telah menyediakan aplikasi GeoExplorer,
juga telah mem-bundle tool untuk megembangkan web mapping yaitu Clint-SDK. Aplikasi
web semacam GeoExplorer dapat dibuat dicustomisasi dengan cepat dan mudah dalam
format Rich Internet Application (RIA) dengan kemampuan komunikasi yang mengikuti
standar OGC Web Service.
Seiring dengan kemajuan teknologi Web 2.0 dengan jargon RIA, AJAX, web service dll
aplikasi web-pun tampil dengan modus yang lebih interaktif dan mudah digunakan.
Beberapa AJAX Framework dikembangkan untuk kebutuhan ini misalkan ExtJs, JQuery, Dojo
Toolkit, YUI dll. Aplikasi web mapping juga menjadikan framework ini sebagai fondasi untuk
mengmbangkan view-layer seperti GeoMoose dan ArcGIS memanfaatkan Dojo, GeoXt dan
GXP menggunaan ExtJs, MapBender memanfaatkan JQuery.
Client-SDK adalah development tool untuk mengembangkan aplikasi
berbasis GXP dan GeoExt. Kedua library ini dikembangkan dari framework ExtJs dengan
memberikan kemampuan bekerja dengan data-data spatial pada sisi client/web browser.
Sebagai inti dari aplikasi ini adalah OpenLayers yang digunakan sebagai canvas untuk
menampilkan data-data spatial tersebut menjadi bentuk visual layer peta.
1. Membuat project Client-SDK
2. Review code dari project yang digenerate
3. Customisasi Interface
1. Membuat project Client-SDK
1234567891011
>suite-sdk create mywebgisCreating application ...Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xmlcheckpath:create:Created dir: D:\GIS\Code\mywebgisCopying 1043 files to D:\GIS\Code\mywebgisCreated application: D:\GIS\Code\mywebgis
BUILD SUCCESSFULTotal time: 1 second
Struktur Project
1 +---mywebgis +---src
23456789101112
¦ +---app ¦ +---app.js ¦ +---ext ¦ +---geoext ¦ +---gxp ¦ +---openlayers ¦ +---ux +---theme ¦ +---appT +---index.html
Dalam struktur project diatas src/ext, src/geoext, src/gxp, src/openlayers, src/ux adalah
folder library ExtJs, GeoExt, GXP, OpenLayers dan UX. Library ini akan di-load disisi client
oleh aplikasi/web browser. Fungsi library dapat dibaca pada dokumnetasi masing-masing.
Folder theme, sebagaimana namanya untuk membangun theme dari CSS. Sisanya
index.html dan src/app/app.js, inilah dua file menjadi tanggung jawab developer web apping
untuk dicustomisasi. Untuk melihat tampilan project yang telah dibuat jalankan perintah
suite-sdk debug, pastikan geoserver sudah berjalan pada address:port localhost:8080.
12345
>suite-sdk debug -g http://localhost:8080/geoserver mywebgisStarting debug server for application (use CTRL+C to stop)Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xmlcheckpath:debug:
Tampilan awal
2. Code review
Pada saat aplikasi berjalan maka file pertama yang akan dijalankan adalah index.html.
Potongan index.html dapat dilihat pada code dibawah
12345678910111213
index.html<!DOCTYPE html><html> <head> .................. <script type="text/javascript" src="src/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="src/ext/ext-all.js"></script> .................. <script type="text/javascript" src="lib/app.js"></script> .................. </head> <body></body></html>
Dari cuplikan index.html diatas terlihat bahwa index.html hanya diisi pada bagian
sedangkan bagian justru dibiarkan kosong. Bagian merupakan lokasi untuk melakukan
include script, biasanya CSS dan javascript. Script ext-base.js dan ext-all.js adalah script
utama ExtJs, sedang lib/app.js adalah javascript yang dibuatkan oleh Client-SDK pada saat
aplikasi akan di-debug atau di-deploy di server. Script lib/app.js bisa kita buka pada saat
debug seperti proses diatas, Buka aplikasi di web browser lalu dengan klik kanan->view
source kemudian buka link lib/app.js. Potongannya bisa dilihat dibawah
lib/app.js
1234567891011121314
(function() { var jsfiles = ['@/src/gxp/script/util.js','@/src/openlayers/lib/OpenLayers/SingleFile.js',.......'@/src/geoext/lib/GeoExt/widgets/MapPanel.js',........'@/src/gxp/script/plugins/LayerTree.js',.....'@/src/ux/RowExpander.js',......'@/src/app/app.js'];......
})();
Script lib/app.js ini berfungsi sebagai loader dari library/script yang dibutuhkan seperti yang
telah disebutkan dan terakhir meng-include /src/app/app.js. File inilah yang akan selanjutnya
akan dimodofikasi untuk membangun web-mapping interface.
src/app/app.js
Script src/app/app.js merupakan javascript dalam format source code ExtJs, yang lebih mirip
script konfigurasi daripada algoritma pemrograman, format konfigurasi ini memang salah
satu kemudahan dari ExtJs. Isinya mendefinisikan sebuah class utama yaitu gxp.Viewer yang
merupakan viewport/mainwindow dari interface web. Konfigurasi meliputi:
1. layout
Border layout merupakan layout yang membagi panel (gxp.Viewer) menjadi 5 area, yaitu:
north, west, south, east dan center
2. region
Region adalah lokasi komponen (gxp.Viewer) didalam parent-nya ( html)
3. items
Berisi list object/komponen berupa panel atau container yang dipasang pada gxp.Viewer,
lokasinya diatur sesuai dengan region masing-masing. Secara default akan dibuat dua
komponen utama yaitu centerpanel (panel) dan westpanel (container).
1234567891011121314
items:[{ id:"centerpanel", xtype:"panel", layout:"fit", region:"center", border:false, items:["mymap"] },{ id:"westpanel", xtype:"container", layout:"fit", region:"west", width:200 }]
4. tools
Berisi list gui kontrol, secara default meliputi gxp_layertree (gxp.plugins.LayerTree),
gxp_addlayers (gxp.plugins.AddLayers), gxp_removelayer (gxp.plugins.RemoveLayer),
gxp_zoomtoextent (gxp.plugins.ZoomToExtent), gxp_zoom (gxp.plugins.Zoom),
gxp_navigationhistory (gxp.plugins.NavigationHistory). actionTarget adalah lokasi
dipasangnya kontrol tsb, yaitu tbar(top bar parent) dan bbar (bottom bar parent). xtype
adalah namespace yang didefiniskan oleh ExtJs, sedang ptype adalah namespace yang
dibuat gxp untuk memberi nama komponen-komponen gxp.plugins. gxp_layertree dipasang
pada westpanel, sehinga terlihat pada sisi kiri aplikasi terdapat daftar layer dengan bentuk
tree.
12345678910111213141516171819202122232425
tools:[{ ptype:"gxp_layertree", outputConfig:{ id:"tree", border:true, tbar:[] // we will add buttons to "tree.bbar" later }, outputTarget:"westpanel" },{ ptype:"gxp_addlayers", actionTarget:"tree.tbar" },{ ptype:"gxp_removelayer", actionTarget:["tree.tbar", "tree.contextMenu"] },{ ptype:"gxp_zoomtoextent", actionTarget:"map.tbar" },{ ptype:"gxp_zoom", actionTarget:"map.tbar" }, { ptype:"gxp_navigationhistory", actionTarget:"map.tbar" }]
5. sources
Menyatakankan sumber/server yang menyediakan layanan GIS baik WMS, WFS atau layanan
map lain seprti OSM, Bing, Google, MapQuest.
1234567891011
// layer sourcessources:{ local:{ ptype:"gxp_wmscsource", url:"/geoserver/wms", version:"1.1.1" }, osm:{ ptype:"gxp_osmsource" }}
6. map
Konfigurasi layer dengan sumber seperti yang telah disebutkan dalam config sources.
123
// map and layersmap:{ id:"mymap", // id needed to reference map in portalConfig above title:"Map",
45678910111213141516171819202122232425
projection:"EPSG:900913", center:[-10764594.758211, 4523072.3184791], zoom:3, layers:[{ source:"osm", name:"mapnik", group:"background" },{ source:"local", name:"usa:states", selected:true } ], items:[ { xtype:"gx_zoomslider", vertical:true, height:100 } ]}
3.Customisasi Interface
Sejauh ini belum ada satu barispun yang ditambahkan pada code yang di-generate. Sedikit
perubahan akan kita buat yaitu menambahkan banner/logo pada bagian atas halaman serta
menambahkan layer dari geoserver local.
1. Membuat banner/logo
Banner biasanya berada di bagian atas halaman yang berisi logo dan nama situs. Seperti
yang telah dijelaskan bahwa main-window dibuat menggunakan gxp.Viewer dan layout
aplikasi dibangun menggunakan border layout. Maka untuk menambahkan banner dibuat
item/komponen baru pada konfigurasi items, komponen yang dibuat nmempunyai xtype
panel, id northpanel, region north, dan berisi logo dan judul Forum IT ESDM.
12345678910111213
items:[{ id:"northpanel", xtype:"panel", region:"north", html:"<img src='theme/app/img/logo_esdm.png' height='70px' width='70px' style='float: left; padding: 5px'/>" + "<div style='float: left; font:normal bold 30px Arial; margin: 6px;'>Forum Teknologi Informasi<p>Energi dan Sumber Daya Mineral</div>", layout:"fit", bodyCfg: {style:'background-color:#6688DD'} },{ id:"centerpanel", ..... .....
}]
14Jalankan kembali suite-sdk debug mywebgis dan buka kembali halaman web mapping.
2. Menambahkan layer dari geoserver local
Dari latihan sebelumnya sudah dibuat layer batas-batas adminitrasi Indonesia, peta ini yang
akan ditambahkan pada aplikasi web yang baru saja dibuat. Pertama pastikan bahwa server
local sudah didaftarkan pada konfifurasi sources, beruntung client-sdk sudah mebambahkan
baris ini.
12345678
sources:{ local:{ ptype:"gxp_wmscsource", url:"/geoserver/wms", version:"1.1.1" }, ......}
lalu tambahkan layer yang akan ditampilkan pada konfigurasi layers pada komfigurasi
maps->layers
123456789101112131415161718
map:{...... layers:[{ source:"osm", ..... },{ source:"local", name:"indonesia:country" },{ source:"local", name:"indonesia:provinces" },{ source:"local", name:"indonesia:districts" } ], ......}
Demikian pengenalan singkat tentang client-sdk. Pada tulisan selanjutnya akan dibahas
gxp.plugins yang lain dan base layer menggunakan google dll