Scribd Logo
Upload

Welcome to Scribd!

  • Membangun Interface Web GIS Menggunakan Opengeo Client

    Uploaded by

    Dimas Suryo Prawiro Kencono
    1K views9 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1K views9 pages

    Membangun Interface Web GIS Menggunakan Opengeo Client

    Uploaded by

    Dimas Suryo Prawiro Kencono

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    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 ClintSDK. 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 3 4 5 6 7 8 9 10 11

    >suite-sdk create mywebgis Creating application ... Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xml checkpath: create: Created dir: D:\GIS\Code\mywebgis Copying 1043 files to D:\GIS\Code\mywebgis Created application: D:\GIS\Code\mywebgis BUILD SUCCESSFUL Total time: 1 second

    Struktur Project

    1 2 3 4 5 6

    +---mywebgis +---src +---app +---app.js +---ext +---geoext +---gxp

    7 8 9 10 11 12

    +---openlayers +---ux +---theme +---app +---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.

    1 2 3 4 5

    >suite-sdk debug -g http://localhost:8080/geoserver mywebgis Starting debug server for application (use CTRL+C to stop) Buildfile: C:\GIS\OpenGeo\OpenGeo Suite\sdk\build.xml checkpath: 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

    1 2 3 4 5 6 7 8 9 10 11 12 13

    index.html <!DOCTYPE html> <html> <head> .................. <script type="text/javascript" src="src/ext/adapter/ext/extbase.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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    (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 webmapping 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 3 4 5 6 7 8 9 10 11 12 13 14

    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.

    1 2

    tools:[{ ptype:"gxp_layertree",

    3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    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.

    1 2 3 4 5 6 7 8 9 10 11

    // layer sources sources:{ 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.

    1 2 3 4 5

    // map and layers map:{ id:"mymap", // id needed to reference map in portalConfig above title:"Map", projection:"EPSG:900913", center:[-10764594.758211, 4523072.3184791],

    6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

    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.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    items:[{

    id:"northpanel", xtype:"panel", region:"north", html:"<img src='theme/app/img/logo_esdm.png' height='70px' width='70px' style= "<div style='float: left; font:normal bold 30px Arial; margin: 6px;'>Forum Mineral</div>", layout:"fit", bodyCfg: {style:'background-color:#6688DD'} },{ id:"centerpanel", ..... ..... }]

    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 2 3 4 5 6 7 8

    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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

    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

    You might also like