10/28/13

December | 2012 | PUTU Herry (G651114041)

PUTU HERRY (G651114041)

HOME

ABOUT

TUGAS GEOINFORMATIC

MO NTHL Y A RCHI VES: DE CEMB ER 2012

SEA RCH

December 28, 2012 Leave a comment

AR CHI V ES

Developing OGC Compliant Web Applications with GeoExt

Developing OGC Compliant Web Applications with GeoExt 1. GeoExt Basics

December 2012 October 2012 September 2012

ME TA Register

GeoExt adalah library terbaru dengan perkembangan pesat untuk membentuk aplikasi web berbasis GIS. Library tersebut dibangun berdasarkan Ext JS dan OpenLayers. Pendahulu library ini memberikan komponen UI untuk membentuk aplikasi web dengan underlying komponen data yang solid, pengembangan berikutnya adalah berupa standar de facto untuk web mapping yang dinamik. GeoExt memberikan mapping terkait komponen
herryunud83.wordpress.com/2012/12/

Log in

1/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

UI. GeoExt juga menyatukan akses ke informasi dari servis OGC, Open Layers objects dan sumber arbitrary remote data. Hal ini memudahkan presentasi informasi geospasial untuk berbagai pilihan widgets, mulai dari combo boxes atau grids hingga peta dan pepohonan. GeoExt ramah terhadap API, mengurangi barisan nomor kode yang dibutuhkan, dan menghasilkan aplikasi mapping yang responsive dan menjanjikan. Modul ini memperkenalkan konsep fundamental GeoExt untuk membuat peta. Anda akan membuat peta, membedah peta Anda untuk memahami bagianbagiannya, dan mendapatkan link ke sumber pembelajaran tambahan.ada 3 tahapah dalam GeoExt Basics diantaranya adalah 1.1. Membuat Map Window

Dalam GeoExt, menurut konvensi yang didasari kerangka kerja Ext JS, peta dibuat dalam bentuk Ext.Panel. Petanya berupa objek OpenLayers.Map. Sangat penting untuk memahami bahwa Ext JS merubah paradigma aplikasi web, berlawanan dengan paradigma web page. Artinya kita tidak membuat markup, sehingga bahan dasar untuk aplikasi ini adalah: a minimal html document untuk memuat JavaScript and CSS resources,
JavaScript code untuk aplikasi inisiasi JavaScript code that builds the user interface,

Glue JavaScript code yang menyatukan semua bagian hingga bekerja Contoh sederhana aplikasi GeoExt:

< h t m l > < h e a d > < t i t l e > G e o E x tW o r k s h o pA p p l i c a t i o n < / t i t l e > < l i n kr e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "h r e f = " e x t / r e s o u < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " e x t / a d a p t e r / e x t / e x < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " e x t / e x t a l l . j s " > < / < s c r i p ts r c = " o p e n l a y e r s / l i b / O p e n L a y e r s . j s " > < / s c r i p t >
herryunud83.wordpress.com/2012/12/ 2/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

< s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " g e o e x t / l i b / G e o E x t . < s c r i p tt y p e = " t e x t / j a v a s c r i p t " >

E x t . B L A N K _ I M A G E _ U R L=" e x t / r e s o u r c e s / i m a g e s / d e f a u l t / s . v a ra p p ,i t e m s=[ ] ,c o n t r o l s=[ ] ; E x t . o n R e a d y ( f u n c t i o n ( ){ a p p=n e wE x t . V i e w p o r t ( { l a y o u t :" b o r d e r " , i t e m s :i t e m s } ) ; } ) ; i t e m s . p u s h ( { x t y p e :" g x _ m a p p a n e l " , r e f :" m a p P a n e l " , r e g i o n :" c e n t e r " , m a p :{ n u m Z o o m L e v e l s :1 9 , c o n t r o l s :c o n t r o l s } , e x t e n t :O p e n L a y e r s . B o u n d s . f r o m A r r a y ( [ 1 2 2 . 9 1 1 ,4 2 . 2 9 1 , 1 2 2 . 7 8 7 , 4 2 . 3 9 8 ] ) , l a y e r s :[ n e wO p e n L a y e r s . L a y e r . W M S ( " M e d f o r d " , " / g e o s e r v e r / w m s " , { l a y e r s :" m e d f o r d " } , { i s B a s e L a y e r :f a l s e } ) ] } ) ; c o n t r o l s . p u s h ( n e wO p e n L a y e r s . C o n t r o l . N a v i g a t i o n ( ) , n e wO p e n L a y e r s . C o n t r o l . A t t r i b u t i o n ( ) , n e wO p e n L a y e r s . C o n t r o l . P a n P a n e l ( ) , n e wO p e n L a y e r s . C o n t r o l . Z o o m P a n e l ( ) ) ; < / s c r i p t > < / h e a d > < b o d y > < / b o d y > < / h t m l >

1.2. Membedah Peta Aplikasi Anda

herryunud83.wordpress.com/2012/12/ 3/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

Peta di atas dibuat menggunakan minimal html

document, application initialization code, and user

interface configuration objects .

1.2.1. Minimal HTML Document

Setiap aplikasi web membutuhkan setidaknya dokumen dasar HTML sebagai container. Tidak mengandung human readable markup, sehingga hanya memiliki bentuk yang kosong. Namun sudah pasti mengandung semua sumber style dan script. Ini yang umumnya ada pada awal dokumen :

< l i n kr e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "h r e f = " e x t / r e s o u r c e s / c s s < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " e x t / a d a p t e r / e x t / e x t b a s e . j < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " e x t / e x t a l l . j s " > < / s c r i p t >

Ext JS bisa dipakai sendiri atau bersama dengan JavaScript frameworks seperti JQuery. Sesuai dengan lingkungannya, adapter yang sesuai harus dipasang dahulu. Kami memakai standalone, jadi kami butuh ext-base.js adapter. Pada line kedua kami memasukkan library utama. GeoExt tidak saja berdasarkan Ext JS, namun juga OpenLayers. Jadi kami harus memasukkan OpenLayers. Akhirnya kami bisa memasukkan GeoExt:

< s c r i p ts r c = " o p e n l a y e r s / l i b / O p e n L a y e r s . j s " > < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " g e o e x t / l i b / G e o E x t . j s " > < / s c

Catatan Saat memakai GeoExt, anda mendapatkan keuntungan dari semua fungsi plain yang disediakan Ext JS dan OpenLayers. Anda dapat menambahkan GeoExt ke aplikasi Ext JS and OpenLayers anda yang sudah ada tanpa merusak apapun.
herryunud83.wordpress.com/2012/12/ 4/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

1.2.2. Application Initialization Code

