source:
trunk/workshop-routing-foss4g/web/GeoExt/examples/renderer.js
@
76
Revision 76, 3.8 KB checked in by djay, 13 years ago (diff) | |
---|---|
|
Line | |
---|---|
1 | /** |
2 | * Copyright (c) 2008-2010 The Open Source Geospatial Foundation |
3 | * |
4 | * Published under the BSD license. |
5 | * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text |
6 | * of the license. |
7 | */ |
8 | |
9 | /** api: example[renderer] |
10 | * Feature Renderer |
11 | * ---------------- |
12 | * Render a vector feature with multiple symbolizers in a box component. |
13 | */ |
14 | |
15 | var blue = { |
16 | fillColor: "blue", |
17 | fillOpacity: 0.25, |
18 | strokeColor: "blue", |
19 | strokeWidth: 2, |
20 | pointRadius: 5 |
21 | }; |
22 | |
23 | var custom = { |
24 | point: { |
25 | graphicName: "star", |
26 | pointRadius: 8, |
27 | fillColor: "yellow", |
28 | strokeColor: "red", |
29 | strokeWidth: 1 |
30 | }, |
31 | line: { |
32 | strokeColor: "#669900", |
33 | strokeWidth: 3 |
34 | }, |
35 | poly: { |
36 | fillColor: "olive", |
37 | fillOpacity: 0.25, |
38 | strokeColor: "#666666", |
39 | strokeWidth: 2, |
40 | strokeDashstyle: "dot" |
41 | } |
42 | }; |
43 | |
44 | var stacked = { |
45 | point: [{ |
46 | pointRadius: 8, |
47 | fillColor: "white", |
48 | strokeColor: "red", |
49 | strokeWidth: 2 |
50 | }, { |
51 | graphicName: "star", |
52 | pointRadius: 5, |
53 | fillColor: "red" |
54 | }], |
55 | line: [{ |
56 | strokeColor: "red", |
57 | strokeWidth: 5 |
58 | }, { |
59 | strokeColor: "#ff9933", |
60 | strokeWidth: 2 |
61 | }], |
62 | poly: [{ |
63 | strokeWidth: 3, |
64 | fillColor: "white", |
65 | strokeColor: "#669900" |
66 | }, { |
67 | strokeWidth: 2, |
68 | fillOpacity: 0, |
69 | strokeColor: "red", |
70 | strokeDashstyle: "dot" |
71 | }] |
72 | }; |
73 | |
74 | var configs = [{ |
75 | symbolType: "Point", |
76 | renderTo: "point_default" |
77 | }, { |
78 | symbolType: "Line", |
79 | renderTo: "line_default" |
80 | }, { |
81 | symbolType: "Polygon", |
82 | renderTo: "poly_default" |
83 | }, { |
84 | symbolType: "Point", |
85 | symbolizers: [blue], |
86 | renderTo: "point_blue" |
87 | }, { |
88 | symbolType: "Line", |
89 | symbolizers: [blue], |
90 | renderTo: "line_blue" |
91 | }, { |
92 | symbolType: "Polygon", |
93 | symbolizers: [blue], |
94 | renderTo: "poly_blue" |
95 | }, { |
96 | symbolType: "Point", |
97 | symbolizers: [custom.point], |
98 | renderTo: "point_custom" |
99 | }, { |
100 | symbolType: "Line", |
101 | symbolizers: [custom.line], |
102 | renderTo: "line_custom" |
103 | }, { |
104 | symbolType: "Polygon", |
105 | symbolizers: [custom.poly], |
106 | renderTo: "poly_custom" |
107 | }, { |
108 | symbolType: "Point", |
109 | symbolizers: stacked.point, |
110 | renderTo: "point_stacked" |
111 | }, { |
112 | symbolType: "Line", |
113 | symbolizers: stacked.line, |
114 | renderTo: "line_stacked" |
115 | }, { |
116 | symbolType: "Polygon", |
117 | symbolizers: stacked.poly, |
118 | renderTo: "poly_stacked" |
119 | }]; |
120 | |
121 | Ext.onReady(function() { |
122 | for(var i=0; i<configs.length; ++i) { |
123 | new GeoExt.FeatureRenderer(configs[i]); |
124 | } |
125 | $("render").onclick = render; |
126 | }); |
127 | |
128 | var format = new OpenLayers.Format.WKT(); |
129 | var renderer, win; |
130 | function render() { |
131 | var wkt = $("wkt").value; |
132 | var feature; |
133 | try { |
134 | feature = format.read(wkt) |
135 | } catch(err) { |
136 | $("wkt").value = "Bad WKT: " + err; |
137 | } |
138 | var symbolizers; |
139 | try { |
140 | var value = $("symbolizers").value; |
141 | symbolizers = eval("(" + value + ")"); |
142 | if (!symbolizers || symbolizers.constructor !== Array) { |
143 | throw "Must be an array literal"; |
144 | } |
145 | } catch(err) { |
146 | $("symbolizers").value = "Bad symbolizers: " + err + "\n\n" + value; |
147 | symbolizers = null; |
148 | } |
149 | if(feature && symbolizers) { |
150 | if(!win) { |
151 | renderer = new GeoExt.FeatureRenderer({ |
152 | feature: feature, |
153 | symbolizers: symbolizers, |
154 | width: 150, |
155 | style: {margin: 4} |
156 | }); |
157 | win = new Ext.Window({ |
158 | closeAction: "hide", |
159 | layout: "fit", |
160 | width: 175, |
161 | items: [renderer] |
162 | }); |
163 | } else { |
164 | renderer.update({ |
165 | feature: feature, |
166 | symbolizers: symbolizers |
167 | }); |
168 | } |
169 | win.show(); |
170 | } |
171 | } |
172 |
Note: See TracBrowser
for help on using the repository browser.