ソースファイルを表示
sample/sample_crs_canvas.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>LeafletでCanvasを表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/leaflet_canvas.js"></script>
<style type="text/css">
#map_container {
background: #fff7e7;
position:absolute;
top:0; left:0; right:0; bottom:0;
cursor: default;
}
#btn_container {
position:absolute;
left:12px; bottom:12px;
z-index: 1000;
}
</style>
<script type="text/javascript" charset="UTF-8">
var map; // leaflet地図
var bound; // 表示領域(全体表示で表示される範囲)
var canLay; // キャンバスレイヤ
var canSize; // ドットサイズ 縦, 横
var canRange; // World範囲 左下[y,x], 右上[y,x]
function init() { // 初期処理
map = L.map('map_container', {crs: L.CRS.Simple, minZoom: 5, maxZoom: 12, zoomControl: false});
L.control.zoom({position:'bottomright'}).addTo(map); // ズーム制御
canSize = [2000, 1245]; // 横, 縦
canRange = [[-1.399, -3.272], [5.710, 8.148]]; // 左下[y,x], 右上[y,x]
bound = L.latLngBounds(canRange); // 表示領域の設定
L.imageOverlay('img/plan01.png', bound).addTo(map); // 背景画像の表示
map.fitBounds(bound);
canLay = L.canvasOverlay(canSize, canRange);
canLay.addTo(map);
let ctx = canLay.getContext();
if (ctx != null) {
// map座標でキャンバスに線分を表示
ctx.beginPath();
ctx.strokeStyle = "#00aa00";
ctx.lineWidth = 6;
let p1 = canLay.map2can([3, 2]); // y, x の配列でも記述可能
ctx.moveTo(p1.x, p1.y);
let p2 = canLay.map2can([5, 3]); // y, x の配列でも記述可能
ctx.lineTo(p2.x, p2.y);
ctx.closePath();
ctx.stroke();
// map座標でキャンバスに円を表示
ctx.beginPath();
ctx.strokeStyle = "#aa0000";
ctx.lineWidth = 6;
let p3 = canLay.map2can([5, 3]); // y, x の配列でも記述可能
let r = 1 / canLay.getScale();
ctx.arc(p3.x, p3.y, r, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.stroke();
// キャンバス全体に×を表示
ctx.beginPath();
ctx.strokeStyle = "#0000aa";
ctx.lineWidth = 6;
ctx.moveTo(0, 0); // x, y
ctx.lineTo(2000, 1245);
ctx.moveTo(0, 1245); // x, y
ctx.lineTo(2000, 0);
ctx.closePath();
ctx.stroke();
// キャンバス中心の円をmap側に重ねて表示
let p0 = canLay.can2map([1000, 623]); // x, y
L.circle(p0, 0.2, {color: '#00ddff'}).addTo(map);
}
}
</script>
</head>
<body onload="init()">
<div id="map_container"></div>
<div id="btn_container">
<input type="button" onclick="map.fitBounds(bound)" value="全体表示" />
</div>
</body>
</html>