Mercurial > hgrepos > hgweb.cgi > skipweb
changeset 3932:ccfc8f7e6427
add silk Re:road
author | KOMATSU Kotaro <c118089@roy.e.koeki-u.ac.jp> |
---|---|
date | Fri, 29 Nov 2019 14:46:15 +0900 |
parents | cc3c9220f6a1 |
children | 1fa39e0245d0 |
files | matsugaoka/chizu/cocoon.png matsugaoka/chizu/ko.js matsugaoka/chizu/komap.html matsugaoka/chizu/qrcde.png matsugaoka/chizu/yochu.png matsugaoka/chizu/yochu360.png |
diffstat | 6 files changed, 269 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/matsugaoka/chizu/ko.js Fri Nov 29 14:46:15 2019 +0900 @@ -0,0 +1,230 @@ +// 愛 +function goinit() { + var koeki_latlng = [38.725639, 139.826806]; + var baseLayer = {}; + var map_osm = new L.tileLayer( + 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution : '© <a href="//osm.org/copyright">OpenStreetMap</a> contributors | <a href="//www.yatex.org/koeki/2018-koryoGO/">KoryoGO</a>' + , maxZoom: 20, maxNativeZoom: 18 + }); + baseLayer["OpenStreetMap"] = map_osm; + var map_gsi = new L.tileLayer( // 国土地理院 + 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: "<a href='//www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" + , maxZoom: 20, maxNativeZoom: 18 + }); + baseLayer["地理院地図"] = map_gsi; + function putlog(msg, id = "ok") { + var o = document.getElementById(id); + if (o) o.innerHTML = msg; + } + var map = L.map("map").setView(koeki_latlng, 40); + map_osm.addTo(map); + L.control.scale().addTo(map); + var mapControl = L.control.layers(baseLayer, null).addTo(map); + var watchTimer = null // geolocation timer + function clearWatch() { + if (watchTimer) { + clearTimeout(watchTimer); + watchTimer = null; + } + watchID && navigator.geolocation.clearWatch(watchID); + watchID = null; + } + function stopChase() { + clearWatch(); + putlog("!", "info"); + startButton.removeAttribute("disabled"); + } + function gotIt() { + stopChase(); + var g = document.getElementById("get"); + if (g) { + // document.getElementById("map").style.visibility = "hidden"; + document.getElementById("map").style.zIndex = 0; + // alert("みつかったー"+watchTimer); + g.style.display = "block"; + g.style.width = 500; + g.style.height = "auto"; + g.style.top = "20%"; + g.style.right = "90%"; + g.style.opacity = 0.8; + g.style.zIndex = 20; + g.style.transition = 10; + } + putlog("捕獲!", "rest"); + tgt && map.removeLayer(tgt); + tgt = L.marker(targetLoc).addTo(map); + tgt.bindPopup(foundMsg).openPopup(); + setTimeout(function() { + var g = document.getElementById("get"); + // g.removeChild(g.childNodes[0]); + g.style.display = 'none'; + putlog("", "rest"); + tgt._popup.setContent("私、松ヶ岡で進化しそう!私の晴れ姿みんなも見に来てね!"); + }, 10000); + } + + //探す始め + function dispDistance() { + //var d = getDistance(currentLoc, targetLoc); + var d = currentLoc.distanceTo(targetLoc); + d = Math.abs(Math.round(d-Math.min(curAccuracy, 10), 1)); + var msg = currentLoc+targetLoc; + putlog(msg); + putlog("あと"+ d + "m", "rest"); + putlog("Count: "+ ++repeatCount, "info"); + if (d < threshold) { + gotIt(); + } + } + //探す終わり + + var repeatCount = 0, repeatMax = 30; + var currentLoc = koeki_latlng; + var curMarker, curCircle, curAccuracy; + var curMarkerIcon = L.icon({ + iconUrl: defIcon || "main.png", + // iconSize: [80, 120], + iconAnchor: [0, 00] + }); + function mainMarker(pos) { + return L.marker(pos, {icon: curMarkerIcon}); + } + function onLocationFound(e) { + curAccuracy = e.accuracy / 2; + + if (curMarker) map.removeLayer(curMarker); + curMarker = mainMarker(e.latlng).addTo(map); + curMarker.bindPopup("いまココ").openPopup(); + currentLoc = e.latlng; + if (repeatCount%3 == 0) map.setView(e.latlng); // 3回に1回センタリング + if (curCircle) map.removeLayer(curCircle); + curCircle = L.circle(e.latlng, curAccuracy).addTo(map); + dispDistance(); + } + function onLocationError(e) { + putlog(e.message, "err") + if (true && !curMarker) { + currentLoc = L.latLng(koeki_latlng); + curMarker = mainMarker(currentLoc).addTo(map); + curMarker.bindPopup("いまココ").openPopup(); + } + } + + var tgt; + function setNewLoc(latlng) { + putlog(latlng+"に設定しました", 'err'); + targetLoc = latlng; // タップした地点をゴールにすり替える + dispDistance(); + } + map.on("click", function(e) { + if (tgt) { + map.removeLayer(tgt); + map.panTo(e.latlng); + if (true) { + tgt = L.marker(e.latlng, {draggable: true}).addTo(map); + tgt.on("dragend", function (e) { + setNewLoc(e.target.getLatLng()); + }); + } + setNewLoc(e.latlng); + } + }); + map.on('zoomend', function (e) { + if (map._locateOptions) map._locateOptions.maxZoom = map.getZoom(); + }); + var watchID, geoOpt = {maximumAge: 0, timeout: 2000, + enableHighAccuracy: true}, + watchINT = 5000, watchTimer; + function watchRestart() { + putlog("Sleeping...Count:"+repeatCount, "info"); + clearWatch(); + if (watchTimer) { + clearTimeout(watchTimer); + watchTimer = null; + } + watchTimer = setTimeout(startWatch, 7500); + } + function watchFound(pos) { + putlog("Sleeping...FOUND!", "info"); + putlog("", "err"); + onLocationFound({ + latlng: L.latLng([ + pos.coords.latitude, pos.coords.longitude]), + accuracy: pos.coords.accuracy}); + // watchRestart(); + } + function watchError() { + onLocationError({ + message: "GPS信号が弱いようです"}); + } + function startWatch() { + putlog("Start...Count:"+repeatCount, "info"); + clearWatch(); // confirmation + watchID = navigator.geolocation.watchPosition( + // watchID = navigator.geolocation.getCurrentPosition( + watchFound, watchError, geoOpt + ); + } + var startButton = document.getElementById("start"); + startButton.addEventListener("click", function(e) { + startWatch(); + putlog("追跡を開始します", "info"); + this.setAttribute("disabled", true); + if (tgt) { // 開始したらターゲットを消す + map.removeLayer(tgt); // マニュアルモード時はマーカが見える + tgt = null; + } + }) + var endButtonClicks = 0; + document.getElementById("stop").addEventListener("click", function(e) { + stopChase(); + if (++endButtonClicks > 9) { + document.getElementById("zuru").style.display = "inline"; + } + }); + document.getElementById("zuru").addEventListener("click", function(e) { + gotIt(); + }); + document.getElementById("(C)").addEventListener("click", function(e) { + tgt && tgt.removeLayer(tgt); + tgt = L.marker(targetLoc).addTo(map); + putlog("マニュアル設定モード: 好きな位置をタップしてゴールを設定できます。置いたマーカをドラッグして移動できます。「追跡をはじめる」でゴールマーカが消えます。", "info") + }); + // umappop([{'color': 'red', 'file': 'koryo-spots.geojson'}]); + function loadgeofile(arg, callback) { + var xobj = new XMLHttpRequest(); + xobj.overrideMimeType("application/json"); + xobj.open('GET', arg['file'], true); + xobj.onreadystatechange = function () { + if (xobj.readyState == 4 && xobj.status == "200") { + callback(arg, xobj.responseText); + } + }; + xobj.send(null); + } + var json = loadgeofile({file: "koryo-spots.geojson"}, + function(arg, text) { + var geojson = JSON.parse(text); + var jL = L.geoJson(geojson); + jL.addTo(map); + }); + var now = new Date(); + var today = ""+now.getFullYear()+"/"+(now.getMonth()+1)+"/"+now.getDate(); + var koryogo = localStorage.getItem("koryogo-warning"); + if (koryogo != today) { + if (confirm("【koryogo 5つの誓い】\n\ +・危険な場所には行かない。\n\ +・移動するときはこの画面を見続けない。\n\ +・人の話を聞くべきときは画面を閉じる。\n\ +・すべては自己責任で楽しむ。\n\ +・誰かにやらせるときにはこれらを守らせる。")) { + localStorage.setItem("koryogo-warning", today); + } else { + alert("さようなら..."); + var body = document.getElementsByTagName("body")[0]; + body.parentNode.removeChild(body); + } + } +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/matsugaoka/chizu/komap.html Fri Nov 29 14:46:15 2019 +0900 @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="//www.yatex.org/koeki/2018-koryoGO/ocgo.css"> +<link rel="stylesheet" href="//www.yatex.org/libcache/leaflet-1.3.2/leaflet.css" /> +<script src="//www.yatex.org/libcache/leaflet-1.3.2/leaflet.js"></script> +<script type="text/javascript" src="//www.yatex.org/libcache/umappop/umappop.js"></script> +<script type="text/javascript" src="ko.js"></script> + +<script type="text/javascript"> +<!-- +var targetLoc = L.latLng( +38.72835874846874,139.82129289915687 +); +var foundMsg = "私、ましろ!よろしくね!<br>正解の場所は致道博物館でした!"; // 発見したときのメッセージ +var threshold = 50; // 何m以内に近づいたらゲットと見なすか +var defIcon = "cocoon.png"; // デフォルトのアイコンファイル +// --> +</script> +<title>Silk Re:road</title> +</head> + +<body onload="goinit();"> +<h1 style="color:blue; font-size:3em; font-family:Dancing Script">Silk Re:road <span id="rest"></span></h1> +<div id="get"><img src="yochu360.png" width="323" height="323"></div> +<div id="map"></div> + +<p id="ok">OK:</p> +<p id="err">NG:</p> +<p id="info"> </p> +<p class="c panel"><button id="start">追跡をはじめる</button> +<button id="stop">追跡を終わる</button> +<button id="zuru">げっとだぜ</button> +<hr> +<p id="(C)">2019 koeki-u.ac.jp & SKIP +</p> +</body> +</html>