document.addEventListener("DOMContentLoaded", () => {
// 例: コントロールレイヤ
var mlCenter = [38.891, 139.824];
var otherPoint = [38.890, 139.822];
var osmTile = // OSMのタイル
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> \
contributors'
});
var gsiTile = // 国土地理院タイル
L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution:
'<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
});
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);
var mlmap = L.map("markerlayer", {
layers: [gsiTile],
center: mlCenter, zoom: 16, scrollWheelZoom: false
});
/* 上記4行は以下のようにするのと同じ効果
var mlmap = L.map("markerlayer").setView(mlCenter, 16);
gsiTile.addTo(mlmap);
markerLayer1.addTo(mlmap);
markerLayer2.addTo(mlmap); */
// 以下、コントロールレイヤの設定
// ベースレイヤはOSMと国土地理院2つをJSON形式で指定
var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
// マーカーを2つオーバーレイレイヤに指定
var ovlLayers
// ベースレイヤとオーバーレイレイヤをマップに追加
L.control.layers(baseLayers, ovlLayers).addTo(mlmap);
}, false); // HTML文書がロードされたら上のアロー関数を呼ばせる
