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

原创

已于 2024-04-13 00:54:53 修改 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

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

背景：

在开发过程中，对接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