changeset 3936:8b449670e1a8

added
author KITAJIMA Ryuto <c118077@roy.e.koeki-u.ac.jp>
date Fri, 06 Dec 2019 14:01:26 +0900
parents c0d9d7271189
children 99d60417f4ca
files matsugaoka/chizu1/15698-final.png matsugaoka/chizu1/15698-final.xcf matsugaoka/chizu1/chizu.html matsugaoka/chizu1/final.png matsugaoka/chizu1/final.xcf matsugaoka/chizu1/gpsgo.js matsugaoka/chizu1/last.png matsugaoka/chizu1/matsugaokago.html
diffstat 8 files changed, 295 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
Binary file matsugaoka/chizu1/15698-final.png has changed
Binary file matsugaoka/chizu1/15698-final.xcf has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/matsugaoka/chizu1/chizu.html	Fri Dec 06 14:01:26 2019 +0900
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Quick Start - Leaflet</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
+    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
+    <style type="text/css">
+     <!--
+      #mapid { height: 700px; width: 600px}
+    -->
+    </style>
+  </head>
+  <body>
+    <div id="mapid"></div>
+    <script>
+      var mymap = L.map('mapid').setView([38.893254, +139.819300], 18);
+      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+    	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
+      }).addTo(mymap);
+L.marker([38.894381, +139.819511]).bindPopup("なんとここはカフェテリアです。").addTo(mymap);
+    </script>
+  </body>
+</html>
Binary file matsugaoka/chizu1/final.png has changed
Binary file matsugaoka/chizu1/final.xcf has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/matsugaoka/chizu1/gpsgo.js	Fri Dec 06 14:01:26 2019 +0900
@@ -0,0 +1,227 @@
+
+// 愛
+function goinit() {
+    var koeki_latlng = [38.8934, 139.819]; //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, 15);
+    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("【silk Re:roadの 5つの誓い】\n\
+・危険な場所には行かない。\n\
+・移動するときはこの画面を見続けない。\n\
+・人の話を聞くべきときは画面を閉じる。\n\
+・すべては自己責任で楽しむ。\n\
+・誰かにやらせるときにはこれらを守らせる。")) {
+	    localStorage.setItem("koryogo-warning", today);
+	} else {
+	    alert("さようなら...");
+	    var body = document.getElementsByTagName("body")[0];
+	    body.parentNode.removeChild(body);
+	}
+    }
+}
Binary file matsugaoka/chizu1/last.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/matsugaoka/chizu1/matsugaokago.html	Fri Dec 06 14:01:26 2019 +0900
@@ -0,0 +1,42 @@
+<!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="gpsgo.js"></script>
+
+<script type="text/javascript">
+<!--
+var targetLoc = L.latLng(
+//  38.8934, 139.819		// 北緯, 東経 の順に入れる
+  38.8934, 139.819
+  );
+var foundMsg  = "みつけてくれてありがとう。今、松ヶ岡をテーマにしたゲームを作っています。おたのしみに〜";	// 発見したときのメッセージ
+var threshold = 1000000;		// 何m以内に近づいたらゲットと見なすか
+var defIcon   = "main.png";	// デフォルトのアイコンファイル
+// -->
+</script>
+<title>Silk Re:road</title>
+</head>
+
+<body onload="goinit();">
+<h1>Silk Re:road<span id="rest"></span></h1>
+<div id="get"><img src="final.png" width="350" height="350"></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>
+
+</p>
+<hr>
+<p id="(C)">(C)2019 koeki-u.ac.jp &amp; SKIP
+</p>
+</body>
+</html>

yatex.org