Membangun Interface Web GIS Menggunakan Opengeo Client

Membangun interface web GIS menggunakan Opengeo
Client-SDK
Mar 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
1
2 >suite-sdk create mywebgis
Creating application ...
3 Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xml
4 checkpath:
5 create:
6 Created dir: D:\GIS\Code\mywebgis
7 Copying 1043 files to D:\GIS\Code\mywebgis
Created application: D:\GIS\Code\mywebgis
8
9 BUILD SUCCESSFUL
10 Total time: 1 second
11
Struktur Project
1 +---mywebgis
2 +---src
¦ +---app
3 ¦ +---app.js
4 ¦ +---ext
5 ¦ +---geoext
6 ¦ +---gxp
7 ¦ +---openlayers
8 ¦ +---ux
+---theme
9 ¦ +---app
10 T +---index.html
11
12
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.
1 >suite-sdk debug -g http://localhost:8080/geoserver mywebgis

2 Starting debug server for application (use CTRL+C to stop)
3 Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xml
4 checkpath:
debug:
5
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
1
index.html
2 <!DOCTYPE html>
3 <html>
4 <head>
5 ..................
6 <script type="text/javascript" src="src/ext/adapter/ext/ext-
base.js"></script>
7 <script type="text/javascript" src="src/ext/ext-all.js"></script>
8 ..................
9 <script type="text/javascript" src="lib/app.js"></script>
10 ..................
</head>
11 <body></body>
12 </html>
13
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
1
2 (function() {
3 var jsfiles = ['@/src/gxp/script/util.js',
'@/src/openlayers/lib/OpenLayers/SingleFile.js',
4
.......
5 '@/src/geoext/lib/GeoExt/widgets/MapPanel.js',
6 ........
7 '@/src/gxp/script/plugins/LayerTree.js',
8 .....
'@/src/ux/RowExpander.js',
9 ......
10 '@/src/app/app.js'];
11 ......
12
13 })();
14
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).
1
2 items:[{
3 id:"centerpanel",
4 xtype:"panel",
layout:"fit",
5 region:"center",
6 border:false,
7 items:["mymap"]
8 },{
9 id:"westpanel",
xtype:"container",
10 layout:"fit",
11 region:"west",
12 width:200
13 }]
14
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.
1 tools:[{
2 ptype:"gxp_layertree",
3 outputConfig:{
4 id:"tree",
border:true,
5 tbar:[] // we will add buttons to "tree.bbar" later
6 },
7 outputTarget:"westpanel"
8 },{
ptype:"gxp_addlayers",
9 actionTarget:"tree.tbar"
10 },{
11 ptype:"gxp_removelayer",
12 actionTarget:["tree.tbar", "tree.contextMenu"]
13 },{
ptype:"gxp_zoomtoextent",
14 actionTarget:"map.tbar"
15 },{
16 ptype:"gxp_zoom",
}, {
18 ptype:"gxp_navigationhistory",
20 }
21 ]
22
23
24
25
5. sources
Menyatakankan sumber/server yang menyediakan layanan GIS baik WMS, WFS atau layanan map lain seprti OSM,
Bing, Google, MapQuest.
1
2 // layer sources
3 sources:{
local:{
4 ptype:"gxp_wmscsource",
5 url:"/geoserver/wms",
6 version:"1.1.1"
7 },
osm:{
8 ptype:"gxp_osmsource"
9 }
10 }
11
6. map
Konfigurasi layer dengan sumber seperti yang telah disebutkan dalam config sources.
1 // map and layers

2 map:{
id:"mymap", // id needed to reference map in portalConfig above
3 title:"Map",
4 projection:"EPSG:900913",
5 center:[-10764594.758211, 4523072.3184791],
6 zoom:3,
7 layers:[{
source:"osm",
8 name:"mapnik",
9 group:"background"
10 },{
11 source:"local",
name:"usa:states",
12 selected:true
13 }
14 ],
15 items:[
16 {
xtype:"gx_zoomslider",
17 vertical:true,
18 height:100
19 }
20 ]
}
21
22
23
24
25
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.
1
items:[{
2 id:"northpanel",
3 xtype:"panel",
4 region:"north",
5 html:"<img src='theme/app/img/logo_esdm.png' height='70px' width='70px' style=
6 "<div style='float: left; font:normal bold 30px Arial; margin: 6px;'>Forum
Mineral</div>",
7 layout:"fit",
8 bodyCfg: {style:'background-color:#6688DD'}
9 },{
10 id:"centerpanel",
.....
11 .....
12
13 }]
14
Jalankan 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.
1
sources:{
2 local:{
3 ptype:"gxp_wmscsource",
4 url:"/geoserver/wms",
5 version:"1.1.1"
6 },
......
7 }
8
lalu tambahkan layer yang akan ditampilkan pada konfigurasi layers pada komfigurasi maps->layers
1
2
map:{
3 ......
4 layers:[{
5 source:"osm",
6 .....
},{
7 source:"local",
8 name:"indonesia:country"
9 },{
10 source:"local",
11 name:"indonesia:provinces"
},{
12 source:"local",
13 name:"indonesia:districts"
14 }
15 ],
......
16 }
17
18
Demikian pengenalan singkat tentang client-sdk. Pada tulisan selanjutnya akan dibahas gxp.plugins yang lain dan
base layer menggunakan google dll

Membangun Interface Web GIS Menggunakan Opengeo Client

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membangun Interface Web GIS Menggunakan Opengeo Client

Diunggah oleh

Hak Cipta:

Format Tersedia

Membangun interface web GIS menggunakan Opengeo

1. Membuat project Client-SDK

1 >suite-sdk debug -g http://localhost:8080/geoserver mywebgis

1 // map and layers

Anda mungkin juga menyukai