diff --git a/README.md b/README.md index 486a8ee..fb1aac7 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,6 @@ * [地理允地図](../../pages/domon.html) * [my first map](../../pages/map/src/dom.html) * [たからさがし](../../pages/map/gps/gps-chase.html) -* [ポップアップ マーカー](../../pages/map/layers/markerlayer.html) +* [ポップアップ マーカー](../../pages/map/layers/markerlayer.html) * [二点の距離を図る](../../pages/map/kyori/measure-d.html) -* [折線の距離の合計](../../pages/map/kyori/allmeasure.html) +* [折線の距離の合計](../../pages/map/kyori/mesure-path.html) diff --git a/map/kyori/allmeasure.html b/map/kyori/allmeasure.html deleted file mode 100644 index 9cd312a..0000000 --- a/map/kyori/allmeasure.html +++ /dev/null @@ -1,28 +0,0 @@ - - - -マップ: 距離計測 - - - - - - - - - - - -

折線の距離を測ってみようぞ

-

たくさんクリックせい

-
- - - \ No newline at end of file diff --git a/map/kyori/allmeasure.js b/map/kyori/allmeasure.js deleted file mode 100644 index e69de29..0000000 --- a/map/kyori/allmeasure.js +++ /dev/null diff --git a/map/kyori/mesure-path.html b/map/kyori/mesure-path.html new file mode 100644 index 0000000..cc5f5e7 --- /dev/null +++ b/map/kyori/mesure-path.html @@ -0,0 +1,28 @@ + + + +マップ: 距離計測 + + + + + + + + + + + +

折線の距離を測ってみようぞ

+

たくさんクリックせい

+
+ + + \ No newline at end of file diff --git a/map/kyori/mesure-path.js b/map/kyori/mesure-path.js new file mode 100644 index 0000000..87dc031 --- /dev/null +++ b/map/kyori/mesure-path.js @@ -0,0 +1,45 @@ +var mymap = L.map("mymap").setView([38.891, 139.824], 16); +L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: + '国土地理院' +}).addTo(mymap); + +function distance(x1, y1, x2, y2) { // ヒュベニ式による距離概算 + rx = 6378137; // 赤道半径(m) WGS84 + ry = 6356752.314; // 極半径(m) WGS84 + e2=(rx*rx-ry*ry)/rx/rx; // 離心率 E^2 + dx = (x2-x1)*Math.PI/180; // 経度の差をラジアン変換 + dy = (y2-y1)*Math.PI/180; // 緯度の差をラジアン変換 + my = (y1+y2)/2.0*Math.PI/180; // 緯度の平均をラジアン変換 + w = Math.sqrt(1-e2*Math.sin(my)*Math.sin(my)); + m = rx*(1-e2)/Math.pow(w,3); // 子午線曲率半径 + n = rx/w; // 卯酉線曲率半径 + return Math.sqrt(Math.pow(dy*m,2) + Math.pow(dx*n*Math.cos(my),2)); +} + +var start = null, goal = null; // 測定始点と終点 +var sMarker, gMarker; // 始点終点マーカ +function startOrGoal(e) { + var info = document.getElementById("info"); + var imsg = "北緯 "+e.latlng.lat+" 東経 "+e.latlng.lng; + if (!start) { // 始点未設定なら + start = e.latlng; // クリックされた緯度経度 + // 始点マーカを生成しマップに貼り付けポップアップ文字列を登録 + sMarker = L.marker(start).addTo(mymap).bindPopup(imsg); + info.innerHTML = imsg; // 情報表示 + } else if (!goal) { + goal = e.latlng; + let lng1 = start.lng, lat1 = start.lat, // 緯度経度を個別に取得 + lng2 = goal.lng, lat2 = goal.lat; + // 終点マーカを生成しマップに貼り付けポップアップ文字列を登録 + gMarker = L.marker(goal).addTo(mymap).bindPopup(imsg); + let d = distance(lng1, lat1, lng2, lat2); // 距離を計算 + info.innerHTML = "距離: "+Math.round(d*100)/100+"m"; // 表示 + } else { // 始点終点ともに存在するとき + sMarker.remove(mymap); // 始点マーカの除去 + gMarker.remove(mymap); // 終点マーカの除去 + start = goal = sMarker = gMarker = null; + info.innerHTML = "クリアしました"; + } +} +mymap.on('click', startOrGoal); // クリックイベントで startOrGoal() \ No newline at end of file