Application initialization dalam konteks ini adalah kode yang dibuat sesegera mungkin.
E x t . B L A N K _ I M A G E _ U R L=" e x t / r e s o u r c e s / i m a g e s / d e f a u l t / s . g i f " ; v a ra p p ,i t e m s=[ ] ,c o n t r o l s=[ ] ; i t e m s . p u s h ( { x t y p e :" g x _ m a p p a n e l " , r e f :" m a p P a n e l " , r e g i o n :" c e n t e r " , m a p :{ n u m Z o o m L e v e l s :1 9 , c o n t r o l s :c o n t r o l s } , e x t e n t :O p e n L a y e r s . B o u n d s . f r o m A r r a y ( [ 1 2 2 . 9 1 1 ,4 2 . 2 9 1 , 1 2 2 . 7 8 7 , 4 2 . 3 9 8 ] ) , l a y e r s :[ n e wO p e n L a y e r s . L a y e r . W M S ( " M e d f o r d " , " / g e o s e r v e r / w m s ? S E R V I C E = W M S " , { l a y e r s :" m e d f o r d " } , { i s B a s e L a y e r :f a l s e } ) ] } ) ; c o n t r o l s . p u s h ( n e wO p e n L a y e r s . C o n t r o l . N a v i g a t i o n ( ) , n e wO p e n L a y e r s . C o n t r o l . A t t r i b u t i o n ( ) , n e wO p e n L a y e r s . C o n t r o l . P a n P a n e l ( ) , n e wO p e n L a y e r s . C o n t r o l . Z o o m P a n e l ( ) ) ;

Kita mulai dengan mengeset URL local untuk blank image yang sering dipakai Ext JS, dan menentukan beberapa variable. Kami mempopulasi dua array. items adalah user interface items dari aplikasi kami dan controls adalah OpenLayers map controls kami. Dalam Ext JS, kami membuat konfigurasi objek ketimbang menulis kode seperti kebanyakan tugas basic, yang umumnya membuat aplikasi
herryunud83.wordpress.com/2012/12/ 5/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

berkembang lebih mudah dan cepat. Item berinteraksi melalui events dan pendengar events, sebagai glue yang akan kita bahas nanti. Mari mencari tahu mengenai bagaimana add
content to our viewport.

1.2.3

MembangunUser Interface

Kita telah mengetahui bahwa body dari dokumen HTML adalah kosong. Semua yang terlihat pada web page ditambahkan oleh Ext JS, namun kita tetap butuh menyiapkan DOM dari page. Untuk memastikan kita tidak menulis pada DOM terlalu awal, Ext menyiapkan Ext.onReady() hook. Pada contoh, dipakai user interface sederhana. Kita cukup membuat Ext.Viewport baru dengan border layout. Hal ini membuat kita mampu mengisi seluruh browser viewport dengan aplikasi kita, dan tidak butuh penambahan markup ke page tersebut.
E x t . o n R e a d y ( f u n c t i o n ( ){ a p p=n e wE x t . V i e w p o r t ( { l a y o u t :" b o r d e r " , i t e m s :i t e m s } ) ; } ) ;

Ext.Viewport memakai border layout. Dapat memiliki item dari region tengah, utara, timur, selatan dan barat namun hanya region center mandatorynya. Dapat memakai semua ruang yang tidak dipakai oleh region lain, yang perlu dikonfigurasi dengan width atau height. Catatan Untuk membuat aplikasi workshop menjadi modular, kita akan memakai Ext.onReady () beberapa kali saat menambah fungsionalitas.
herryunud83.wordpress.com/2012/12/ 6/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

Tidak perlu untuk melakukan hal ini dalam aplikasi kehidupan nyata, di mana semua kode dependent DOM biasanya termasuk ke dalam Ext.onReady () blok tunggal. 1.2.4. Komponen GeoExt.MapPanel Dalam Ext JS, semua pembentuk komponen UI membuat argument tunggal yang akan kami sebut sebagai configuration object. Seperti semua JavaScript objects, konfigurasi ini termuat dalam curly braces, dan mengandung sepasang key: value. Berikut configuration object untuk peta kami:
{ x t y p e :" g x _ m a p p a n e l " , r e f :" m a p P a n e l " , r e g i o n :" c e n t e r " , m a p :{ n u m Z o o m L e v e l s :1 9 , c o n t r o l s :c o n t r o l s } , e x t e n t :O p e n L a y e r s . B o u n d s . f r o m A r r a y ( [ 1 2 2 . 9 1 1 ,4 2 . 2 9 1 , 1 2 2 . 7 8 7 , 4 2 . 3 9 8 ] ) , l a y e r s :[ n e wO p e n L a y e r s . L a y e r . W M S ( " M e d f o r d " , " / g e o s e r v e r / w m s ? S E R V I C E = W M S " , { l a y e r s :" m e d f o r d " } , { i s B a s e L a y e r :f a l s e } ) ] }

Ketiga property awal tidak spesifik untuk GeoExt. xtype memberitahukan Ext JS konstruktor mana yang akan mengirim configuration object ke .ref mendefinisikan referensi relatif terhadap kontainer (dalam hal ini Ext.Viewport yang kita tambahkan item ini). region adalah wilayah viewport tempat kita ingin menempatkan peta. Catatan
herryunud83.wordpress.com/2012/12/ 7/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

Kedua notasi berikut adalah ekuivalent: new GeoExt.MapPanel({region: center, extent: /* */}); {xtype: gx_mappanel, region: center, extent: /* */}); Ext JS menjaga registry dari komponen yang ada, disebut xtypes. GeoExt menambahkan komponennya ke registry tadi. Utk membedakan satu dg yang lain, nama mereka dimulai dg gx_ prefix. Dlm konteks ini properti ref jg penting: dipakai utk membuat referensi shg kita bisa mengakses berikutnya dg lebih mudah. Memakai xtypes berguna saat meload konfigurasi secara dynamic memakai AJAX. Pada kasus ini, konfigurasi harus JSON compliant, dan hanya mengandung tipe sederhana (nomor, strings and boolean values). Property lain yang spesifik utk GeoExt.MapPanel: daripada OpenLayers.Map instant, kami merumuskan opsi konfigurasi utk peta pada opsi map. extent mengeset initial extent dari peta, dan layers mengeset initial set dari layers. Bagi peta sederhana ini, kami hanya menunjukkan WMS layer tunggal. Pada plain OpenLayers, kami melakukan hal yang sama dengan menginstantkan objek OpenLayers.Layer.WMS. bedanya disini adalah kami mengkonfigurasi WMS layer dg opsi {isBaseLayer: false}. Hal ini tdk harus dilakukan sekarang, namun saat kami menambahkan layer tree, kami ingin melihat tree node dari layer tadi ditambah checkbox, bukan dg radio button.

1.3. GeoExt Resources

Library GeoExt memuat banyak fungsi. Meskipun pengembang telah bekerja keras untuk memberikan contoh fungsi itu dan telah
herryunud83.wordpress.com/2012/12/ 8/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

mengorganisir kode dengan cara yang memungkinkan pengembang berpengalaman lainnya untuk menemukan caranya, pendatang baru mungkin menemukan tantangan untuk memulai dari awal.

