source:
trunk/workshop-routing-foss4g/web/GeoExt/examples/renderer.js
@
77
Revision 76, 3.8 KB checked in by djay, 13 years ago (diff) | |
---|---|
|
Rev | Line | |
---|---|---|
[76] | 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.