ソースファイルを表示

全国ロケ地ガイド
Leafletの使い方
ソースファイルを表示
sample/sample_crs_grid.htm

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Leafletでグリッドを表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.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 grid = 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); // ズーム制御

    bound = L.latLngBounds([-1.396, -3.266], [5.699, 8.133]); // 表示領域の設定
    map.fitBounds(bound);
    L.imageOverlay('img/plan01.png', bound).addTo(map); // 背景画像の表示

    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);
}
</script>
</head>
<body onload="init()">
<div id="map_container"></div>
<div id="btn_container">
    <input type="button" onclick="map.fitBounds(bound)" value="全体表示" />
    <input type="button" onclick="dispGrid(0.909)" value="Grid表示" />
</div>
</body>
</html>