1.3.1. Belajar dari contoh

User baru mungkin beranggapan bahwa cara yang paling berguna adalah dg menyelami contoh kode GeoExt dan mempelajari fungsi dari library. http://geoext.org/examples.html Contoh Ext JS dan OpenLayers adalah dasar pengetahuan yang berharga, khususnya jika anda mulai dg GeoExt dan belum pernah mencoba Ext JS atau OpenLayers sebelumnya. http://dev.sencha.com/deploy/ext3.4.0/examples/ http://openlayers.org/dev/examples/

1.3.2. Browsing dokumentasi

Untuk info topic spesifik, browsinglah dokumentasi GeoExt. Khususnya tutorial dan pengenalan ke konsep inti. http://geoext.org/docs.html (utk release terbaru) http://dev.geoext.org/docs/docs.html (for the latest nightly build)

1.3.3. Menemukan referensi API

Setelah memahami komponen inti yang membuat & mengontrol aplikasi mapping, carilah dokumentasi referensi API utk detail pada metode signatures dan property objek.

herryunud83.wordpress.com/2012/12/

9/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

http://geoext.org/lib/ (for the latest release) http://dev.geoext.org/docs/lib/ (for the latest nightly build) Referensi GeoExt API links to Ext JS and OpenLayers API docs utk referensi lebih lanjut. Sumbernya dpt ditemukan disini: http://dev.sencha.com/deploy/ext-3.4.0/docs/ http://dev.openlayers.org/apidocs/

1.3.4. bergabung dg komunitas

GeoExt disupport dan dimaintain oleh komunitas developer dan user spt anda. Apakah anda punya pertanyaan atau kode utk dikontribusikan, anda bisa terlibat dg mendaftar pada salah satu mailing list dan memperkenalkan diri. Users list http://www.geoext.org/cgibin/mailman/listinfo/users (jika anda user GeoExt library) Developers list http://www.geoext.org/cgibin/mailman/listinfo/dev (jika anda ingin berkontribusi thd pengembangan GeoExt library)

Permalink.

December 28, 2012 Leave a comment

Penambahan legend menggunakan WMS GetLegendGraphic

2.3. Penambahan legend menggunakan WMS

herryunud83.wordpress.com/2012/12/ 10/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

GetLegendGraphic
Kita telah memiliki grid view dari layer yang dibuat dari WMS GetCapabilities request. Tanpa mengetahui layer yg terlihat pada peta adalah image yg diambil dg WMS GetMap, dan skr kita mempelajari tentang legends yg dibuat dari WMS GetLegendGraphic request.

2.3.1. A LegendPanel with WMS GetLegendGraphic Images

Mari tambahkan panel lain ke WMS browser kita. utk legend view, GeoExt menyediakan GeoExt.LegendPanel. panel ini dpt memakai legend image yg dikonfigurasi dalam records styles field, atau menghasilkan WMS GetLegendGraphic requests. Tasks 1. buka map.html di teks editor. Tambahkan definisi legend panel berikut pada akhir applications script block: 2. Load atau refresh @workshop_url@/map.html di browser anda utk melihat legend panel baru di sisi kanan dari peta. Tambahkan layer dan lihat munculnya legend image pada panel.
2 . i t e m s . p u s h ( { 3 . x t y p e :" g x _ l e g e n d p a n e l " , 4 . r e g i o n :" e a s t " , 5 . w i d t h :2 0 0 , 6 . a u t o S c r o l l :t r u e , 7 . p a d d i n g :5 8 . } ) ;

2.4.1. kontrol OpenLayers WMSGetFeatureInfo dan GeoExt Popups

Control OpenLayers.Control.WMSGetFeatureInfo dan GeoExt.Popup dan juga Ext.grid.PropertyGrid
herryunud83.wordpress.com/2012/12/ 11/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

akan berguna utk menampilkan fitur ke dalam grid yang baik- tanpa perlu membuat store lain secara manual. Tasks 1. Utk popup, membutuhkan file CSS pada documents head, yang memberi style utk popups anchor:

2 . < l i n kr e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "h r e f = " g e o e x t / r e s o u r

Note GeoExt menyediakan file CSS yang mengandung semua style yang dibutuhkan oleh widgets. Jadi jika ingin menghindari kekhawatiran membutuhkan sumber CSS,anda dapat memasukkan geoextall.css (atau geoext-all-debug.css utk versi developer yang diapaki disini) ketimbang popup.css. 1. Sekarang kita dapat membuat control. Kode di bawah harus ditambahkan di akhir aplikasi script block:
4 . c o n t r o l s . p u s h ( n e wO p e n L a y e r s . C o n t r o l . W M S G e t F e a t u r e I n f o ( { 5 . a u t o A c t i v a t e :t r u e , 6 . i n f o F o r m a t :" a p p l i c a t i o n / v n d . o g c . g m l " , 7 . m a x F e a t u r e s :3 , 8 . e v e n t L i s t e n e r s :{ 9 . " g e t f e a t u r e i n f o " :f u n c t i o n ( e ){ 1 0 . v a ri t e m s=[ ] ; 1 1 . E x t . e a c h ( e . f e a t u r e s ,f u n c t i o n ( f e a t u r e ){ 1 2 . i t e m s . p u s h ( { 1 3 . x t y p e :" p r o p e r t y g r i d " , 1 4 . t i t l e :f e a t u r e . f i d , 1 5 . s o u r c e :f e a t u r e . a t t r i b u t e s 1 6 . } ) ; 1 7 . } ) ; 1 8 . n e wG e o E x t . P o p u p ( { 1 9 . t i t l e :" F e a t u r eI n f o " , 2 0 . w i d t h :2 0 0 , 2 1 . h e i g h t :2 0 0 , 2 2 . l a y o u t :" a c c o r d i o n " , 2 3 . m a p :a p p . m a p P a n e l , 2 4 . l o c a t i o n :e . x y , 2 5 . i t e m s :i t e m s
herryunud83.wordpress.com/2012/12/ 12/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

2 6 . 2 7 . 2 8 . } 2 9 . } ) ) ;

} ) . s h o w ( ) ; }

perhatikan eventListeners config option utk WMSGetFeatureInfo control. Kita mendengarkan getfeatureinfo event, yang dihentikan setiap kita memperoleh informasi fitur dari WMS. Utk setiap fitur yang kita peroleh kembali, kita buatkan property grid:
E x t . e a c h ( e . f e a t u r e s ,f u n c t i o n ( f e a t u r e ){ i t e m s . p u s h ( { x t y p e :" p r o p e r t y g r i d " , t i t l e :f e a t u r e . f i d , s o u r c e :f e a t u r e . a t t r i b u t e s } ) ; } ) ;

