Mercurial > dive4elements > gnv-client
comparison gnv/src/main/webapp/scripts/viewport.jsp @ 971:a0e6566cd111
Integrated Openlayers using ext and geoext into the GNV-WebClient
gnv/trunk@1139 c6561f87-3c4e-4783-a992-168aeb5c3f6f
author | Tim Englich <tim.englich@intevation.de> |
---|---|
date | Tue, 01 Jun 2010 12:55:24 +0000 |
parents | |
children | 1bb54da8c8ed |
comparison
equal
deleted
inserted
replaced
970:d91ffd0e8239 | 971:a0e6566cd111 |
---|---|
1 OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; | |
2 Ext.BLANK_IMAGE_URL = "scripts/openlayers/OpenLayers-2.9/theme/default/img/blank.gif"; | |
3 | |
4 /** | |
5 * XXX | |
6 * Change specific attributes for map, wfs-t, etc here. Do not change these | |
7 * settings inline the code! | |
8 */ | |
9 PROJECTION = "EPSG:4326"; | |
10 PROJECTIONS = [PROJECTION, 'EPSG:4326'] // Projection used in projection selector | |
11 MAX_EXTENT = new OpenLayers.Bounds(-17.44,29.41,40.04,77.66); | |
12 INITIAL_CENTER = new OpenLayers.LonLat(5, 55); | |
13 | |
14 Ext.onReady(function() { | |
15 | |
16 /* this function call initialized the layers that are defined by the user. | |
17 * The variable 'layer' and 'layers' are initialized in this function as | |
18 * well, that are used in the following code! So do not remove this function | |
19 * call. | |
20 */ | |
21 initLayers(); | |
22 | |
23 var options = { | |
24 maxExtent: MAX_EXTENT, | |
25 projection: PROJECTION, | |
26 zoom: 5, | |
27 controls: [], | |
28 units: 'm' | |
29 }; | |
30 | |
31 | |
32 /* ------------------------ Create map and add controls ---------------------*/ | |
33 // create map | |
34 map = new OpenLayers.Map(options); | |
35 map.displayProjection = new OpenLayers.Projection(PROJECTION); | |
36 | |
37 // add controls | |
38 | |
39 | |
40 var nav = new OpenLayers.Control.NavigationHistory(); | |
41 map.addControl(nav); | |
42 | |
43 panel = new OpenLayers.Control.Panel(); | |
44 controls = { | |
45 previous: nav.previous, | |
46 next : nav.next, | |
47 navigate: new OpenLayers.Control.MouseDefaults( | |
48 { | |
49 displayClass: 'olControlPan', | |
50 title:'Verschieben der Karte' | |
51 } | |
52 ), | |
53 zoombox: new OpenLayers.Control.ZoomBox( | |
54 { | |
55 displayClass: 'olControlZoomBox', | |
56 title: 'Zum Zoomen ziehen Sie eine Box auf, indem Sie klicken und ziehen' | |
57 } | |
58 ), | |
59 info : new OpenLayers.Control.WMSGetFeatureInfo({ | |
60 displayClass: "olControlFeatureInfo", | |
61 url: 'http://fluggs.wupperverband.de/wmsconnector/com.esri.wms.Esrimap/WV_WMS', | |
62 title: 'Identify features by clicking', | |
63 queryVisible: true, | |
64 eventListeners: { | |
65 getfeatureinfo: function(event) { | |
66 mapPanel.map.addPopup(new OpenLayers.Popup.FramedCloud( | |
67 "chicken", | |
68 mapPanel.map.getLonLatFromPixel(event.xy), | |
69 null, | |
70 event.text, | |
71 null, | |
72 true | |
73 )); | |
74 } | |
75 } | |
76 }) | |
77 }; | |
78 | |
79 for (var key in controls) { | |
80 panel.addControls([controls[key]]); | |
81 } | |
82 | |
83 map.addControl(panel); | |
84 map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: 'true'})); | |
85 map.addControl(new OpenLayers.Control.MouseDefaults()); | |
86 map.addControl(new OpenLayers.Control.ScaleLine()); | |
87 // Displaying the mouse postion | |
88 mousePosition = new OpenLayers.Control.MousePosition(); | |
89 map.addControl(mousePosition); | |
90 | |
91 /* --------------------------------------------------------------------------- */ | |
92 | |
93 // Scale Chooser | |
94 var scaleStore = new GeoExt.data.ScaleStore({map: map}); | |
95 var zoomSelector = new Ext.form.ComboBox({ | |
96 store: scaleStore, | |
97 emptyText: "Zoom Level", | |
98 tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>', | |
99 editable: false, | |
100 triggerAction: 'all', // needed so that the combo box doesn't filter by its current content | |
101 mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes | |
102 }); | |
103 | |
104 zoomSelector.on('select', | |
105 function(combo, record, index) { | |
106 map.zoomTo(record.data.level); | |
107 }, | |
108 this | |
109 ); | |
110 | |
111 map.events.register('zoomend', this, function() { | |
112 var scale = scaleStore.queryBy(function(record){ | |
113 return this.map.getZoom() == record.data.level; | |
114 }); | |
115 | |
116 if (scale.length > 0) { | |
117 scale = scale.items[0]; | |
118 zoomSelector.setValue("1 : " + parseInt(scale.data.scale)); | |
119 } else { | |
120 if (!zoomSelector.rendered) return; | |
121 zoomSelector.clearValue(); | |
122 } | |
123 }); | |
124 | |
125 | |
126 // create MapPanel | |
127 mapPanel = new GeoExt.MapPanel({ | |
128 border: true, | |
129 title: "Karte mit GeoNames Suche", | |
130 region: "center", | |
131 map: map, | |
132 layers: layers, | |
133 bbar: [zoomSelector] | |
134 }); | |
135 | |
136 // map.setCenter(INITIAL_CENTER); | |
137 | |
138 /* --------------------------- Layer Tree ----------------------------------- */ | |
139 | |
140 | |
141 // LayerTree | |
142 var tree = new Ext.tree.TreePanel({ | |
143 border: true, | |
144 enableDD: true, | |
145 region: "east", | |
146 title: "LayerTree", | |
147 width: 200, | |
148 split: true, | |
149 collapsible: false, | |
150 collapseMode: "mini", | |
151 autoScroll: true, | |
152 loader: new Ext.tree.TreeLoader({ | |
153 applyLoader: false, | |
154 }), | |
155 root: { | |
156 nodeType: "async", | |
157 children: [{ | |
158 nodeType: "gx_baselayercontainer", | |
159 expanded: true | |
160 }, { | |
161 nodeType: "gx_overlaylayercontainer", | |
162 expanded: true, | |
163 loader: { | |
164 filter: function(record) { | |
165 var layer = record.get("layer"); | |
166 return layer.displayInLayerSwitcher === true && | |
167 layer.isBaseLayer === false; | |
168 } | |
169 } | |
170 }] | |
171 }, | |
172 rootVisible: false, | |
173 lines: false | |
174 }); | |
175 | |
176 /*-------------------------------- Feature grid -------------------------------*/ | |
177 | |
178 // create legend panel | |
179 legendPanel = new GeoExt.LegendPanel({ | |
180 id: 'legendpanel', | |
181 dynamic: true, | |
182 border: true, | |
183 title: 'Legende', | |
184 collapsible: false, | |
185 split: false, | |
186 defaults: { | |
187 labelCls: 'legend', | |
188 style: 'padding: 5px' | |
189 }, | |
190 bodyStyle: 'padding:5px', | |
191 width: 250, | |
192 autoScroll: true, | |
193 region: 'east' | |
194 //layerStore: mapPanel.layers | |
195 }); | |
196 | |
197 | |
198 // use separate panels | |
199 // Create GUI | |
200 | |
201 var mylegend = new Ext.Panel( | |
202 { | |
203 region: "west", | |
204 title: '', | |
205 split: true, | |
206 width: 250, | |
207 minSize: 225, | |
208 maxSize: 400, | |
209 collapsible: false, | |
210 overflow: 'auto', | |
211 margins: '0 0 0 5', | |
212 layout: 'accordion', | |
213 layoutConfig: { | |
214 animate: true, | |
215 activeOnTop: false | |
216 }, | |
217 items: [ | |
218 tree, | |
219 legendPanel | |
220 ] | |
221 } | |
222 ); | |
223 | |
224 // The main panel | |
225 new Ext.Panel({ | |
226 renderTo: "mapcontainer", | |
227 layout: "border", | |
228 width: 700, | |
229 height: 420, | |
230 items: [mapPanel, mylegend] | |
231 }); | |
232 | |
233 }); |