Mercurial > gemma

comparison client/src/components/map/styles.js @ 3548:f3102fa16a69

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: data availability/accuracy: inject mapId into layer/styles factory to fix display issue with two maps This layer displays features based on which other layers are visible. To detect those other layers visibility realiably, the layer needs to be aware about the map it belongs to.
author Markus Kottlaender <markus@intevation.de>
date Fri, 31 May 2019 12:45:30 +0200
parents 6cdfc05fd6b0
children 9e296d686f16
comparison
equal deleted inserted replaced
3547:47c61ea894b1 3548:f3102fa16a69
127 //, zIndex: 10 127 //, zIndex: 10
128 }) 128 })
129 }) 129 })
130 }; 130 };
131 131
132 export default { 132 export default function(mapId) {
133 stretches(feature) { 133 return {
134 let style = styles.yellow2; 134 stretches(feature) {
135 if (feature.get("highlighted")) { 135 let style = styles.yellow2;
136 style = styles.yellow3; 136 if (feature.get("highlighted")) {
137 } 137 style = styles.yellow3;
138 return style; 138 }
139 }, 139 return style;
140 sections(feature) { 140 },
141 let style = styles.orange1; 141 sections(feature) {
142 if (feature.get("highlighted")) { 142 let style = styles.orange1;
143 style = styles.orange2; 143 if (feature.get("highlighted")) {
144 } 144 style = styles.orange2;
145 return style; 145 }
146 }, 146 return style;
147 fwd1() { 147 },
148 return [styles.blue1, styles.textFW1]; 148 fwd1() {
149 }, 149 return [styles.blue1, styles.textFW1];
150 fwd2() { 150 },
151 return [styles.blue2, styles.textFW2]; 151 fwd2() {
152 }, 152 return [styles.blue2, styles.textFW2];
153 fwd3() { 153 },
154 return [styles.blue3, styles.textFW3]; 154 fwd3() {
155 }, 155 return [styles.blue3, styles.textFW3];
156 bottleneck() { 156 },
157 return styles.yellow1; 157 bottleneck() {
158 }, 158 return styles.yellow1;
159 bottleneckStatus(feature, resolution, isLegend) { 159 },
160 let s = []; 160 bottleneckStatus(feature, resolution, isLegend) {
161 if ((feature.get("fa_critical") && resolution > 15) || isLegend) { 161 let s = [];
162 let bnCenter = getCenter(feature.getGeometry().getExtent()); 162 if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
163 s.push( 163 let bnCenter = getCenter(feature.getGeometry().getExtent());
164 new Style({ 164 s.push(
165 geometry: new Point(bnCenter), 165 new Style({
166 image: new Icon({ 166 geometry: new Point(bnCenter),
167 src: require("@/assets/marker-bottleneck-critical.png"), 167 image: new Icon({
168 anchor: [0.5, 0.5], 168 src: require("@/assets/marker-bottleneck-critical.png"),
169 scale: isLegend ? 0.5 : 1 169 anchor: [0.5, 0.5],
170 }) 170 scale: isLegend ? 0.5 : 1
171 }) 171 })
172 ); 172 })
173 } 173 );
174 if (feature.get("fa_critical") && !isLegend) { 174 }
175 s.push(styles.red1); 175 if (feature.get("fa_critical") && !isLegend) {
176 } 176 s.push(styles.red1);
177 return s; 177 }
178 }, 178 return s;
179 bottleneckFairwayAvailability(feature, resolution, isLegend) { 179 },
180 let s = []; 180 bottleneckFairwayAvailability(feature, resolution, isLegend) {
181 if (isLegend) { 181 let s = [];
182 s.push( 182 if (isLegend) {
183 new Style({ 183 s.push(
184 image: new Icon({ 184 new Style({
185 src: require("@/assets/fa-diagram.png"), 185 image: new Icon({
186 anchor: [0.5, 0.5], 186 src: require("@/assets/fa-diagram.png"),
187 scale: 1 187 anchor: [0.5, 0.5],
188 }) 188 scale: 1
189 }) 189 })
190 ); 190 })
191 } 191 );
192 if ( 192 }
193 feature.get("fa_critical") && 193 if (
194 feature.get("fa_data") && 194 feature.get("fa_critical") &&
195 resolution > 15 195 feature.get("fa_data") &&
196 ) { 196 resolution > 15
197 let data = feature.get("fa_data"); 197 ) {
198 let lnwlHeight = (80 / 100) * data.ldc; 198 let data = feature.get("fa_data");
199 let belowThresholdHeight = (80 / 100) * data.below; 199 let lnwlHeight = (80 / 100) * data.ldc;
200 let betweenThresholdHeight = (80 / 100) * data.between; 200 let belowThresholdHeight = (80 / 100) * data.below;
201 let aboveThresholdHeight = (80 / 100) * data.above; 201 let betweenThresholdHeight = (80 / 100) * data.between;
202 202 let aboveThresholdHeight = (80 / 100) * data.above;
203 let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`; 203
204 let lnwl = `<rect x='2' y='${80 - 204 let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
205 lnwlHeight + 205 let lnwl = `<rect x='2' y='${80 -
206 2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`; 206 lnwlHeight +
207 let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`; 207 2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
208 let range2 = `<rect x='12' y='${belowThresholdHeight + 208 let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
209 2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`; 209 let range2 = `<rect x='12' y='${belowThresholdHeight +
210 let range3 = `<rect x='12' y='${80 - 210 2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
211 aboveThresholdHeight + 211 let range3 = `<rect x='12' y='${80 -
212 2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`; 212 aboveThresholdHeight +
213 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`; 213 2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
214 let bnCenter = getCenter(feature.getGeometry().getExtent()); 214 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
215 s.push( 215 let bnCenter = getCenter(feature.getGeometry().getExtent());
216 new Style({ 216 s.push(
217 geometry: new Point(bnCenter), 217 new Style({
218 image: new Icon({ 218 geometry: new Point(bnCenter),
219 src: svg, 219 image: new Icon({
220 anchor: [1.2, 1.2] 220 src: svg,
221 }) 221 anchor: [1.2, 1.2]
222 }) 222 })
223 ); 223 })
224 } 224 );
225 return s; 225 }
226 }, 226 return s;
227 dataAvailability(feature, resolution, isLegend) { 227 },
228 let s = []; 228 dataAvailability(feature, resolution, isLegend) {
229 if (isLegend) { 229 let s = [];
230 s.push( 230 if (isLegend) {
231 new Style({ 231 s.push(
232 image: new Icon({ 232 new Style({
233 src: require("@/assets/da-diagram.png"), 233 image: new Icon({
234 anchor: [0.5, 0.5], 234 src: require("@/assets/da-diagram.png"),
235 scale: 1 235 anchor: [0.5, 0.5],
236 }) 236 scale: 1
237 }) 237 })
238 ); 238 })
239 } else { 239 );
240 // TODO: Get information from feature and check the ranges according to #423, #424, #425 240 } else {
241 let colorWaterlevel = classifications.gmAvailability(feature); 241 // TODO: Get information from feature and check the ranges according to #423, #424, #425
242 let colorComparison = classifications.forecastVsReality(feature); 242 let colorWaterlevel = classifications.gmAvailability(feature);
243 let colorAccuracy = classifications.forecastAccuracy(feature); 243 let colorComparison = classifications.forecastVsReality(feature);
244 let maps = store.state.map.openLayersMaps; 244 let colorAccuracy = classifications.forecastAccuracy(feature);
245 let geom = feature.getGeometry(); 245 let map = store.getters["map/openLayersMap"](mapId);
246 if (!(geom instanceof Point)) { 246 let geom = feature.getGeometry();
247 geom = new Point(getCenter(feature.getGeometry().getExtent())); 247 if (!(geom instanceof Point)) {
248 } 248 geom = new Point(getCenter(feature.getGeometry().getExtent()));
249 maps.forEach(m => { 249 }
250 if ( 250 if (
251 (m.getLayer("BOTTLENECKS").getVisible() && 251 (map.getLayer("BOTTLENECKS").getVisible() &&
252 feature.getId().indexOf("bottlenecks") > -1) || 252 feature.getId().indexOf("bottlenecks") > -1) ||
253 (m.getLayer("SECTIONS").getVisible() && 253 (map.getLayer("SECTIONS").getVisible() &&
254 feature.getId().indexOf("sections") > -1) || 254 feature.getId().indexOf("sections") > -1) ||
255 (m.getLayer("STRETCHES").getVisible() && 255 (map.getLayer("STRETCHES").getVisible() &&
256 feature.getId().indexOf("stretches") > -1) || 256 feature.getId().indexOf("stretches") > -1) ||
257 (m.getLayer("GAUGES").getVisible() && 257 (map.getLayer("GAUGES").getVisible() &&
258 feature.getId().indexOf("gauges") > -1) 258 feature.getId().indexOf("gauges") > -1)
259 ) { 259 ) {
260 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`; 260 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
261 let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`; 261 let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`;
262 let accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`; 262 let accuracy = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`;
272 }) 272 })
273 ); 273 );
274 } 274 }
275 275
276 if ( 276 if (
277 m.getLayer("BOTTLENECKS").getVisible() && 277 map.getLayer("BOTTLENECKS").getVisible() &&
278 feature.getId().indexOf("bottlenecks") > -1 278 feature.getId().indexOf("bottlenecks") > -1
279 ) { 279 ) {
280 let colorUniformTriangle = classifications.surveyCurrency(feature); 280 let colorUniformTriangle = classifications.surveyCurrency(feature);
281 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`; 281 let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='${colorUniformTriangle}'/>`;
282 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}</g></svg>`; 282 let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}</g></svg>`;
288 anchor: [0.5, 1] 288 anchor: [0.5, 1]
289 }) 289 })
290 }) 290 })
291 ); 291 );
292 } 292 }
293 }); 293 }
294 } 294 return s;
295 return s; 295 },
296 }, 296 dma(feature, resolution) {
297 dma(feature, resolution) { 297 if (resolution < 10) {
298 if (resolution < 10) { 298 var s = styles.circleBlue;
299 var s = styles.circleBlue; 299 if (resolution < 6) {
300 if (resolution < 6) { 300 s.setText(
301 s.setText( 301 new Text({
302 new Text({ 302 offsetY: 12,
303 offsetY: 12, 303 font: '10px "Open Sans", "sans-serif"',
304 fill: new Fill({
305 color: "black"
306 }),
307 text: (feature.get("hectometre") / 10).toString()
308 })
309 );
310 }
311 return s;
312 }
313 return [];
314 },
315 gauge(feature, resolution, isLegend) {
316 let waterlevel = feature.get("gm_waterlevel");
317 let text = feature.get("objname");
318 let iconColor = "white";
319 if (waterlevel) {
320 text += "\n(" + waterlevel + " cm)";
321 let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
322 if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
323 if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
324 iconColor = "blue";
325 if (waterlevel > refWaterlevels.HDC) iconColor = "red";
326 }
327
328 return [
329 new Style({
330 image: new Icon({
331 src: require("@/assets/marker-gauge-" + iconColor + ".png"),
332 anchor: [0.5, isLegend ? 0.5 : 1],
333 scale: isLegend ? 0.5 : 1
334 }),
335 text: new Text({
304 font: '10px "Open Sans", "sans-serif"', 336 font: '10px "Open Sans", "sans-serif"',
337 offsetY: 15,
305 fill: new Fill({ 338 fill: new Fill({
306 color: "black" 339 color: "black"
307 }), 340 }),
308 text: (feature.get("hectometre") / 10).toString() 341 backgroundFill: new Fill({
309 }) 342 color: "rgba(255, 255, 255, 0.7)"
310 ); 343 }),
311 } 344 padding: [2, 2, 2, 2],
312 return s; 345 text
346 })
347 })
348 ];
313 } 349 }
314 return []; 350 };
315 }, 351 }
316 gauge(feature, resolution, isLegend) {
317 let waterlevel = feature.get("gm_waterlevel");
318 let text = feature.get("objname");
319 let iconColor = "white";
320 if (waterlevel) {
321 text += "\n(" + waterlevel + " cm)";
322 let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
323 if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
324 if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
325 iconColor = "blue";
326 if (waterlevel > refWaterlevels.HDC) iconColor = "red";
327 }
328
329 return [
330 new Style({
331 image: new Icon({
332 src: require("@/assets/marker-gauge-" + iconColor + ".png"),
333 anchor: [0.5, isLegend ? 0.5 : 1],
334 scale: isLegend ? 0.5 : 1
335 }),
336 text: new Text({
337 font: '10px "Open Sans", "sans-serif"',
338 offsetY: 15,
339 fill: new Fill({
340 color: "black"
341 }),
342 backgroundFill: new Fill({
343 color: "rgba(255, 255, 255, 0.7)"
344 }),
345 padding: [2, 2, 2, 2],
346 text
347 })
348 })
349 ];
350 }
351 };