2.3. Penambahan legend menggunakan WMS 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
- buka map.html di teks editor. Tambahkan definisi legend panel berikut pada akhir application’s script block:
- 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 akan berguna utk menampilkan fitur ke dalam grid yang baik- tanpa perlu membuat store lain secara manual.
Tasks
- 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.
- 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
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,
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.
PUTU Herry (G651114041) 