1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<template>
<div id="geshem">
<div id="date">{{ date }}</div>
<div id="time">{{ time }}</div>
<vue-slider ref="slider" v-model="slider" :min=1 :max=7></vue-slider>
</div>
</template>
<script>
import vueSlider from 'vue-slider-component';
import mapboxgl from 'mapbox-gl';
export default {
name: 'geshem',
components: {
'vue-slider': vueSlider
},
data: function () {
return {
imgs: window.imgs,
res: 280,
slider: 7,
rasterCoords: {
140: [
[33.35317413, 33.27232471],
[36.32243686, 33.27232471],
[36.32243686, 30.72293428],
[33.35317413, 30.72293428]
],
280: [
[31.93095218, 34.5156862],
[37.86644267, 34.5156862],
[37.86644267, 29.42911589],
[31.93095218, 29.42911589]
]
},
map: new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
container: 'map',
maxZoom: 10,
minZoom: 5,
zoom: 6.3,
center: [35, 31.9],
hash: false
})
}
},
computed: {
date: function () {
var d = this.imgs[this.res][7-this.slider].substr(0, 8);
return `${d.substr(0, 4)}-${d.substr(4, 2)}-${d.substr(6, 2)}`;
},
time: function () {
var t = this.imgs[this.res][7-this.slider].substr(9, 6);
return `${t.substr(0, 2)}:${t.substr(2, 2)}`;
}
},
created: function () {
var vm = this;
this.map.on('style.load', function () {
var i = 0;
while (i < vm.imgs['140'].length) {
vm.addRadarSource('140', i, vm.imgs['140'][i++])
}
var i = 0;
while (i < vm.imgs['280'].length) {
vm.addRadarSource('280', i, vm.imgs['280'][i++])
}
vm.addRadarLayer('280', 0)
})
},
methods: {
addRadarSource: function(res, i, url) {
this.map.addSource('radar-' + res + '-' + i, {
type: 'image',
url: '/static/img/' + url,
coordinates: this.rasterCoords[res]
})
},
addRadarLayer: function(res, i) {
this.map.addLayer({
id: 'radar-' + res + '-' + i,
source: 'radar-' + res + '-' + i,
type: 'raster',
paint: {
'raster-opacity': 0.85
}
})
},
removeRadarLayer: function(res, i) {
this.map.removeLayer('radar-' + res + '-' + i)
}
},
watch: {
slider: function (to, from) {
this.removeRadarLayer(this.res, 7-from);
this.addRadarLayer(this.res, 7-to);
}
}
}
</script>
<style lang="scss">
#geshem {
position: absolute;
}
#date {
color: white;
font-size: 1.2em;
}
#time {
color: white;
font-size: 1.6em;
}
</style>
|
