-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path50_Layer_Spy.html
109 lines (93 loc) · 3.43 KB
/
50_Layer_Spy.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
<!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>
<script>
var BingMapKey = "Ar-WkIA7R3sY5gwqt0oUGHrGTnxGGFCF4EOaAjgZ2D9JdF5EuXZdhpXxbE7PQnxa";
//CORS , chrome.exe --disable-web-security --allow-file-access-from-files
var roads = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: BingMapKey,
imagerySet: 'Road' //기본
})
});
var imagery = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: BingMapKey,
imagerySet: 'Aerial' //spy로 보이는것
})
});
//..
var container = document.getElementById('map');
var map = new ol.Map({
layers: [roads, imagery],
target: container,
view: new ol.View({
center: ol.proj.fromLonLat([-109, 46.5]),
zoom: 6
})
});
var radius = 75; // 반지름
//방향키로 크기 조절 가능 이벤트
document.addEventListener('keydown', function (evt) {
if (evt.which === 38) { //최소 반지름
radius = Math.min(radius + 5, 150);
map.render();
evt.preventDefault();
} else if (evt.which === 40) { //최대 반지름 설정
radius = Math.max(radius - 5, 25);
map.render();
evt.preventDefault();
}
});
// get the pixel position with every move
var mousePosition = null;
//마우스 오버시 mousePosition pixel
container.addEventListener('mousemove', function (event) {
mousePosition = map.getEventPixel(event);
map.render();
});
//벗어나면 없애!
container.addEventListener('mouseout', function () {
mousePosition = null;
map.render();
});
// before rendering the layer, do some clipping
// spy로 보이는 화면
//context save와 restore 는 스택 구조로 이해
imagery.on('precompose', function (event) {
var ctx = event.context;
var pixelRatio = event.frameState.pixelRatio;
ctx.save();
ctx.beginPath();
//mousePosition 여부에 따라 spy !
if (mousePosition) {
// only show a circle around the mouse
ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
radius * pixelRatio, 0, 2 * Math.PI); //원만들기
ctx.lineWidth = 5 * pixelRatio;
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.stroke();
}
ctx.clip();
});
// after rendering the layer, restore the canvas context
imagery.on('postcompose', function (event) {
var ctx = event.context;
ctx.restore();
});
</script>
</body>
</html>