Mercurial > hgrepos > hgweb.cgi > skipweb
comparison matsugaoka/chizu1/gpsgo.js @ 3936:8b449670e1a8
added
author | KITAJIMA Ryuto <c118077@roy.e.koeki-u.ac.jp> |
---|---|
date | Fri, 06 Dec 2019 14:01:26 +0900 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
3935:c0d9d7271189 | 3936:8b449670e1a8 |
---|---|
1 | |
2 // 愛 | |
3 function goinit() { | |
4 var koeki_latlng = [38.8934, 139.819]; //38.725639, 139.826806 | |
5 var baseLayer = {}; | |
6 var map_osm = new L.tileLayer( | |
7 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
8 attribution : '© <a href="//osm.org/copyright">OpenStreetMap</a> contributors | <a href="//www.yatex.org/koeki/2018-koryoGO/">KoryoGO</a>' | |
9 , maxZoom: 20, maxNativeZoom: 18 | |
10 }); | |
11 baseLayer["OpenStreetMap"] = map_osm; | |
12 var map_gsi = new L.tileLayer( // 国土地理院 | |
13 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { | |
14 attribution: "<a href='//www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" | |
15 , maxZoom: 20, maxNativeZoom: 18 | |
16 }); | |
17 baseLayer["地理院地図"] = map_gsi; | |
18 function putlog(msg, id = "ok") { | |
19 var o = document.getElementById(id); | |
20 if (o) o.innerHTML = msg; | |
21 } | |
22 var map = L.map("map").setView(koeki_latlng, 15); | |
23 map_osm.addTo(map); | |
24 L.control.scale().addTo(map); | |
25 var mapControl = L.control.layers(baseLayer, null).addTo(map); | |
26 var watchTimer = null // geolocation timer | |
27 function clearWatch() { | |
28 if (watchTimer) { | |
29 clearTimeout(watchTimer); | |
30 watchTimer = null; | |
31 } | |
32 watchID && navigator.geolocation.clearWatch(watchID); | |
33 watchID = null; | |
34 } | |
35 function stopChase() { | |
36 clearWatch(); | |
37 putlog("おしまい", "info"); | |
38 startButton.removeAttribute("disabled"); | |
39 } | |
40 function gotIt() { | |
41 stopChase(); | |
42 var g = document.getElementById("get"); | |
43 if (g) { | |
44 // document.getElementById("map").style.visibility = "hidden"; | |
45 document.getElementById("map").style.zIndex = 0; | |
46 // alert("みつかったー"+watchTimer); | |
47 g.style.display = "block"; | |
48 g.style.width = 500; | |
49 g.style.height = "auto"; | |
50 g.style.top = "20%"; | |
51 g.style.right = "90%"; | |
52 g.style.opacity = 0.8; | |
53 g.style.zIndex = 20; | |
54 g.style.transition = 10; | |
55 } | |
56 putlog("捕獲!", "rest"); | |
57 tgt && map.removeLayer(tgt); | |
58 tgt = L.marker(targetLoc).addTo(map); | |
59 tgt.bindPopup(foundMsg).openPopup(); | |
60 setTimeout(function() { | |
61 var g = document.getElementById("get"); | |
62 // g.removeChild(g.childNodes[0]); | |
63 g.style.display = 'none'; | |
64 putlog("", "rest"); | |
65 tgt._popup.setContent("さようなら"); | |
66 }, 10000); | |
67 } | |
68 function dispDistance() { | |
69 //var d = getDistance(currentLoc, targetLoc); | |
70 var d = currentLoc.distanceTo(targetLoc); | |
71 d = Math.abs(Math.round(d-Math.min(curAccuracy, 10), 1)); | |
72 var msg = currentLoc+targetLoc; | |
73 putlog(msg); | |
74 putlog("あと"+ d + "m", "rest"); | |
75 putlog("Count: "+ ++repeatCount, "info"); | |
76 if (d < threshold) { | |
77 gotIt(); | |
78 } | |
79 } | |
80 var repeatCount = 0, repeatMax = 30; | |
81 var currentLoc = koeki_latlng; | |
82 var curMarker, curCircle, curAccuracy; | |
83 var curMarkerIcon = L.icon({ | |
84 iconUrl: defIcon || "main.png", | |
85 // iconSize: [80, 120], | |
86 iconAnchor: [0, 00] | |
87 }); | |
88 function mainMarker(pos) { | |
89 return L.marker(pos, {icon: curMarkerIcon}); | |
90 } | |
91 function onLocationFound(e) { | |
92 curAccuracy = e.accuracy / 2; | |
93 | |
94 if (curMarker) map.removeLayer(curMarker); | |
95 curMarker = mainMarker(e.latlng).addTo(map); | |
96 curMarker.bindPopup("いまココ").openPopup(); | |
97 currentLoc = e.latlng; | |
98 if (repeatCount%3 == 0) map.setView(e.latlng); // 3回に1回センタリング | |
99 if (curCircle) map.removeLayer(curCircle); | |
100 curCircle = L.circle(e.latlng, curAccuracy).addTo(map); | |
101 dispDistance(); | |
102 } | |
103 function onLocationError(e) { | |
104 putlog(e.message, "err") | |
105 if (true && !curMarker) { | |
106 currentLoc = L.latLng(koeki_latlng); | |
107 curMarker = mainMarker(currentLoc).addTo(map); | |
108 curMarker.bindPopup("いまココ").openPopup(); | |
109 } | |
110 } | |
111 | |
112 var tgt; | |
113 function setNewLoc(latlng) { | |
114 putlog(latlng+"に設定しました", 'err'); | |
115 targetLoc = latlng; // タップした地点をゴールにすり替える | |
116 dispDistance(); | |
117 } | |
118 map.on("click", function(e) { | |
119 if (tgt) { | |
120 map.removeLayer(tgt); | |
121 map.panTo(e.latlng); | |
122 if (true) { | |
123 tgt = L.marker(e.latlng, {draggable: true}).addTo(map); | |
124 tgt.on("dragend", function (e) { | |
125 setNewLoc(e.target.getLatLng()); | |
126 }); | |
127 } | |
128 setNewLoc(e.latlng); | |
129 } | |
130 }); | |
131 map.on('zoomend', function (e) { | |
132 if (map._locateOptions) map._locateOptions.maxZoom = map.getZoom(); | |
133 }); | |
134 var watchID, geoOpt = {maximumAge: 0, timeout: 2000, | |
135 enableHighAccuracy: true}, | |
136 watchINT = 5000, watchTimer; | |
137 function watchRestart() { | |
138 putlog("Sleeping...Count:"+repeatCount, "info"); | |
139 clearWatch(); | |
140 if (watchTimer) { | |
141 clearTimeout(watchTimer); | |
142 watchTimer = null; | |
143 } | |
144 watchTimer = setTimeout(startWatch, 7500); | |
145 } | |
146 function watchFound(pos) { | |
147 putlog("Sleeping...FOUND!", "info"); | |
148 putlog("", "err"); | |
149 onLocationFound({ | |
150 latlng: L.latLng([ | |
151 pos.coords.latitude, pos.coords.longitude]), | |
152 accuracy: pos.coords.accuracy}); | |
153 // watchRestart(); | |
154 } | |
155 function watchError() { | |
156 onLocationError({ | |
157 message: "GPS信号が弱いようです"}); | |
158 } | |
159 function startWatch() { | |
160 putlog("Start...Count:"+repeatCount, "info"); | |
161 clearWatch(); // confirmation | |
162 watchID = navigator.geolocation.watchPosition( | |
163 // watchID = navigator.geolocation.getCurrentPosition( | |
164 watchFound, watchError, geoOpt | |
165 ); | |
166 } | |
167 var startButton = document.getElementById("start"); | |
168 startButton.addEventListener("click", function(e) { | |
169 startWatch(); | |
170 putlog("はじめます", "info"); | |
171 this.setAttribute("disabled", true); | |
172 if (tgt) { // 開始したらターゲットを消す | |
173 map.removeLayer(tgt); // マニュアルモード時はマーカが見える | |
174 tgt = null; | |
175 } | |
176 }) | |
177 var endButtonClicks = 0; | |
178 document.getElementById("stop").addEventListener("click", function(e) { | |
179 stopChase(); | |
180 if (++endButtonClicks > 9) { | |
181 document.getElementById("zuru").style.display = "inline"; | |
182 } | |
183 }); | |
184 document.getElementById("zuru").addEventListener("click", function(e) { | |
185 gotIt(); | |
186 }); | |
187 document.getElementById("(C)").addEventListener("click", function(e) { | |
188 tgt && tgt.removeLayer(tgt); | |
189 tgt = L.marker(targetLoc).addTo(map); | |
190 putlog("マニュアル設定モード: 好きな位置をタップしてゴールを設定できます。置いたマーカをドラッグして移動できます。「追跡をはじめる」でゴールマーカが消えます。", "info") | |
191 }); | |
192 // umappop([{'color': 'red', 'file': 'koryo-spots.geojson'}]); | |
193 function loadgeofile(arg, callback) { | |
194 var xobj = new XMLHttpRequest(); | |
195 xobj.overrideMimeType("application/json"); | |
196 xobj.open('GET', arg['file'], true); | |
197 xobj.onreadystatechange = function () { | |
198 if (xobj.readyState == 4 && xobj.status == "200") { | |
199 callback(arg, xobj.responseText); | |
200 } | |
201 }; | |
202 xobj.send(null); | |
203 } | |
204 var json = loadgeofile({file: "koryo-spots.geojson"}, | |
205 function(arg, text) { | |
206 var geojson = JSON.parse(text); | |
207 var jL = L.geoJson(geojson); | |
208 jL.addTo(map); | |
209 }); | |
210 var now = new Date(); | |
211 var today = ""+now.getFullYear()+"/"+(now.getMonth()+1)+"/"+now.getDate(); | |
212 var koryogo = localStorage.getItem("koryogo-warning"); | |
213 if (koryogo != today) { | |
214 if (confirm("【silk Re:roadの 5つの誓い】\n\ | |
215 ・危険な場所には行かない。\n\ | |
216 ・移動するときはこの画面を見続けない。\n\ | |
217 ・人の話を聞くべきときは画面を閉じる。\n\ | |
218 ・すべては自己責任で楽しむ。\n\ | |
219 ・誰かにやらせるときにはこれらを守らせる。")) { | |
220 localStorage.setItem("koryogo-warning", today); | |
221 } else { | |
222 alert("さようなら..."); | |
223 var body = document.getElementsByTagName("body")[0]; | |
224 body.parentNode.removeChild(body); | |
225 } | |
226 } | |
227 } |