LeafletのCRS座標系を使って、CADの平面図の座標系で、クリックした位置にマーカを表示するサンプルプログラムです。 緯度経度ではなく、mm単位の直交座標系の座標値を取得します。
HTML、CSSのソースは、地図にボタンを表示と同じです。
サンプルプログラムでは、地図上をクリックしたときに、マーカのポップアップにクリックした座標値を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)となりますので、注意してください。