diff --git a/leaflet.js b/leaflet.js new file mode 100644 index 0000000..a5039b2 --- /dev/null +++ b/leaflet.js @@ -0,0 +1,146 @@ +GitBucket GitBucket +Toggle navigation +Find a repository +Pull requests +Issues +Snippets +@c120087-kodama + Files + Branches1 + Releases + Issues + Pull requests + Labels + Priorities + Milestones + Wiki + Fumiya238 / AR-project + AR-project / leaflet / leaflet.js +@Satou Fumiya Satou Fumiya on 2 Nov 4 KB clean:ファイルを整理、hrefを整理 +let map = L.map('map').fitWorld(); +L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors', + maxZoom: 18, + tileSize: 512, + zoomOffset: -1 +}).addTo(map); +map.setView([38.70010302736321, 139.88572398517292],16); +// map.locate({setView:true, maxZoom: 16}); よくわかんないけど中心位置がtrueで自分の今いる位置が表示される + +let threshold = 50; //50メートル以内に設定 +let id,marker,circle; +// マーカーと緯度経度の設定 +// 松ヶ丘開墾記念館 +let a = L.marker([38.70029457103109, 139.88541162806743]).addTo(map); +a = L.latLng(38.70029457103109, 139.88541162806743); +// 松ヶ岡開墾場 -MATSUGAOKA CRAFT PARK- +let b = L.marker([38.70012988942131, 139.8863486910772]).addTo(map); +b = L.latLng(38.70012988942131, 139.8863486910772); +// kibisoショップin松ヶ岡 +let c = L.marker([38.69988113993072, 139.8855818280956]).addTo(map); +c = L.latLng(38.69988113993072, 139.8855818280956); +// 松ヶ丘農村公園 +let x = L.marker([38.69964477687674, 139.88544274760642]).addTo(map); +x = L.latLng(38.69964477687674, 139.88544274760642); +// 松ヶ丘本陣 +let y = L.marker([38.699988075257004, 139.8843537707502]).addTo(map); +y = L.latLng(38.699988075257004, 139.8843537707502); +// 松岡物産(株) +let z = L.marker([38.69988671925472, 139.88613962535007]).addTo(map); +z = L.latLng(38.69988671925472, 139.88613962535007); + + +function onLocationFound(e) { + let radius = e.accuracy/2; + if (marker) map.removeLayer(marker); //マーカー削除 + marker = L.marker(e.latlng).addTo(map); //マーカー追加 + marker.bindPopup('現在地').openPopup(); + if (circle) map.removeLayer(circle); + circle = L.circle(e.latlng, radius).addTo(map); + map.setView(e.latlng); + // 現在地と目的地の距離を計測 + let d = a.distanceTo(e.latlng); + let g = b.distanceTo(e.latlng); + let f = c.distanceTo(e.latlng); + // 50メートル以内に近づいた時の処理 + if (d < threshold) { + alert("おはよう"); + } else if(g < 10){ + window.location.href=('https://www.yatex.org/gitbucket/Fumiya238/AR-project/pages/AR/AR-location_based.html'); + } else if (f < threshold){ + alert("こんばんわ"); + } +}; +// 位置情報取得できなかったときの処理 +function onLocationError(e) { + alert(e.message); +} +// 位置情報を持ってくる関数 +function watchFound(e) { + onLocationFound({ + latlng: L.latLng([ + e.coords.latitude, e.coords.longitude]), + accuracy: e.coords.accuracy}); +} +// id = navigator.geolocation.watchPosition(watchFound,onLocationError); + +let $start = document.getElementById('start'); +// スタートボタンクリック時の位置情報を定期的に取得 +$start.addEventListener("click", function(e) { + this.setAttribute("disabled", true); + id = navigator.geolocation.watchPosition(watchFound,onLocationError); +}); +// 位置情報取得中止 +let i=1; +let $stop = document.getElementById('stop') +$stop.addEventListener("click", function(e) { + $start.removeAttribute("disabled"); + $zuru.removeAttribute("disabled"); + navigator.geolocation.clearWatch(id); + i=1; +}); + +// マップクリックしたら経度、緯度の表示 +const $zuru = document.getElementById('zuru'); +let popup = L.popup(); +function onMapClick(e) { + if (i===0){ + if (marker) map.removeLayer(marker); + marker = L.marker(e.latlng).addTo(map); + marker.bindPopup('現在地').openPopup(); + if (circle) map.removeLayer(circle); + circle = L.circle(e.latlng).addTo(map); + map.setView(e.latlng); + let d = a.distanceTo(e.latlng); + let g = b.distanceTo(e.latlng); + let f = c.distanceTo(e.latlng); + // 50メートル以内に近づいた時の処理 + if (d < threshold) { + alert("おはよう"); + } else if(g < 20){ + alert('みつかった〜!') + window.location.href=('https://www.yatex.org/gitbucket/Fumiya238/AR-project/pages/AR/AR-location_based.html'); + } else if (f < threshold){ + alert("こんばんわ"); + } + } +} +$zuru.addEventListener('click',function (){ + i=0; + this.setAttribute("disabled", true); + map.on('click', onMapClick); +}); + + + +// setViewまたはcenterで最初に表示される中心位置を設定できる +// zoomで最初に表示される近さを設定できる +// .bindPopupメソッドでHTMLコンテンツを含むポップアップを表示する +// .popup()で表示されるコンテンツを設定できる +// .latlngでその場所の経度、を緯度調べられる +// distanceTo( otherLatLng)で距離が図れる +// LatLng.distanceTo(otherLatLng)で書いたらうまく行った +// let map = L.map('map').setView([38.89232, 139.82221], 15); +// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + // attribution: '© OpenStreetMap contributors' + // }).addTo(map);