Mercurial > gemma
comparison client/src/components/map/Map.vue @ 4507:a912b1458834
client: Map: use rgba for styling layers
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 02 Oct 2019 16:25:10 +0200 |
parents | 8c98d801e62e |
children | 7cca4aa9a04a |
comparison
equal
deleted
inserted
replaced
4506:e020e6e34ad7 | 4507:a912b1458834 |
---|---|
317 }); | 317 }); |
318 this.$store.dispatch("map/openLayersMap", this.map); | 318 this.$store.dispatch("map/openLayersMap", this.map); |
319 this.$store.dispatch("map/initIdentifyTool", this.map); | 319 this.$store.dispatch("map/initIdentifyTool", this.map); |
320 }, | 320 }, |
321 loadStyles() { | 321 loadStyles() { |
322 const getRGBA = color => { | |
323 return ( | |
324 "rgba(" + | |
325 parseInt(color.slice(1, 3), 16) + | |
326 ", " + | |
327 parseInt(color.slice(3, 5), 16) + | |
328 ", " + | |
329 parseInt(color.slice(5, 7), 16) + | |
330 (color.length > 7 | |
331 ? ", " + parseInt(color.slice(7, 9), 16) / 255 | |
332 : "") + | |
333 ")" | |
334 ); | |
335 }; | |
322 // load configured bottleneck colors | 336 // load configured bottleneck colors |
323 HTTP.get("/system/settings", { | 337 HTTP.get("/system/settings", { |
324 headers: { "X-Gemma-Auth": localStorage.getItem("token") } | 338 headers: { "X-Gemma-Auth": localStorage.getItem("token") } |
325 }).then(response => { | 339 }).then(response => { |
326 let btlnStrokeC = response.data.bottlenecks_stroke, | 340 let btlnStrokeC = getRGBA(response.data.bottlenecks_stroke), |
327 btlnFillC = response.data.bottlenecks_fill, | 341 btlnFillC = getRGBA(response.data.bottlenecks_fill), |
328 strFillC = response.data.stretches_fill, | 342 strFillC = getRGBA(response.data.stretches_fill), |
329 strStrokeC = response.data.stretches_stroke, | 343 strStrokeC = getRGBA(response.data.stretches_stroke), |
330 secStrokeC = response.data.sections_stroke, | 344 secStrokeC = getRGBA(response.data.sections_stroke), |
331 secFillC = response.data.sections_fill, | 345 secFillC = getRGBA(response.data.sections_fill), |
332 fwd1StrokeC = response.data.fairwaydimensionslos1_stroke, | 346 fwd1StrokeC = getRGBA(response.data.fairwaydimensionslos1_stroke), |
333 fwd1FillC = response.data.fairwaydimensionslos1_fill, | 347 fwd1FillC = getRGBA(response.data.fairwaydimensionslos1_fill), |
334 fwd2StrokeC = response.data.fairwaydimensionslos2_stroke, | 348 fwd2StrokeC = getRGBA(response.data.fairwaydimensionslos2_stroke), |
335 fwd2FillC = response.data.fairwaydimensionslos2_fill, | 349 fwd2FillC = getRGBA(response.data.fairwaydimensionslos2_fill), |
336 fwd3StrokeC = response.data.fairwaydimensionslos3_stroke, | 350 fwd3StrokeC = getRGBA(response.data.fairwaydimensionslos3_stroke), |
337 fwd3FillC = response.data.fairwaydimensionslos3_fill, | 351 fwd3FillC = getRGBA(response.data.fairwaydimensionslos3_fill), |
338 wwpStokeC = response.data.waterwayprofiles_stroke; | 352 wwpStokeC = getRGBA(response.data.waterwayprofiles_stroke); |
339 let btlnStyle = new Style({ | 353 let btlnStyle = new Style({ |
340 stroke: new Stroke({ | 354 stroke: new Stroke({ |
341 color: btlnStrokeC, | 355 color: btlnStrokeC, |
342 width: 4 | 356 width: 4 |
343 }), | 357 }), |