平面図の座標系で座標値を取得（Leaflet）

全国ロケ地ガイド
Leafletの使い方
平面図の座標系で座標値を取得（Leaflet）

プログラムの概要とデモ

　LeafletのCRS座標系を使って、CADの平面図の座標系で、クリックした位置にマーカを表示するサンプルプログラムです。緯度経度ではなく、mm単位の直交座標系の座標値を取得します。

ソースの説明

HTML、CSSのソース

　HTML、CSSのソースは、地図にボタンを表示と同じです。

JavaScriptのソース

　サンプルプログラムでは、地図上をクリックしたときに、マーカのポップアップにクリックした座標値をmm単位で表示しています。
　平面図の表示方法は、平面図の座標系で表示と同じです。
　Leafletでは、onメソッドで、イベントを取得することができます。サンプルでは、clickイベントが発生すると、mapClick関数を呼び出すように設定しています。 mapClick関数には、引数にイベントオブジェクトを指定することで、画面のクリックした位置などを取得することができます。
　追加機能として、マーカをクリックした場合には、マーカを削除するようにしています。

var map; // leaflet地図
var bound; // 表示領域（全体表示で表示される範囲）
var mark = null; // マーカ（クリックした位置を表示）

function init() { // 初期処理
	map = L.map('map_container', {crs: L.CRS.Simple, minZoom: 5, maxZoom: 12, zoomControl: false});
	L.control.zoom({position: 'bottomright'}).addTo(map); // ズーム制御
	map.on('click', mapClick);

	bound = L.latLngBounds([-1.396, -3.266], [5.699, 8.133]); // 表示領域の設定
	map.fitBounds(bound);
	L.imageOverlay('img/plan01.png', bound).addTo(map); // 背景画像の表示
}

function m2mm(val) { // mをmmに変換
	return Math.round(val * 1000);
}

function mapClick(e) { // クリック時の処理
	if (mark == null) mark = L.marker(e.latlng).addTo(map).bindPopup();
	else mark.setLatLng(e.latlng);
	mark.on('click', markClick)

    mark.getPopup().setContent(m2mm(e.latlng.lng) + ', ' + m2mm(e.latlng.lat));
	mark.openPopup(); // ポップアップで座標値を表示
}

function markClick(e) { // マーカクリック時の処理
	mark.remove(); // マーカを削除
	mark = null;
}

　CRS座標系は、非常に便利なのですが、元が緯度経度のためか座標値は(y,x)となりますので、注意してください。