Leafletのタイル座標をグリッド表示|Web地図サービスの為のオープンソースライブラリ

　タイル座標（z,x,y）をGridlayerで表示します。

　タイル座標の詳細についてはこちら

　タイル座標の確認ページはこちら

使い方
全体コード

使い方

　GridLayerで表示するクラスを作成します。タイル表示の矩形情報、及び、タイル座標表示の文字列情報をdiv要素を用いて設定します。

var GridLayerClass = L.GridLayer.extend({
  createTile: function (coord) {
      //タイル表示するdiv要素を作成
      var _tileDiv = L.DomUtil.create('div', '');
      _tileDiv.setAttribute("style", "border: solid 1px;color:#FF0000");
      //座標表示するdiv要素を作成
      var _coodDiv = L.DomUtil.create('div', '', _tileDiv);
      _coodDiv.setAttribute("style", "position:absolute;background-color:white");
      _coodDiv.innerHTML = "z = " + coord.z + "<br>x = " + coord.x + "<br>y = " + coord.y;
      return _tileDiv;
  }
});

　GridLayerのクラスを生成し、地図に追加します。

var _zxy = new GridLayerClass();
_zxy.addTo(_map);

全体コード

<html lang="ja">
<head>
 <title>Leafletのタイル座標の表示</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>

<div id="map" style="width:100%;height:100%"></div>
<script>
  var GridLayerClass = L.GridLayer.extend({
    createTile: function (coord) {
        //タイル表示するdiv要素を作成
        var _tileDiv = L.DomUtil.create('div', '');
        _tileDiv.setAttribute("style", "border: solid 1px;color:#FF0000");
        //座標表示するdiv要素を作成
        var _coodDiv = L.DomUtil.create('div', '', _tileDiv);
        _coodDiv.setAttribute("style", "position:absolute;background-color:white");
        _coodDiv.innerHTML = "z = " + coord.z + "<br>x = " + coord.x + "<br>y = " + coord.y;
        return _tileDiv;
    }
  });

  //表示位置を設定
  var _map = L.map('map');
  //初期表示時に中心座標とズームレベルを設定
  _map.setView([35.6895, 139.69172], 10);
  //初期表示時の表示地図を設定
  L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
      attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
  }).addTo(_map);
  //タイル座標のレイヤーを設定
  var _zxy = new GridLayerClass();
  _zxy.addTo(_map);
</script>

</body>
</html>

サンプルを別画面で実行