leaflet 显示地图加载的瓦片的行列号

liuccn

已于 2024-04-13 00:54:53 修改

阅读量1.2k

点赞数 12

分类专栏： GIS 文章标签： javascript

于 2024-04-12 21:50:57 首次发布

本文链接：https://blog.csdn.net/lc_2014c/article/details/137695778

版权

GIS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在开发中通过重写Leaflet的GridLayer的createTile方法，实现在地图加载瓦片时显示其行列号，以便于调试WMTS服务的参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：

在开发过程中，对接wmts服务的时候，调试参数过程中有时候需要直观看到当前地图加载的瓦片的行列号。

实现原理：

利用Leaflet的L.GridLayer图层，加载一个网格图层，重写其createTile方法，来专门显示瓦片的行列号。

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" rel="stylesheet">
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    let map;
    (function () {
      let tdtLayer, gridLayer;
      const TK_KEY = '天地图key';
      L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
        code: 'EPSG:4326',
        projection: L.Projection.LonLat,
        transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
        scale: function (zoom) {
          return 256 * Math.pow(2, zoom - 1);
        }
      });
      map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.CustomEPSG4326,
        minZoom: 0,
        maxZoom: 20,
        center: [29.563761, 106.550464],
        zoom: 15,
      });

      initTdtImgLayers()
      function initTdtImgLayers() {
        const img_c = `http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=${TK_KEY}`;
        debugger
        tdtLayer = L.tileLayer(img_c, {
          tileSize: 256,
          attribution: false,
          subdomains: [0, 1, 2],
        });
        tdtLayer.on('add', () => {
           initGridLayer()
        });
        tdtLayer.addTo(map)
      }

      function initGridLayer() {
        gridLayer = new L.GridLayer({
          attribution: 'Grid Layer',
          tileSize: new L.Point(256, 256)
        });
        gridLayer.createTile = (coords) => {
          const tile = L.DomUtil.create('div', 'grid');
          const indexStr = [coords.x, coords.y, coords.z].join(', ');
          tile.style.outline = '1px solid red';
          tile.style.color = 'white';
          tile.innerHTML = indexStr;
          return tile;
        };
        gridLayer.addTo(map);
      }
    })()

  </script>
</body>

</html>

效果

在这里插入图片描述