-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path41_IGCDATA.html
233 lines (207 loc) · 8.22 KB
/
41_IGCDATA.html
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="ol.js"></script>
<link rel="stylesheet" href="ol.css">
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
</script>
</head>
<body>
<!-- 기본틀로 사용하는 양식 -->
<div id="map" class="map"></div>
<input id="time" type="range" value="0" steps="1" />
<div id="info"> </div>
<a href="https://i.imgur.com/gH37jjw.png"></a>
<script>
var BingMapKey = "Ar-WkIA7R3sY5gwqt0oUGHrGTnxGGFCF4EOaAjgZ2D9JdF5EuXZdhpXxbE7PQnxa";
var thunderforest = "49e1ad1fd1054c638c9f20bc8b5f42e6";
//CORS , chrome.exe --disable-web-security --allow-file-access-from-files
//도로 색
var colors = {
'Clement Latour': 'rgba(0, 0, 255, 0.7)',
'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)',
'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)',
'Tom Payne': 'rgba(0, 255, 255, 0.7)',
'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)'
};
//2.
var styleCache = {};
var styleFunction = function (feature) {
var color = colors[feature.get('PLT')];
var style = styleCache[color];
if (!style) {
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: 3
})
});
styleCache[color] = style;
}
return style;
};
var vectorSource = new ol.source.Vector();
//1. layer 생성
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
ol.source.ATTRIBUTION
],
url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
`?apikey=${thunderforest}`
})
}),
new ol.layer.Vector({
source: vectorSource,
style: styleFunction
})
],
target: 'map',
view: new ol.View({
center: [703365.7089403362, 5714629.865071137],
zoom: 9
})
});
//3.도로 데이터 추가: IGC 파일은 GPS 비행 기록기에서 데이터 로그를 교환하기위한 표준을 제공
var igcUrls = [
'data/igc/Clement-Latour.igc',
'data/igc/Damien-de-Baenst.igc',
'data/igc/Sylvain-Dhonneur.igc',
'data/igc/Tom-Payne.igc',
'data/igc/Ulrich-Prinz.igc'
];
//위에 생성해둔 비어있는 feature[]에 IGC data 를 이용한 feature 추가
var igcFormat = new ol.format.IGC();
for (var i = 0; i < igcUrls.length; ++i) {
get(igcUrls[i], function (data) {
var features = igcFormat.readFeatures(data, {
featureProjection: 'EPSG:3857'
});
vectorSource.addFeatures(features);
});
}
//색다른 방법으로 요청 ! IGC DATA
function get(url, callback) {
var client = new XMLHttpRequest();
client.open('GET', url);
client.onload = function () {
callback(client.responseText);
};
client.send();
}
var time = {
start: Infinity, //무한대
stop: -Infinity,
duration: 0
};
//4. 벡터에 피쳐가 add 될때 time 변수를 셋팅해준다
vectorSource.on('addfeature', function (event) {
var geometry = event.feature.getGeometry();
time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]);
time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]);
time.duration = time.stop - time.start;
});
//5. time bar에 이벤트 걸기. featureOverlay에 있는 source에 hightlight(point 만들기)
document.getElementById('time').addEventListener('input', function () {
var value = parseInt(this.value, 10) / 100;
var m = time.start + (time.duration * value);
vectorSource.forEachFeature(function (feature) {
var geometry = (feature.getGeometry());
var coordinate = geometry.getCoordinateAtM(m, true);
var highlight = feature.get('highlight');
if (highlight === undefined) {
highlight = new ol.Feature(new ol.geom.Point(coordinate));
feature.set('highlight', highlight);
featureOverlay.getSource().addFeature(highlight);
} else {
highlight.getGeometry().setCoordinates(coordinate);
}
});
map.render();
});
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector(),
map: map,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.9)'
})
})
})
});
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
var coordinate = map.getEventCoordinate(evt.originalEvent);
displaySnap(coordinate);
});
map.on('click', function (evt) {
displaySnap(evt.coordinate);
});
//6. snap 효과를 나타내는것
var point = null;
var line = null;
var displaySnap = function (coordinate) {
var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate); //가장 가까운 feature 로부터 coordinate 가져온다
var info = document.getElementById('info');
if (closestFeature === null) {
point = null;
line = null;
info.innerHTML = ' ';
} else {
var geometry = closestFeature.getGeometry();
var closestPoint = geometry.getClosestPoint(coordinate);
if (point === null) {
point = new ol.geom.Point(closestPoint);
} else {
point.setCoordinates(closestPoint);
}
var date = new Date(closestPoint[2] * 1000);
info.innerHTML =
closestFeature.get('PLT') + ' (' + date.toUTCString() + ')';
var coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
if (line === null) {
line = new ol.geom.LineString(coordinates);
} else {
line.setCoordinates(coordinates);
}
}
map.render();
};
var stroke = new ol.style.Stroke({
color: 'rgba(255,0,0,0.9)',
width: 1
});
var style = new ol.style.Style({
stroke: stroke,
image: new ol.style.Circle({
radius: 5,
fill: null,
stroke: stroke
})
});
//7. 지도를 다 그린후에.. 이부분이없으면 이전에 closetfeature 찾아서 셋팅 해준것이 무용지물... 스타일 적용함으로써 시각적으로 보여줌
map.on('postcompose', function (evt) {
var vectorContext = evt.vectorContext;
vectorContext.setStyle(style);
if (point !== null) {
vectorContext.drawGeometry(point);
}
if (line !== null) {
vectorContext.drawGeometry(line);
}
});
</script>
</body>
</html>