The PropertyGrid adalah komponen yang sangat membantu utk WMSGetFeatureInfo control yang dikonfigurasi dengan infoFormat yang memberikan kembali sesuatu untuk kita uraikan (cth bukan teks plain atau html). Kita tidak butuh mengkonfigurasi komponen ini dg store (spt yang kita lakukan utk WMSCapabilities grid), kita hanya memberikan arbitrary object (tatribut dari fitur disini) sebagai source config option, dan akan terbentuk store secara internal dan mempopulasi grid dengan datanya. Kita dapat dg mudah meletakkan popup pada peta dan mengarahkannya ke posisi yang kita klik pada peta:
n e wG e o E x t . P o p u p ( { t i t l e :" F e a t u r eI n f o " , w i d t h :2 0 0 , h e i g h t :2 0 0 , l a y o u t :" a c c o r d i o n " , m a p :a p p . m a p P a n e l , l o c a t i o n :e . x y ,
herryunud83.wordpress.com/2012/12/ 13/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

i t e m s :i t e m s } ) . s h o w ( ) ;

Dengan location config option, kita mengarahkan popup ke posisi dimana terjadi klik (e.xy). kita beri accordion layout,dan item tersebut adalah property grids yg kita buat di atas.

Permalink.

December 27, 2012 Leave a comment

Membuat Grid tersinkronisasi dan Map View dari fitur WFS

3.1. Membuat Grid tersinkronisasi dan Map View dari fitur WFS
GeoExt meminjam sebagian besar WFS support dari OpenLayers. Yang hanya disediakan adalah GeoExt.data.FeatureStore, jadi menampilkan atribut fitur pada grid sangat mudah. Jika hanya ingin menampilkan fitur pada grid, kita dpt memakai GeoExt.data.ProtocolProxy, sehingga tidak memerlukan OpenLayers layer.

3.1.1. fitur vector pada peta dan pada tabel

Mari membuat fungsi editing ke WMS browser dari bab sebelumnya. Mulai dengan OpenLayers.Layer.Vector utk geometries dan grid utk atribut WFS layer. Kita mulai dg kode yang membaca WFS layer, menampilkan fiturnya pada
herryunud83.wordpress.com/2012/12/ 14/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

