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
Binary file matsugaoka/chizu/cocoon.png has changed
--- /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 : '&copy; <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 &amp; SKIP
+</p>
+</body>
+</html>
Binary file matsugaoka/chizu/qrcde.png has changed
Binary file matsugaoka/chizu/yochu.png has changed
Binary file matsugaoka/chizu/yochu360.png has changed

yatex.org