平面図の座標系でグリッド表示（Leaflet）

全国ロケ地ガイド
Leafletの使い方
平面図の座標系でグリッド表示（Leaflet）

プログラムの概要とデモ

　LeafletのCRS座標系を使って、CADの平面図の座標系で、グリッドを表示するサンプルプログラムです。

ソースの説明

HTML、CSSのソース

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

JavaScriptのソース

　平面図の上に、線や円などのベクタ画像を表示するサンプルプログラムです。
　Leafletを使った平面図の表示方法は、平面図の座標系で表示と同じです。
　サンプルでは、全体表示で表示される範囲を枠の色として表示しています。そして、全体表示で表示される範囲の5倍の領域に対して、線を描画することでグリッドを表示しています。グリッドは、5本毎に色を変えています。
　グリッド表示関数には、グリッド間隔を指定して表示しています。日本の木造建築の建物は、0.909mを基本として設計されることが多いので、0.909と指定すると、柱の中心線と一致する場合が多いです。

function init() { // 初期処理
	・・・・・
	dispGrid(0.909); // グリッド表示(グリッド間隔)
}

function dispGrid(gridLen) { // グリッド表示
	if (grid != null) {
		grid.remove(); // グリッド表示中の場合は、グリッドを消去
		grid = null;
		return;
	}

	let gridCol1 = '#5fef5f'; // 枠の色
	let gridCol2 = '#5f5fef'; // 基本色
	let gridCol3 = '#ef5f5f'; // 5本毎の色
	let yMin = bound.getSouth();
	let xMin = bound.getWest();
	let yMax = bound.getNorth();
	let xMax = bound.getEast();
	let yLen = yMax - yMin;
	let xLen = xMax - xMin;

	grid = L.layerGroup();
	L.polyline([ // 枠の表示
		[yMin, xMin], [yMin, xMax], [yMax, xMax], [yMax, xMin], [yMin, xMin]
	], {color: gridCol1, weight: 1, opacity: 0.5}).addTo(grid);

	let gyMin = Math.floor((yMin - yLen * 2) / gridLen) * gridLen;
	let gxMin = Math.floor((xMin - xLen * 2) / gridLen) * gridLen;
	let gyMax = Math.floor((yMax + yLen * 2) / gridLen) * gridLen;
	let gxMax = Math.floor((xMax + xLen * 2) / gridLen) * gridLen;

	for (let y = gyMin; y <= gyMax; y += gridLen) {
		let gridCol = (y % 5 == 0) ? gridCol3 : gridCol2;
		L.polyline([ // 横線の表示
			[y, gxMin], [y, gxMax]
		], {color: gridCol, weight: 1, opacity: 0.5}).addTo(grid);
	}

	for (let x = gxMin; x <= gxMax; x += gridLen) {
		let gridCol = (x % 5 == 0) ? gridCol3 : gridCol2;
		L.polyline([ // 縦線の表示
			[gyMin, x], [gyMax, x]
		], {color: gridCol, weight: 1, opacity: 0.5}).addTo(grid);
	}

	grid.addTo(map);
}