peta, menunjukkan atribut pada grid, dan menyinkronkan fitur seleksi antar peta dan grid: Tasks 1. buka map.html file dari latihan sebelumnya pada teks editor. Paste kode di bawah pada bagian bawah aplikasi script block: 2. Kode di atas membuat grid kosong pada region selatan dari aplikasi viewport, dan menyiapkan model seleksi (sm) yg akan digunakan nanti saat menyinkronkan seleksi peta dan grid. Sekarang mari mempopulasikan grid dg fitur dari medford:parks layer. Utk itu, kita rubah store dan kolom pada definisi grid di atas, dan buat agar tampak seperti ini: 3. Utk melengkapi, tampilkan juga geometries pada peta, dg menambah vector layer. tambahkan potongan berikut di bagian bawah kode aplikasi: 4. Setelah menyimpan perubahan yang dilakukan, arahkan browser anda ke @workshop_url@/map.html. anda seharusnya melihat grid baru pada aplikasi, dan geometries tampak pada peta berwarna oranye. Saat mengklik baris pada grid, geometrinya akan dihighlight pada peta. Saat mengklik fitur pada peta, atributnya akan dihighlight pada grid.
2 . i t e m s . p u s h ( { 3 . x t y p e :" g r i d " , 4 . r e f :" f e a t u r e G r i d " , 5 . t i t l e :" F e a t u r eT a b l e " , 6 . r e g i o n :" s o u t h " , 7 . h e i g h t :1 5 0 , 8 . s m :n e wG e o E x t . g r i d . F e a t u r e S e l e c t i o n M o d e l ( ) , 9 . s t o r e :n e wE x t . d a t a . S t o r e ( ) , 1 0 . c o l u m n s :[ ] , 1 1 . b b a r :[ ] 1 2 . } ) ; 1 4 . i t e m s . p u s h ( { 1 5 . x t y p e :" g r i d " , 1 6 . r e f :" f e a t u r e G r i d " , 1 7 . t i t l e :" F e a t u r eT a b l e " , 1 8 . r e g i o n :" s o u t h " , 1 9 . h e i g h t :1 5 0 , 2 0 . s m :n e wG e o E x t . g r i d . F e a t u r e S e l e c t i o n M o d e l ( ) , 2 1 . s t o r e :n e wG e o E x t . d a t a . F e a t u r e S t o r e ( {
herryunud83.wordpress.com/2012/12/ 15/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

2 2 . f i e l d s :[ 2 3 . { n a m e :" o w n e r " ,t y p e :" s t r i n g " } , 2 4 . { n a m e :" a g e n c y " ,t y p e :" s t r i n g " } , 2 5 . { n a m e :" n a m e " ,t y p e :" s t r i n g " } , 2 6 . { n a m e :" u s a g e " ,t y p e :" s t r i n g " } , 2 7 . { n a m e :" p a r k t y p e " ,t y p e :" s t r i n g " } , 2 8 . { n a m e :" n u m b e r _ f a c " ,t y p e :" i n t " } , 2 9 . { n a m e :" a r e a " ,t y p e :" f l o a t " } , 3 0 . { n a m e :" l e n " ,t y p e :" f l o a t " } 3 1 . ] , 3 2 . p r o x y :n e wG e o E x t . d a t a . P r o t o c o l P r o x y ( { 3 3 . p r o t o c o l :n e wO p e n L a y e r s . P r o t o c o l . W F S ( { 3 4 . u r l :" / g e o s e r v e r / o w s " , 3 5 . v e r s i o n :" 1 . 1 . 0 " , 3 6 . f e a t u r e T y p e :" p a r k s " , 3 7 . f e a t u r e N S :" h t t p : / / m e d f o r d . o p e n g e o . o r g " , 3 8 . s r s N a m e :" E P S G : 4 3 2 6 " 3 9 . } ) 4 0 . } ) , 4 1 . a u t o L o a d :t r u e 4 2 . } ) , 4 3 . c o l u m n s :[ 4 4 . { h e a d e r :" o w n e r " ,d a t a I n d e x :" o w n e r " } , 4 5 . { h e a d e r :" a g e n c y " ,d a t a I n d e x :" a g e n c y " } , 4 6 . { h e a d e r :" n a m e " ,d a t a I n d e x :" n a m e " } , 4 7 . { h e a d e r :" u s a g e " ,d a t a I n d e x :" u s a g e " } , 4 8 . { h e a d e r :" p a r k t y p e " ,d a t a I n d e x :" p a r k t y p e " } , 4 9 . { x t y p e :" n u m b e r c o l u m n " ,h e a d e r :" n u m b e r _ f a c " ,d a t a I 5 0 . { x t y p e :" n u m b e r c o l u m n " ,h e a d e r :" a r e a " ,d a t a I n d e x : 5 1 . { x t y p e :" n u m b e r c o l u m n " ,h e a d e r :" l e n " ,d a t a I n d e x :" 5 2 . ] , 5 3 . b b a r :[ ] 5 4 . } ) ; 5 6 . v a rv e c t o r L a y e r=n e wO p e n L a y e r s . L a y e r . V e c t o r ( " E d i t a b l ef e a 5 7 . E x t . o n R e a d y ( f u n c t i o n ( ){ 5 8 . a p p . m a p P a n e l . m a p . a d d L a y e r ( v e c t o r L a y e r ) ; 5 9 . a p p . f e a t u r e G r i d . s t o r e . b i n d ( v e c t o r L a y e r ) ; 6 0 . a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) . b i n d ( v e c t o r L a y e r ) ; 6 1 . } ) ;

3.1.1.1. Memahami kode

Kita dpt mengkonfigurasi grid dg store utk memberi tahu kemana seharusnya mencari data. Saat ini kami memakai GeoExt.data.FeatureStore yg dikonfigurasi dg GeoExt.data.ProtocolProxy utk mengakses OpenLayers.Protocol.WFS. Sinkronisasi seleksi pada grid dan pada peta dilakukan oleh
herryunud83.wordpress.com/2012/12/ 16/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

GeoExt.grid.FeatureSelectionModel, yang kami gunakan ketimbang model seleksi default:

s m :n e wG e o E x t . g r i d . F e a t u r e S e l e c t i o n M o d e l ( ) ,

saat ditambahkan vector layer ke peta, kita harus mengikat model seleksi dan store ke:
a p p . f e a t u r e G r i d . s t o r e . b i n d ( v e c t o r L a y e r ) ; a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) . b i n d ( v e c t o r L a y e r ) ;

Perhatikan bahwa hal ini tdk diperlukan pada FeatureStore yg dikonfigurasi dg layer. Namun karena kami membuat store sebelum layer, maka kita belum punya akses ke layer, oleh karena itu akan kita ikatkan nanti. Kebutuhan utk mengkonfigurasi secara manual WFS layer dg semua fields dan kolom membuat aplikasi ini kurang nyaman digunakan. Idealnya, kita dpt memilih layer dari tree, dan grid secara otomatis akan menampilkan atribut fiturnya, dan fitur tsb dapat dipilih pada grid dan peta. Kebanyakan implementasi WMS/WFS, seperti GeoServer pada kasus ini, memakai nama layer yang sama (feature type) utk WMS dan WFS. Utk implementasi lain dari WMS, terdapat DescribeLayer request yang mengembalikan XML document yg telah memberi link ke kita dari WMS layer ke fitur tipe WMS terkait atau WCS coverage. Setelah mengetahui nama tipe fitur WFS, kita dpt menggunakan WFS DescribeFeatureType request mencari fields dan tipe data utk atribut fitur. Kelemahan menghilangkan DescribeLayer request adalah DescribeFeatureType request akan gagal utk raster layers. Hal ini bukanlah hal yg besarpada implementasi kami ini hal tsb berarti grid dan layer akan dibersihkan saat kami memilih raster layer.
herryunud83.wordpress.com/2012/12/ 17/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

kami berasumsi bahwa nama WMS layer adalah sama dg nama WFS FeatureType,sehingga kami tdk membuat WMS DescribeLayer request. Namun kami tetap membuat WFS DescribeFeatureType utk mengkonfigurasi secara otomatis fitur record dan grid. 1. GeoExt memiliki AttributeStore yang menahan field metadata dari atribut fitur. memakai OpenLayers.Format.WFSDescribeFeatureType utk mendapatkan informasi ini, namun menghilangkan semua kecuali field data. Utk mengakses WFS layer, kita juga butuh feature namespace, jadi kami mengintersep metode read utk mendapatkan semua DescribeFeatureType responses raw data. Tambahkan yg berikut ini di akhir script block: 2. The FeatureStore and the grid harus direkonfigurasi saat memilih layer berbeda dari tree. Tambahkan fungsi berikut ke kode aplikasi:

2 . v a rr a w A t t r i b u t e D a t a ; 3 . v a rr e a d=O p e n L a y e r s . F o r m a t . W F S D e s c r i b e F e a t u r e T y p e . p r o t o t 4 . O p e n L a y e r s . F o r m a t . W F S D e s c r i b e F e a t u r e T y p e . p r o t o t y p e . r e a d= 5 . r a w A t t r i b u t e D a t a=r e a d . a p p l y ( t h i s ,a r g u m e n t s ) ; 6 . r e t u r nr a w A t t r i b u t e D a t a ; 7 . } ; 9 . f u n c t i o nr e c o n f i g u r e ( s t o r e ,u r l ){ 1 0 . v a rf i e l d s=[ ] ,c o l u m n s=[ ] ,g e o m e t r y N a m e ,g e o m e t r y T y 1 1 . / /r e g u l a re x p r e s s i o nt od e t e c tt h eg e o m e t r yc o l u m n 1 2 . v a rg e o m R e g e x=/ g m l : ( M u l t i ) ? ( P o i n t | L i n e | P o l y g o n | S u r f a c 1 3 . v a rt y p e s={ 1 4 . / /m a p p i n go fx m ls c h e m ad a t at y p e st oE x tJ Sd a t a 1 5 . " x s d : i n t " :" i n t " , 1 6 . " x s d : s h o r t " :" i n t " , 1 7 . " x s d : l o n g " :" i n t " , 1 8 . " x s d : s t r i n g " :" s t r i n g " , 1 9 . " x s d : d a t e T i m e " :" s t r i n g " , 2 0 . " x s d : d o u b l e " :" f l o a t " , 2 1 . " x s d : d e c i m a l " :" f l o a t " , 2 2 . / /m a p p i n go fg e o m e t r yt y p e s 2 3 . " L i n e " :" P a t h " , 2 4 . " S u r f a c e " :" P o l y g o n " 2 5 . } ; 2 6 . s t o r e . e a c h ( f u n c t i o n ( r e c ){ 2 7 . v a rt y p e=r e c . g e t ( " t y p e " ) ; 2 8 . v a rn a m e=r e c . g e t ( " n a m e " ) ; 2 9 . v a rm a t c h=g e o m R e g e x . e x e c ( t y p e ) ;
herryunud83.wordpress.com/2012/12/ 18/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

3 0 . 3 1 . 3 2 . 3 3 . 3 4 . 3 5 . 3 6 . 3 7 . 3 8 . 3 9 . 4 0 . 4 1 . 4 2 . 4 3 . 4 4 . 4 5 . 4 6 . 4 7 . 4 8 . 4 9 . 5 0 . 5 1 . 5 2 . 5 3 . 5 4 . 5 5 . 5 6 . 5 7 . 5 8 . 5 9 . 6 0 . 6 1 . 6 2 . 6 3 . 6 4 . 6 5 . }

i f( m a t c h ){ / /w ef o u n dt h eg e o m e t r yc o l u m n g e o m e t r y N a m e=n a m e ; }e l s e{ / /w eh a v ea na t t r i b u t ec o l u m n f i e l d s . p u s h ( { n a m e :n a m e , t y p e :t y p e s [ t y p e ] } ) ; c o l u m n s . p u s h ( { x t y p e :t y p e s [ t y p e ]= =" s t r i n g "? " g r i d c o l u m n ": " n u m b e r c o l u m n " , d a t a I n d e x :n a m e , h e a d e r :n a m e } ) ; }

} ) ; a p p . f e a t u r e G r i d . r e c o n f i g u r e ( n e wG e o E x t . d a t a . F e a t u r e S t o r a u t o L o a d :t r u e , p r o x y :n e wG e o E x t . d a t a . P r o t o c o l P r o x y ( { p r o t o c o l :n e wO p e n L a y e r s . P r o t o c o l . W F S ( { u r l :u r l , v e r s i o n :" 1 . 1 . 0 " , f e a t u r e T y p e :r a w A t t r i b u t e D a t a . f e a t u r e T y p e s [ f e a t u r e N S :r a w A t t r i b u t e D a t a . t a r g e t N a m e s p a c e s r s N a m e :" E P S G : 4 3 2 6 " , g e o m e t r y N a m e :g e o m e t r y N a m e , m a x F e a t u r e s :2 5 0 } ) } ) , f i e l d s :f i e l d s } ) ,n e wE x t . g r i d . C o l u m n M o d e l ( c o l u m n s ) ) ; a p p . f e a t u r e G r i d . s t o r e . b i n d ( v e c t o r L a y e r ) ; a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) . b i n d ( v e c t o r L a y e r ) ;

Catatan bahwa cara kami membuat fields and columns arrays menghasilkan konfigurasi yang sama persis utk medford:parks layer yang secara manual kami tulis pada latihan sebelumnya. 1. Saat memilih layer pada tree dg mengklik namanya, kami ingin memakai DescribeFeatureType request. Hal ini terselesaikan dengan menambahkan kode berikut:

6 7 . f u n c t i o ns e t L a y e r ( m o d e l ,n o d e ){ 6 8 . i f ( ! n o d e| |n o d e . l a y e ri n s t a n c e o fO p e n L a y e r s . L a y e r . V e c t
herryunud83.wordpress.com/2012/12/ 19/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

6 9 . r e t u r n ; 7 0 . } 7 1 . v e c t o r L a y e r . r e m o v e A l l F e a t u r e s ( ) ; 7 2 . a p p . f e a t u r e G r i d . r e c o n f i g u r e ( 7 3 . n e wE x t . d a t a . S t o r e ( ) , 7 4 . n e wE x t . g r i d . C o l u m n M o d e l ( [ ] ) 7 5 . ) ; 7 6 . v a rl a y e r=n o d e . l a y e r ; 7 7 . v a ru r l=l a y e r . u r l . s p l i t ( " ? " ) [ 0 ] ;/ /t h eb a s eu r lw i t h 7 8 . v a rs c h e m a=n e wG e o E x t . d a t a . A t t r i b u t e S t o r e ( { 7 9 . u r l :u r l , 8 0 . / /r e q u e s ts p e c i f i cp a r a m s 8 1 . b a s e P a r a m s :{ 8 2 . " S E R V I C E " :" W F S " , 8 3 . " R E Q U E S T " :" D e s c r i b e F e a t u r e T y p e " , 8 4 . " V E R S I O N " :" 1 . 1 . 0 " , 8 5 . " T Y P E N A M E " :l a y e r . p a r a m s . L A Y E R S 8 6 . } , 8 7 . a u t o L o a d :t r u e , 8 8 . l i s t e n e r s :{ 8 9 . " l o a d " :f u n c t i o n ( s t o r e ){ 9 0 . a p p . f e a t u r e G r i d . s e t T i t l e ( l a y e r . n a m e ) ; 9 1 . r e c o n f i g u r e ( s t o r e ,u r l ) ; 9 2 . } 9 3 . } 9 4 . } ) ; 9 5 . } 9 6 . 9 7 . E x t . o n R e a d y ( f u n c t i o n ( ){ 9 8 . a p p . t r e e . g e t S e l e c t i o n M o d e l ( ) . o n ( 9 9 . " s e l e c t i o n c h a n g e " ,s e t L a y e r 1 0 0 . ) ; 1 0 1 .} ) ;

Catatan kode ini memanggil fungsi reconfigure pada stores load handler. Jadi saat user memilih layer pada tree, setLayer disebut selectionchange handler pada model seleksi tree, dan DescribeFeatureType request utk layer terpilih yang dipakai. Saat timbul respon, reconfigure dipanggil. 1. Setelah disimpan, arahkan browser anda ke @workshop_url@/map.html. saat anda menambahkan layer ke peta yang tersedia sbg WFS dan memilih dari tree, grid akan dipopulasikan bersama atribut fitur layer, dan fitur akan muncul di peta.
herryunud83.wordpress.com/2012/12/ 20/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

Permalink.

December 27, 2012 Leave a comment

Mengedit Fitur dan Atributnya di GeoExe

3.2. Mengedit Fitur dan Atributnya

Kita akan meningkatkan aplikasi dg membuat layer dan atributnya bisa diedit, dan menggunakan WFST utk melakukan perubahan.

3.2.1. Membuat Layer dan Grid Agar Bisa Diedit

Mari memodifikasi aplikasi ini agar bisa mengedit fitur geometri dan atribut. Dari sisi layer hal ini butuh SelectFeature control yangmana FeatureSelectionModel secara otomatis membuat ModifyFeature control, dan menambah DrawFeature control utk membuat fitur baru. Dari sisi grid, kita harus mengganti GridPanel dg EditorGridPanel, melengkapi editor utk kolom, dan mencegah seleksi multiple fitur pada model seleksi (hanya satu fitur yang dpt diedit suatu waktu). Tasks 1. buka map.html dari teks editor.buatlah controls utk memodifikasi dan menggambar fitur, dg menambah aplikasi berikut pada script block: 2. tambahkan kode utk mengikat
herryunud83.wordpress.com/2012/12/ 21/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

FeatureSelectionModel ke SelectFeature control yg dibuat otomatis dg ModifyFeature control, dan menjamin hanya satu baris grid yg dipilih suatu waktu: 3. Tambahkan kode utk menambah tombol Create dan Delete ke toolbar fitur grid: 4. Temukan definisi featureGrid dan rubah xtipenya grid ke editorgrid: 5. temukan definisi kolom utk featureGrid, dan tambahkan editor yang sesuai. Definisi kolom final harus tampak seperti ini: 6. Setelah disimpan, arahkan browser ke @workshop_url@/map.html. anda seharusnya melihat tombol Delete and Create yg baru, dan saat memilih fitur anda dpt memodifikasi simpulnya.

2 . v a rm o d i f y C o n t r o l=n e wO p e n L a y e r s . C o n t r o l . M o d i f y F e a t u r e ( 3 . v e c t o r L a y e r ,{ a u t o A c t i v a t e :t r u e } 4 . ) ; 5 . v a rd r a w C o n t r o l=n e wO p e n L a y e r s . C o n t r o l . D r a w F e a t u r e ( 6 . v e c t o r L a y e r , 7 . O p e n L a y e r s . H a n d l e r . P o l y g o n , 8 . { h a n d l e r O p t i o n s :{ m u l t i :t r u e } } 9 . ) ; 1 0 . c o n t r o l s . p u s h ( m o d i f y C o n t r o l ,d r a w C o n t r o l ) ; 1 2 . E x t . o n R e a d y ( f u n c t i o n ( ){ 1 3 . v a rs m=a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) ; 1 4 . s m . u n b i n d ( ) ; 1 5 . s m . b i n d ( m o d i f y C o n t r o l . s e l e c t C o n t r o l ) ; 1 6 . s m . o n ( " b e f o r e r o w s e l e c t " ,f u n c t i o n ( ){s m . c l e a r S e l e c t i o n 1 7 . } ) ; 1 9 . E x t . o n R e a d y ( f u n c t i o n ( ){ 2 0 . v a rb b a r=a p p . f e a t u r e G r i d . g e t B o t t o m T o o l b a r ( ) ; 2 1 . b b a r . a d d ( [ { 2 2 . t e x t :" D e l e t e " , 2 3 . h a n d l e r :f u n c t i o n ( ){ 2 4 . a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) . e a c h ( f u n c t i 2 5 . v a rf e a t u r e=r e c . g e t F e a t u r e ( ) ; 2 6 . m o d i f y C o n t r o l . u n s e l e c t F e a t u r e ( f e a t u r e ) ; 2 7 . v e c t o r L a y e r . r e m o v e F e a t u r e s ( [ f e a t u r e ] ) ; 2 8 . } ) ; 2 9 . } 3 0 . } ,n e wG e o E x t . A c t i o n ( { 3 1 . c o n t r o l :d r a w C o n t r o l , 3 2 . t e x t :" C r e a t e " , 3 3 . e n a b l e T o g g l e :t r u e 3 4 . } ) ] ) ; 3 5 . b b a r . d o L a y o u t ( ) ; 3 6 . } ) ; 3 8 . x t y p e :" e d i t o r g r i d " ,
herryunud83.wordpress.com/2012/12/ 22/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

3 9 . r e f :" f e a t u r e G r i d " , 4 1 . c o l u m n s :[ 4 2 . { h e a d e r :" o w n e r " ,d a t a I n d e x :" o w n e r " ,e d i t o r :{ x t y p e :" 4 3 . { h e a d e r :" a g e n c y " ,d a t a I n d e x :" a g e n c y " ,e d i t o r :{ x t y p e : 4 4 . { h e a d e r :" n a m e " ,d a t a I n d e x :" n a m e " ,e d i t o r :{ x t y p e :" t e 4 5 . { h e a d e r :" u s a g e " ,d a t a I n d e x :" u s a g e " ,e d i t o r :{ x t y p e :" 4 6 . { h e a d e r :" p a r k t y p e " ,d a t a I n d e x :" p a r k t y p e " ,e d i t o r :{ x t 4 7 . { x t y p e :" n u m b e r c o l u m n " ,h e a d e r :" n u m b e r _ f a c " ,d a t a I n d e x 4 8 . e d i t o r :{ x t y p e :" n u m b e r f i e l d " } } , 4 9 . { x t y p e :" n u m b e r c o l u m n " ,h e a d e r :" a r e a " ,d a t a I n d e x :" a r e 5 0 . e d i t o r :{ x t y p e :" n u m b e r f i e l d " } } , 5 1 . { x t y p e :" n u m b e r c o l u m n " ,h e a d e r :" l e n " ,d a t a I n d e x :" l e n " 5 2 . e d i t o r :{ x t y p e :" n u m b e r f i e l d " } } 5 3 . ] ,

3.2.1.1. penjelasan perubahan

Untuk mengedit fitur baru yg telah ada, kami memakai OpenLayers.Control.ModifyFeature dan OpenLayers.Control.DrawFeature. Keduanya dikonfigurasi dg vectorLayer. DrawFeature control perlu mengetahui sketch handler mana yg dipakai utk mengedit. Karena editing layer kami polygon layer, kami memakai OpenLayers.Handler.Polygon,dan mengkonfigurasinya utk membuat MultiPolygon geometries (spt yang diminta GeoServer) dg mengeset multi option to true:
v a rm o d i f y C o n t r o l=n e wO p e n L a y e r s . C o n t r o l . M o d i f y F e a t u r e ( v e c t o r L a y e r ,{ a u t o A c t i v a t e :t r u e } ) ; v a rd r a w C o n t r o l=n e wO p e n L a y e r s . C o n t r o l . D r a w F e a t u r e ( v e c t o r L a y e r , O p e n L a y e r s . H a n d l e r . P o l y g o n , { h a n d l e r O p t i o n s :{ m u l t i :t r u e } } ) ;

FeatureSelectionModel, jika hanya utk melihat, cukup dikonfigurasi dg built-in OpenLayers.Control.SelectFeature. utk editing, kita harus mengikatnya ke SelectFeature control yg dibuat secara otomatis oleh ModifyFeature control:
herryunud83.wordpress.com/2012/12/ 23/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

v a rs m=a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) ; s m . u n b i n d ( ) ; s m . b i n d ( m o d i f y C o n t r o l . s e l e c t C o n t r o l ) ;

tidak masuk akal memilih multiple fitur utk editing, kami ingin memastikan hanya satu fitur yg dipilih pada suatu waktu:

s m . o n ( " b e f o r e r o w s e l e c t " ,f u n c t i o n ( ){s m . c l e a r S e l e c t i o n s ( ) ;} )

daripada memakai handler ini,kami juga mengkonfigurasi FeatureSelectionModel dg singleSelect option yg diset ke true.Perubahan selanjutnya yaitu kami ingin bottom toolbar pada grid, dg tombol utk mendelete dan membuat fitur. Tombol Delete button hanya berupa plain Ext.Button. saat diklik, melaksanakan aksi sesuai handlernya.
{

t e x t :" D e l e t e " , h a n d l e r :f u n c t i o n ( ){ a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) . e a c h ( f u n c t i o n ( r e c ) v a rf e a t u r e=r e c . g e t F e a t u r e ( ) ; m o d i f y C o n t r o l . u n s e l e c t F e a t u r e ( f e a t u r e ) ; v e c t o r L a y e r . r e m o v e F e a t u r e s ( [ f e a t u r e ] ) ; } ) ; } }

Di dalam handler, kita melangkah melalui grids current selection. Sebelum menghilangkan record, kami memakai modifyControls unselectFeature method utk menghilangkan fitur editing vertices dan tidak memilih fitur tsb, membuat layer ke kondisi bersih. Berkat FeatureStore, fitur yang ditambahkan ke layer secara otomatis akan muncul pada grid. Tombol Create memakai GeoExt.Action utk mengubah OpenLayers control menjadi tombol. Sangat penting utk memahami bahwa OpenLayers control dpt ditambahkan ke toolbar atau menu dg membungkusnya ke dalam
herryunud83.wordpress.com/2012/12/ 24/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

Action. enableToggle option diturunkan dari Ext.Action dan artinya tombol tsb adalah toggle, bias di-on dan off-kan:
n e wG e o E x t . A c t i o n ( { c o n t r o l :d r a w C o n t r o l , t e x t :" C r e a t e " , e n a b l e T o g g l e :t r u e } )

Setelah menambah tombol baru, kita panggil doLayout() pada toolbar, utk menjamin tombol tsb sesuai:
b b a r . d o L a y o u t ( ) ;

Bonus Task Warning This bonus exercise assumes that you have completed the bonus exercise from the previous chapter. 1. Pada fungsi reconfigure(),konfigurasikan editor utk grid kolom: TextField utk string types, dan NumberField utk yg lainnya. Kita juga perlu mengeset sketch handler yang benar utk DrawFeature control, tergantung pada geometryType dari layer yang diedit. Ini adalah tampilan yang benar dari keseluruhan fungsi dg aplikasi yang dirubah:

2 . f u n c t i o nr e c o n f i g u r e ( s t o r e ,u r l ){ 3 . v a rf i e l d s=[ ] ,c o l u m n s=[ ] ,g e o m e t r y N a m e ,g e o m e t r y T 4 . / /r e g u l a re x p r e s s i o nt od e t e c tt h eg e o m e t r yc o l u m n 5 . v a rg e o m R e g e x=/ g m l : ( M u l t i ) ? ( P o i n t | L i n e | P o l y g o n | S u r f a 6 . / /m a p p i n go fx m ls c h e m ad a t at y p e st oE x tJ Sd a t at y p 7 . v a rt y p e s={ 8 . " x s d : i n t " :" i n t " , 9 . " x s d : s h o r t " :" i n t " , 1 0 . " x s d : l o n g " :" i n t " , 1 1 . " x s d : s t r i n g " :" s t r i n g " , 1 2 . " x s d : d a t e T i m e " :" s t r i n g " , 1 3 . " x s d : d o u b l e " :" f l o a t " , 1 4 . " x s d : d e c i m a l " :" f l o a t " ,
herryunud83.wordpress.com/2012/12/ 25/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

1 5 . 1 6 . 1 7 . 1 8 . 1 9 . 2 0 . 2 1 . 2 2 . 2 3 . 2 4 . 2 5 . 2 6 . 2 7 . 2 8 . 2 9 . 3 0 . 3 1 . 3 2 . 3 3 . 3 4 . 3 5 . 3 6 . 3 7 . 3 8 . 3 9 . 4 0 . 4 1 . 4 2 . 4 3 . 4 4 . 4 5 . 4 6 . 4 7 . 4 8 . 4 9 . 5 0 . 5 1 . 5 2 . 5 3 . 5 4 . 5 5 . 5 6 . 5 7 . 5 8 . 5 9 . 6 0 . 6 1 . 6 2 . 6 3 . 6 4 . 6 5 .
herryunud83.wordpress.com/2012/12/

" L i n e " :" P a t h " , " S u r f a c e " :" P o l y g o n "

} ; s t o r e . e a c h ( f u n c t i o n ( r e c ){ v a rt y p e=r e c . g e t ( " t y p e " ) ; v a rn a m e=r e c . g e t ( " n a m e " ) ; v a rm a t c h=g e o m R e g e x . e x e c ( t y p e ) ; i f( m a t c h ){ / /w ef o u n dt h eg e o m e t r yc o l u m n g e o m e t r y N a m e=n a m e ; / /G e o m e t r yt y p ef o rt h es k e t c hh a n d l e r : / /m a t c h [ 2 ]i s" P o i n t " ," L i n e " ," P o l y g o n " ," S u r g e o m e t r y T y p e=t y p e s [ m a t c h [ 2 ] ]| |m a t c h [ 2 ] ; }e l s e{ / /w eh a v ea na t t r i b u t ec o l u m n f i e l d s . p u s h ( { n a m e :n a m e , t y p e :t y p e s [ t y p e ] } ) ; c o l u m n s . p u s h ( { x t y p e :t y p e s [ t y p e ]= =" s t r i n g "? " g r i d c o l u m n ": " n u m b e r c o l u m n " , d a t a I n d e x :n a m e , h e a d e r :n a m e , / /t e x t f i e l de d i t o rf o rs t r i n g s ,n u m b e r f i e l e d i t o r :{ x t y p e :t y p e s [ t y p e ]= =" s t r i n g "? " t e x t f i e l d ": " n u m b e r f i e l d " } } ) ; } } ) ; a p p . f e a t u r e G r i d . r e c o n f i g u r e ( n e wG e o E x t . d a t a . F e a t u r e S t o r a u t o L o a d :t r u e , p r o x y :n e wG e o E x t . d a t a . P r o t o c o l P r o x y ( { p r o t o c o l :n e wO p e n L a y e r s . P r o t o c o l . W F S ( { u r l :u r l , v e r s i o n :" 1 . 1 . 0 " , f e a t u r e T y p e :r a w A t t r i b u t e D a t a . f e a t u r e T y p e s [ f e a t u r e N S :r a w A t t r i b u t e D a t a . t a r g e t N a m e s p a c e s r s N a m e :" E P S G : 4 3 2 6 " , g e o m e t r y N a m e :g e o m e t r y N a m e , m a x F e a t u r e s :2 5 0 } ) } ) , f i e l d s :f i e l d s } ) ,n e wE x t . g r i d . C o l u m n M o d e l ( c o l u m n s ) ) ; a p p . f e a t u r e G r i d . s t o r e . b i n d ( v e c t o r L a y e r ) ; a p p . f e a t u r e G r i d . g e t S e l e c t i o n M o d e l ( ) . b i n d ( v e c t o r L a y e r ) ;
26/27

10/28/13

December | 2012 | PUTU Herry (G651114041)

6 6 . 6 7 . 6 8 . 6 9 . 7 0 . 7 1 . }

/ /S e tt h ec o r r e c ts k e t c hh a n d l e ra c c o r d i n gt ot h eg e o m d r a w C o n t r o l . h a n d l e r=n e wO p e n L a y e r s . H a n d l e r [ g e o m e t r y T y d r a w C o n t r o l ,d r a w C o n t r o l . c a l l b a c k s ,d r a w C o n t r o l . h a n ) ;

Permalink.

Blog at WordPress.com. | The Yoko Theme. Top

herryunud83.wordpress.com/2012/12/

27/27