LeafletのCRS座標系を使って、CADの平面図の座標系で表示するサンプルプログラムです。
緯度経度ではなく、mm単位の直交座標系で表示しています。
LeafletのCRS座標系を使って、CADの平面図の座標系で表示するサンプルプログラムです。
緯度経度ではなく、mm単位の直交座標系で表示しています。
HTML、CSSのソースは、地図にボタンを表示と同じです。
Leafletでは、CRS座標系を扱えるようになっています。CRSとは、Coordinate Reference Systemの略で参照座標系とも呼ばれています。
このCRS座標系を使うことで、緯度経度ではなく、平面図の座標系などのオリジナルの座標系を扱うことも可能となっています。
サンプルプログラムでは、CRS座標系は、m単位で管理し、表示時には、寸法線の表記に合わせてmm単位で表示する仕様で作成しています。
Leafletでは、画像の重ね合わせをすることが可能となっていますので、平面図を背景に設定して地図のように平行移動や拡大縮小することもできます。
この場合、ImageOverlayクラスで、平面図のファイル名と、平面図の右下と左上の緯度経度を指定してオーバーレイレイヤを作成します。
Leafletの座標系は、タイル地図の仕様に準拠していますので、zoom0の時に(0, 0)から(255, 255)の値となります。
部屋の平面図は、5m程度の大きさですので、zoomレベルは、5～12の範囲を利用しています。
サンプルプログラムでは、全体表示ボタンを押したときには、平面図が画面全体に表示されるようにしています。
var map; // leaflet地図
var bound; // 表示領域（全体表示で表示される範囲）
function init() { // 初期処理
map = L.map('map_container', {crs: L.CRS.Simple, minZoom: 5, maxZoom: 12, zoomControl: false});
L.control.zoom({position: 'bottomright'}).addTo(map); // ズーム制御
bound = L.latLngBounds([-1.396, -3.266], [5.699, 8.133]); // 表示領域の設定
map.fitBounds(bound);
L.imageOverlay('img/plan01.png', bound).addTo(map); // 背景画像の表示
}
CRS座標系は、非常に便利なのですが、元が緯度経度のためか座標値は(y,x)となりますので、注意してください。