平面図の座標系で座標値を取得(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)となりますので、注意してください。


Copyright (C) ASH Joe Masumura