From c1a49d7b747358bd7ba369b04d46c8b36485afa8 Mon Sep 17 00:00:00 2001
From: Peter Morstein <morstein.peter@gmail.com>
Date: Fri, 24 Sep 2021 11:11:31 +0200
Subject: [PATCH] add layer visibility
---
frontend/src/AvgLayer.ts | 5 +++++
frontend/src/Legend.vue | 14 ++++++++------
frontend/src/MapProperties.ts | 10 ++++++++++
frontend/src/StationLayer.ts | 9 +++++----
frontend/src/WeatherMap.vue | 19 +++++++++++++------
5 files changed, 41 insertions(+), 16 deletions(-)
create mode 100644 frontend/src/AvgLayer.ts
diff --git a/frontend/src/AvgLayer.ts b/frontend/src/AvgLayer.ts
new file mode 100644
index 0000000..41ebae9
--- /dev/null
+++ b/frontend/src/AvgLayer.ts
@@ -0,0 +1,5 @@
+export default class AvgLayer{
+
+
+
+}
\ No newline at end of file
diff --git a/frontend/src/Legend.vue b/frontend/src/Legend.vue
index 0703c34..212195a 100644
--- a/frontend/src/Legend.vue
+++ b/frontend/src/Legend.vue
@@ -10,7 +10,7 @@
<v-checkbox
v-model="stationLayer"
hide-details
- @change="layerChanged('stationLayer')"
+ @change="$emit('layerVisibility',$event,'stationLayer')"
dense
>
<template v-slot:label>
@@ -18,16 +18,17 @@
Wetterstationen
</template>
</v-checkbox>
- <div>
+ <div style="margin-top:1em;">
<div style="float:left;margin-top:5px;">
- -20 °C
+ {{parseInt(this.mapProperties.getTemperatureBound().min)}} °C
+
</div>
<div
class="gradient mx-1"
:style="{ backgroundImage: createStationColorramp() }"
></div>
<div style="float:left;margin-top:5px;">
- 10 °C
+ {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
</div>
</div>
@@ -39,7 +40,7 @@
:max="daterange[1]"
thumb-label="always"
thumb-size="29px"
- style="margin-top:4em;margin-bottom:-25px;"
+ style="margin-top:5em;margin-bottom:-25px;"
dense
@change="$emit('stationUpdate', $event)"
>
@@ -153,6 +154,7 @@ import {Vue, Ref, Component, Emit, Prop } from 'vue-property-decorator';
import MapProperties from './MapProperties';
import { TemperatureSeries } from './StationLayer';
import TemperatureLegendChart from './TemperatureLegendChart';
+import StationLayer from './StationLayer';
@Component({})
export default class Legend extends Vue{
@@ -161,7 +163,7 @@ export default class Legend extends Vue{
private layer2: boolean = true;
private stationLayer: boolean = true;
private anomalieLayer: boolean = true;
- private daterange: number[] = [1940, 2020];
+ private daterange: number[] = [1949, 2020];
private range1: number[] = [1960, 1990];
private range2: number[] = [1991, 2020];
private stationYear: number = 1990;
diff --git a/frontend/src/MapProperties.ts b/frontend/src/MapProperties.ts
index 93851ea..2357887 100644
--- a/frontend/src/MapProperties.ts
+++ b/frontend/src/MapProperties.ts
@@ -5,6 +5,7 @@ export default class MapProperties{
private map: Map;
private projection: string;
+ private temperatureBounds: {min: number, max: number} = {min: 0, max: 0}; //min/max of all station temperature, expect for colormap
constructor(map:Map, projection: string){
this.map = map;
@@ -20,6 +21,14 @@ export default class MapProperties{
return icon.replace("%color%", color.replace("#", "%23"));
}
+ public setTemperatureBound(bound: {min: number, max: number}):void{
+ this.temperatureBounds = bound;
+ }
+
+ public getTemperatureBound():{min: number, max: number}{
+ return this.temperatureBounds;
+ }
+
public getZoomLevel():number{
return this.map.getView().getZoom();
}
@@ -28,4 +37,5 @@ export default class MapProperties{
return this.projection;
}
+
}
\ No newline at end of file
diff --git a/frontend/src/StationLayer.ts b/frontend/src/StationLayer.ts
index b90a854..ae273d0 100644
--- a/frontend/src/StationLayer.ts
+++ b/frontend/src/StationLayer.ts
@@ -4,7 +4,6 @@ import GeoJSON from 'ol/format/GeoJSON';
import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style';
import MapProperties from './MapProperties';
import colormap from 'colormap';
-import { timeout } from 'd3-timer';
export interface TemperatureSeries{
date: number;
@@ -45,14 +44,16 @@ export default class StationLayer{
if(feature.get(element)<this.allTemperatureBounds.min){
this.allTemperatureBounds.min = feature.get(element);
}else if(feature.get(element)>this.allTemperatureBounds.max){
- this.allTemperatureBounds.max = feature.get(element);
+ this.allTemperatureBounds.max = feature.get(element) + 2;
}
}
});
});
+
+ this.mapProperties.setTemperatureBound(this.allTemperatureBounds);
}
-
+
});
@@ -93,7 +94,7 @@ export default class StationLayer{
image: new Icon({
crossOrigin: 'anonymous',
imgSize: [24, 24],
- scale: this.mapProperties.getZoomLevel() * 0.1,
+ scale: this.mapProperties.getZoomLevel() * 0.15,
src: this.mapProperties.getTemperatureIcon(iconColor)
})
});
diff --git a/frontend/src/WeatherMap.vue b/frontend/src/WeatherMap.vue
index 9767c15..e4862d1 100644
--- a/frontend/src/WeatherMap.vue
+++ b/frontend/src/WeatherMap.vue
@@ -2,7 +2,7 @@
<template>
<div id="weatherContainer">
- <Legend id="legend" @stationUpdate="stationupdate" :mapProperties="mapProperties"></Legend>
+ <Legend id="legend" @stationUpdate="stationupdate" @layerVisibility="layerVisibility" :mapProperties="mapProperties"></Legend>
<div ref="weathermap" id="weathermap" />
@@ -80,7 +80,7 @@
</style>
<script lang="ts">
-import {Vue, Ref, Component } from 'vue-property-decorator';
+import {Vue, Ref, Component, Watch } from 'vue-property-decorator';
import View from 'ol/View';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
@@ -126,8 +126,8 @@ export default class WeatherMap extends Vue{
})
],
view: new View({
- zoom: 6.45,
- center: fromLonLat([11, 51.3]),
+ zoom: 6.49,
+ center: fromLonLat([4.0, 51.3]),
constrainResolution: true,
projection: this.projection
}),
@@ -135,8 +135,7 @@ export default class WeatherMap extends Vue{
});
this.mapProperties = new MapProperties(this.map, this.projection);
-
-
+
this.appendStationLayer();
this.map.on('click', (evt) => {
@@ -182,6 +181,14 @@ export default class WeatherMap extends Vue{
this.stationLayer.newYear(event);
}
+ protected layerVisibility(isVisible: boolean, layer:string):void{
+ //this.stationLayer.getLayer().setVisible(this.visibleLayers.has(StationLayer.layerName));
+ if(layer=='stationLayer'){
+ this.stationLayer.getLayer().setVisible(isVisible);
+ }
+ }
+
+
};
</script>
--
GitLab