-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
209 lines (178 loc) · 6.73 KB
/
index.js
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
var canvas;
var ctx;
var widthCanvas;
var heightCanvas;
// View parameters
var xleftView = 0;
var ytopView = 0;
var widthViewOriginal = document.getElementById('canvas').width; //actual width and height of zoomed and panned display
var heightViewOriginal = document.getElementById('canvas').height;
var widthView = widthViewOriginal; //actual width and height of zoomed and panned display
var heightView = heightViewOriginal;
// img parameter
var img = new Image;
img.src = document.getElementById('imgurl').value;
var imglat_start = document.getElementById('imglat_start').value;
var imglon_start = document.getElementById('imglon_start').value;
var imglat_end = document.getElementById('imglat_end').value;
var imglon_end = document.getElementById('imglon_end').value;
document.getElementById("imgsrcswitcher").addEventListener('click', (e)=>toggleImgSrc(e));
window.addEventListener("load",setup,false);
function setup() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
widthCanvas = canvas.width;
heightCanvas = canvas.height;
// canvas.addEventListener("dblclick", handleDblClick, false); // dblclick to zoom in at point, shift dblclick to zoom out.
canvas.addEventListener("mousedown", handleMouseDown, false); // click and hold to pan
canvas.addEventListener("mousemove", handleMouseMove, false);
canvas.addEventListener("mouseup", handleMouseUp, false);
canvas.addEventListener("mousewheel", handleMouseWheel, false); // mousewheel duplicates dblclick function
canvas.addEventListener("DOMMouseScroll", handleMouseWheel, false); // for Firefox
draw();
}
var mouseDown = false;
function handleMouseDown(event) {
mouseDown = true;
}
function handleMouseUp(event) {
mouseDown = false;
}
var lastX = 0;
var lastY = 0;
function handleMouseMove(event) {
var X = event.clientX - this.offsetLeft - this.clientLeft + this.scrollLeft;
var Y = event.clientY - this.offsetTop - this.clientTop + this.scrollTop;
if (mouseDown) {
var dx = (X - lastX) / widthCanvas * widthView;
var dy = (Y - lastY)/ heightCanvas * heightView;
xleftView -= dx;
ytopView -= dy;
xleftView = Math.max(xleftView, 0);
ytopView = Math.max(ytopView, 0);
xleftView = Math.min(xleftView, widthViewOriginal-widthView);
ytopView = Math.min(ytopView, heightViewOriginal-heightView);
draw();
}
lastX = X;
lastY = Y;
}
function handleMouseWheel(event) {
event.preventDefault()
var x = widthView/2 + xleftView; // View coordinates
var y = heightView/2 + ytopView;
var scale = (event.wheelDelta < 0 || event.detail > 0) ? 1.1 : 0.9;
widthView *= scale;
heightView *= scale;
if (widthView > widthViewOriginal || heightView > heightViewOriginal) {
widthView = widthViewOriginal;
heightView = heightViewOriginal;
x = widthView/2;
y = heightView/2;
}
// scale about center of view, rather than mouse position. This is different than dblclick behavior.
xleftView = x - widthView/2;
ytopView = y - heightView/2;
xleftView = Math.max(xleftView, 0);
ytopView = Math.max(ytopView, 0);
xleftView = Math.min(xleftView, widthViewOriginal-widthView);
ytopView = Math.min(ytopView, heightViewOriginal-heightView);
draw();
}
function draw() {
if (!canvas.getContext) {
return;
}
ctx.clearRect(0,0,widthViewOriginal,heightViewOriginal);
ctx.setTransform(1,0,0,1,0,0);
ctx.scale(widthCanvas/widthView, heightCanvas/heightView);
ctx.translate(-xleftView,-ytopView);
ctx.drawImage(img, 0, 0, widthViewOriginal, heightViewOriginal);
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
x0 = imglon_start // longitude
y0 = imglat_start // latitude
dx = widthViewOriginal/(imglon_end-imglon_start) // px/degree
dy = heightViewOriginal/(imglat_end-imglat_start) // px/degree
lat = document.getElementById("radar_lat").value;
lon = document.getElementById("radar_lon").value;
rng = document.getElementById("radar_range").value;
px = (lon-x0)*dx // position of radar on canvas
py = heightViewOriginal-(lat-y0)*dy // position of radar on canvas
dd = 1/(6378.1370*Math.cos(24.5*Math.PI/180)*2*Math.PI/360) // degree/km
// point (radar location)
ctx.fillStyle = 'red'
ctx.beginPath();
ctx.arc(px, py, 3, 0, 2*Math.PI);
ctx.closePath();
ctx.fill();
// circle (radar sweep range)
ctx.beginPath();
ctx.arc(px, py, rng*dd*dx, 0, 2*Math.PI); // radar range
ctx.closePath();
ctx.stroke();
// azi
draw_azi();
// draw canvas out-line
ctx.strokeStyle = 'black';
ctx.setTransform(1,0,0,1,0,0);
ctx.scale(1, 1);
ctx.translate(0,0);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(widthViewOriginal, 0);
ctx.lineTo(widthViewOriginal, heightViewOriginal);
ctx.lineTo(0, heightViewOriginal);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.restore();
}
function draw_azi() {
azis = document.getElementById("azi").value.split(" ");
azis.forEach(azi => {
if(azi=="") return
px_end = px+rng*dd*dx*Math.sin(azi*Math.PI/180)
py_end = py-rng*dd*dx*Math.cos(azi*Math.PI/180)
ctx.beginPath();
ctx.moveTo(px, py);
ctx.lineTo(px_end, py_end);
ctx.stroke();
});
}
function changeimg() {
if (document.getElementById("imgsrcswitcher").checked) {
// image from local file
var file = document.getElementById("filein").files[0];
var fr = new FileReader();
fr.onload=(e)=>{
img.src = e.target.result;
}
fr.readAsDataURL(file);
} else {
// image from url
img.src = document.getElementById('imgurl').value;
}
imglat_start = document.getElementById('imglat_start').value;
imglon_start = document.getElementById('imglon_start').value;
imglat_end = document.getElementById('imglat_end').value;
imglon_end = document.getElementById('imglon_end').value;
ctx.clearRect(0,0,widthViewOriginal,heightViewOriginal)
ctx.fillStyle = 'black';
ctx.fillText("Londing...",widthViewOriginal/2,heightViewOriginal/2)
ctx.fillStyle = 'red';
img.onerror = () => {
ctx.clearRect(0,0,widthViewOriginal,heightViewOriginal)
ctx.fillText("ERROR",widthViewOriginal/2,heightViewOriginal/2)
}
img.onload = draw;
}
function toggleImgSrc(e) {
if (e.target.checked == false){
document.getElementById("toggleurl").style.display="inline"
document.getElementById("togglelocalfile").style.display="none"
} else {
document.getElementById("toggleurl").style.display="none"
document.getElementById("togglelocalfile").style.display="inline"
}
}