december _ 2012 _ putu herry (g651114041)
TRANSCRIPT
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 1/27
PUTU HERRY (G651114041)
December 28,
2012
Leave a comment
Developing OGC Compliant Web
Applications with GeoExt
Developing OGC Compliant Web Applications with
GeoExt
1. GeoExt Basics
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
MO NTHL Y ARCHI VES: DE CEMBER 2012SEA RCH
AR CHI V ES
December 2012
October 2012
September 2012
ME TA
Register
Log in
TUGAS GEOINFORMATIC
HOME ABOUT
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 2/27
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 bagian-
bagiannya, 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:
<html>
<head>
<title>GeoExt Workshop Application</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script src="openlayers/lib/OpenLayers.js"></script>
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 3/27
<script type="text/javascript" src="geoext/lib/GeoExt.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
var app, items = [], controls = [];
Ext.onReady(function() {
app = new Ext.Viewport({
layout: "border",
items: items
});
});
items.push({
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
numZoomLevels: 19,
controls: controls
},
extent: OpenLayers.Bounds.fromArray([
-122.911, 42.291,
-122.787,42.398
]),
layers: [new OpenLayers.Layer.WMS(
"Medford",
"/geoserver/wms",
{layers: "medford"},
{isBaseLayer: false}
)]
});
controls.push(
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
);
</script>
</head>
<body>
</body>
</html>
1.2. Membedah Peta Aplikasi
Anda
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 4/27
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 :
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
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:
<script src="openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="geoext/lib/GeoExt.js"></script>
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.
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 5/27
1.2.2. Application Initialization
Code
Application initialization dalam konteks ini adalah
kode yang dibuat sesegera mungkin.
Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
var app, items = [], controls = [];
items.push({
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
numZoomLevels: 19,
controls: controls
},
extent: OpenLayers.Bounds.fromArray([
-122.911, 42.291,
-122.787,42.398
]),
layers: [new OpenLayers.Layer.WMS(
"Medford",
"/geoserver/wms?SERVICE=WMS",
{layers: "medford"},
{isBaseLayer: false}
)]
});
controls.push(
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
);
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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 6/27
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.
Ext.onReady(function() {
app = new Ext.Viewport({
layout: "border",
items: items
});
});
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.
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 7/27
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:
{
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
numZoomLevels: 19,
controls: controls
},
extent: OpenLayers.Bounds.fromArray([
-122.911, 42.291,
-122.787,42.398
]),
layers: [new OpenLayers.Layer.WMS(
"Medford",
"/geoserver/wms?SERVICE=WMS",
{layers: "medford"},
{isBaseLayer: false}
)]
}
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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 8/27
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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 9/27
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/ext-
3.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.
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 10/27
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/cgi-
bin/mailman/listinfo/users (jika anda user
GeoExt library)
Developers list http://www.geoext.org/cgi-
bin/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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 11/27
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 record’s
styles field, atau menghasilkan WMS
GetLegendGraphic requests.
Tasks
1. buka map.html di teks editor. Tambahkan
definisi legend panel berikut pada akhir
application’s 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. items.push({
3. xtype: "gx_legendpanel",
4. region: "east",
5. width: 200,
6. autoScroll: true,
7. padding: 5
8. });
2.4.1. kontrol OpenLayers
WMSGetFeatureInfo dan GeoExt
Popups
Control OpenLayers.Control.WMSGetFeatureInfo
dan GeoExt.Popup dan juga Ext.grid.PropertyGrid
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 12/27
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
document’s head, yang memberi style utk
popup’s anchor:
2. <link rel="stylesheet" type="text/css" href="geoext/resources/css/popup.css">
Note
GeoExt menyediakan file CSS yang mengandung
semua style yang dibutuhkan oleh widgets. Jadi
jika ingin menghindari kekhawatiran membutuhkan
sumber CSS,anda dapat memasukkan geoext-
all.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. controls.push(new OpenLayers.Control.WMSGetFeatureInfo({
5. autoActivate: true,
6. infoFormat: "application/vnd.ogc.gml",
7. maxFeatures: 3,
8. eventListeners: {
9. "getfeatureinfo": function(e) {
10. var items = [];
11. Ext.each(e.features, function(feature) {
12. items.push({
13. xtype: "propertygrid",
14. title: feature.fid,
15. source: feature.attributes
16. });
17. });
18. new GeoExt.Popup({
19. title: "Feature Info",
20. width: 200,
21. height: 200,
22. layout: "accordion",
23. map: app.mapPanel,
24. location: e.xy,
25. items: items
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 13/27
26. }).show();
27. }
28. }
29.}));
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:
Ext.each(e.features, function(feature) {
items.push({
xtype: "propertygrid",
title: feature.fid,
source: feature.attributes
});
});
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:
new GeoExt.Popup({
title: "Feature Info",
width: 200,
height: 200,
layout: "accordion",
map: app.mapPanel,
location: e.xy,
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 14/27
items: items
}).show();
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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 15/27
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. items.push({
3. xtype: "grid",
4. ref: "featureGrid",
5. title: "Feature Table",
6. region: "south",
7. height: 150,
8. sm: new GeoExt.grid.FeatureSelectionModel(),
9. store: new Ext.data.Store(),
10. columns: [],
11. bbar: []
12.});
14.items.push({
15. xtype: "grid",
16. ref: "featureGrid",
17. title: "Feature Table",
18. region: "south",
19. height: 150,
20. sm: new GeoExt.grid.FeatureSelectionModel(),
21. store: new GeoExt.data.FeatureStore({
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 16/27
22. fields: [
23. {name: "owner", type: "string"},
24. {name: "agency", type: "string"},
25. {name: "name", type: "string"},
26. {name: "usage", type: "string"},
27. {name: "parktype", type: "string"},
28. {name: "number_fac", type: "int"},
29. {name: "area", type: "float"},
30. {name: "len", type: "float"}
31. ],
32. proxy: new GeoExt.data.ProtocolProxy({
33. protocol: new OpenLayers.Protocol.WFS({
34. url: "/geoserver/ows",
35. version: "1.1.0",
36. featureType: "parks",
37. featureNS: "http://medford.opengeo.org",
38. srsName: "EPSG:4326"
39. })
40. }),
41. autoLoad: true
42. }),
43. columns: [
44. {header: "owner", dataIndex: "owner"},
45. {header: "agency", dataIndex: "agency"},
46. {header: "name", dataIndex: "name"},
47. {header: "usage", dataIndex: "usage"},
48. {header: "parktype", dataIndex: "parktype"},
49. {xtype: "numbercolumn", header: "number_fac", dataIndex: "number_fac"},
50. {xtype: "numbercolumn", header: "area", dataIndex: "area"},
51. {xtype: "numbercolumn", header: "len", dataIndex: "len"}
52. ],
53. bbar: []
54.});
56.var vectorLayer = new OpenLayers.Layer.Vector("Editable features");
57.Ext.onReady(function() {
58. app.mapPanel.map.addLayer(vectorLayer);
59. app.featureGrid.store.bind(vectorLayer);
60. app.featureGrid.getSelectionModel().bind(vectorLayer);
61.});
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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 17/27
GeoExt.grid.FeatureSelectionModel, yang kami
gunakan ketimbang model seleksi default:
sm: new GeoExt.grid.FeatureSelectionModel(),
saat ditambahkan vector layer ke peta, kita harus
mengikat model seleksi dan store ke:
app.featureGrid.store.bind(vectorLayer);
app.featureGrid.getSelectionModel().bind(vectorLayer);
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 besar-
pada implementasi kami ini hal tsb berarti grid
dan layer akan dibersihkan saat kami memilih
raster layer.
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 18/27
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 response’s 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. var rawAttributeData;
3. var read = OpenLayers.Format.WFSDescribeFeatureType.prototype.read;
4. OpenLayers.Format.WFSDescribeFeatureType.prototype.read = function() {
5. rawAttributeData = read.apply(this, arguments);
6. return rawAttributeData;
7. };
9. function reconfigure(store, url) {
10. var fields = [], columns = [], geometryName, geometryType;
11. // regular expression to detect the geometry column
12. var geomRegex = /gml:(Multi)?(Point|Line|Polygon|Surface|Geometry).*/;
13. var types = {
14. // mapping of xml schema data types to Ext JS data types
15. "xsd:int": "int",
16. "xsd:short": "int",
17. "xsd:long": "int",
18. "xsd:string": "string",
19. "xsd:dateTime": "string",
20. "xsd:double": "float",
21. "xsd:decimal": "float",
22. // mapping of geometry types
23. "Line": "Path",
24. "Surface": "Polygon"
25. };
26. store.each(function(rec) {
27. var type = rec.get("type");
28. var name = rec.get("name");
29. var match = geomRegex.exec(type);
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 19/27
30. if (match) {
31. // we found the geometry column
32. geometryName = name;
33. } else {
34. // we have an attribute column
35. fields.push({
36. name: name,
37. type: types[type]
38. });
39. columns.push({
40. xtype: types[type] == "string" ?
41. "gridcolumn" :
42. "numbercolumn",
43. dataIndex: name,
44. header: name
45. });
46. }
47. });
48. app.featureGrid.reconfigure(new GeoExt.data.FeatureStore({
49. autoLoad: true,
50. proxy: new GeoExt.data.ProtocolProxy({
51. protocol: new OpenLayers.Protocol.WFS({
52. url: url,
53. version: "1.1.0",
54. featureType: rawAttributeData.featureTypes[0].typeName,
55. featureNS: rawAttributeData.targetNamespace,
56. srsName: "EPSG:4326",
57. geometryName: geometryName,
58. maxFeatures: 250
59. })
60. }),
61. fields: fields
62. }), new Ext.grid.ColumnModel(columns));
63. app.featureGrid.store.bind(vectorLayer);
64. app.featureGrid.getSelectionModel().bind(vectorLayer);
65.}
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:
67.function setLayer(model, node) {
68. if(!node || node.layer instanceof OpenLayers.Layer.Vector) {
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 20/27
69. return;
70. }
71. vectorLayer.removeAllFeatures();
72. app.featureGrid.reconfigure(
73. new Ext.data.Store(),
74. new Ext.grid.ColumnModel([])
75. );
76. var layer = node.layer;
77. var url = layer.url.split("?")[0]; // the base url without params
78. var schema = new GeoExt.data.AttributeStore({
79. url: url,
80. // request specific params
81. baseParams: {
82. "SERVICE": "WFS",
83. "REQUEST": "DescribeFeatureType",
84. "VERSION": "1.1.0",
85. "TYPENAME": layer.params.LAYERS
86. },
87. autoLoad: true,
88. listeners: {
89. "load": function(store) {
90. app.featureGrid.setTitle(layer.name);
91. reconfigure(store, url);
92. }
93. }
94. });
95.}
96.
97.Ext.onReady(function() {
98. app.tree.getSelectionModel().on(
99. "selectionchange", setLayer
100. );
101. });
Catatan kode ini memanggil fungsi reconfigure
pada store’s 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.
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 21/27
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 WFS-
T 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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 22/27
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. var modifyControl = new OpenLayers.Control.ModifyFeature(
3. vectorLayer, {autoActivate: true}
4. );
5. var drawControl = new OpenLayers.Control.DrawFeature(
6. vectorLayer,
7. OpenLayers.Handler.Polygon,
8. {handlerOptions: {multi: true}}
9. );
10.controls.push(modifyControl, drawControl);
12.Ext.onReady(function() {
13. var sm = app.featureGrid.getSelectionModel();
14. sm.unbind();
15. sm.bind(modifyControl.selectControl);
16. sm.on("beforerowselect", function() { sm.clearSelections(); });
17.});
19.Ext.onReady(function() {
20. var bbar = app.featureGrid.getBottomToolbar();
21. bbar.add([{
22. text: "Delete",
23. handler: function() {
24. app.featureGrid.getSelectionModel().each(function(rec) {
25. var feature = rec.getFeature();
26. modifyControl.unselectFeature(feature);
27. vectorLayer.removeFeatures([feature]);
28. });
29. }
30. }, new GeoExt.Action({
31. control: drawControl,
32. text: "Create",
33. enableToggle: true
34. })]);
35. bbar.doLayout();
36.});
38.xtype: "editorgrid",
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 23/27
39.ref: "featureGrid",
41.columns: [
42. {header: "owner", dataIndex: "owner", editor: {xtype: "textfield"}},
43. {header: "agency", dataIndex: "agency", editor: {xtype: "textfield"}},
44. {header: "name", dataIndex: "name", editor: {xtype: "textfield"}},
45. {header: "usage", dataIndex: "usage", editor: {xtype: "textfield"}},
46. {header: "parktype", dataIndex: "parktype", editor: {xtype: "textfield"}},
47. {xtype: "numbercolumn", header: "number_fac", dataIndex: "number_fac",
48. editor: {xtype: "numberfield"}},
49. {xtype: "numbercolumn", header: "area", dataIndex: "area",
50. editor: {xtype: "numberfield"}},
51. {xtype: "numbercolumn", header: "len", dataIndex: "len",
52. editor: {xtype: "numberfield"}}
53.],
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:
var modifyControl = new OpenLayers.Control.ModifyFeature(
vectorLayer, {autoActivate: true}
);
var drawControl = new OpenLayers.Control.DrawFeature(
vectorLayer,
OpenLayers.Handler.Polygon,
{handlerOptions: {multi: true}}
);
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:
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 24/27
var sm = app.featureGrid.getSelectionModel();
sm.unbind();
sm.bind(modifyControl.selectControl);
tidak masuk akal memilih multiple fitur utk editing,
kami ingin memastikan hanya satu fitur yg dipilih
pada suatu waktu:
sm.on("beforerowselect", function() { sm.clearSelections(); });
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.
{
text: "Delete",
handler: function() {
app.featureGrid.getSelectionModel().each(function(rec) {
var feature = rec.getFeature();
modifyControl.unselectFeature(feature);
vectorLayer.removeFeatures([feature]);
});
}
}
Di dalam handler, kita melangkah melalui grid’s
current selection. Sebelum menghilangkan record,
kami memakai modifyControl’s 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
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 25/27
Action. enableToggle option diturunkan dari
Ext.Action dan artinya tombol tsb adalah toggle,
bias di-on dan off-kan:
new GeoExt.Action({
control: drawControl,
text: "Create",
enableToggle: true
})
Setelah menambah tombol baru, kita panggil
doLayout() pada toolbar, utk menjamin tombol tsb
sesuai:
bbar.doLayout();
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. function reconfigure(store, url) {
3. var fields = [], columns = [], geometryName, geometryType;
4. // regular expression to detect the geometry column
5. var geomRegex = /gml:(Multi)?(Point|Line|Polygon|Surface|Geometry).*/;
6. // mapping of xml schema data types to Ext JS data types
7. var types = {
8. "xsd:int": "int",
9. "xsd:short": "int",
10. "xsd:long": "int",
11. "xsd:string": "string",
12. "xsd:dateTime": "string",
13. "xsd:double": "float",
14. "xsd:decimal": "float",
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 26/27
15. "Line": "Path",
16. "Surface": "Polygon"
17. };
18. store.each(function(rec) {
19. var type = rec.get("type");
20. var name = rec.get("name");
21. var match = geomRegex.exec(type);
22. if (match) {
23. // we found the geometry column
24. geometryName = name;
25. // Geometry type for the sketch handler:
26. // match[2] is "Point", "Line", "Polygon", "Surface" or "Geometry"
27. geometryType = types[match[2]] || match[2];
28. } else {
29. // we have an attribute column
30. fields.push({
31. name: name,
32. type: types[type]
33. });
34. columns.push({
35. xtype: types[type] == "string" ?
36. "gridcolumn" :
37. "numbercolumn",
38. dataIndex: name,
39. header: name,
40. // textfield editor for strings, numberfield for others
41. editor: {
42. xtype: types[type] == "string" ?
43. "textfield" :
44. "numberfield"
45. }
46. });
47. }
48. });
49. app.featureGrid.reconfigure(new GeoExt.data.FeatureStore({
50. autoLoad: true,
51. proxy: new GeoExt.data.ProtocolProxy({
52. protocol: new OpenLayers.Protocol.WFS({
53. url: url,
54. version: "1.1.0",
55. featureType: rawAttributeData.featureTypes[0].typeName,
56. featureNS: rawAttributeData.targetNamespace,
57. srsName: "EPSG:4326",
58. geometryName: geometryName,
59. maxFeatures: 250
60. })
61. }),
62. fields: fields
63. }), new Ext.grid.ColumnModel(columns));
64. app.featureGrid.store.bind(vectorLayer);
65. app.featureGrid.getSelectionModel().bind(vectorLayer);
10/28/13 December | 2012 | PUTU Herry (G651114041)
herryunud83.wordpress.com/2012/12/ 27/27
66.
67. // Set the correct sketch handler according to the geometryType
68. drawControl.handler = new OpenLayers.Handler[geometryType](
69. drawControl, drawControl.callbacks, drawControl.handlerOptions
70. );
71.}
Permalink.
Blog at WordPress.com. | The Yoko Theme.
Top