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 }),