leaflet怎么使用本地文件夹的瓦片地图

在 Leaflet 中，要使用本地文件夹作为瓦片地图（TileLayer），你可以通过创建一个自定义 TileLayer Provider 实现。以下是基本步骤：

1. 首先，你需要瓦片图片的目录结构，通常应按照 OpenStreetMap 的标准格式组织，即每个层级（zoom级别）对应一个文件夹，文件夹内包含大小相等的 tiles。例如：

tiles/
|-- zoom0/
|   |-- tile000.png
|   |-- tile001.png
|   ...
|-- zoom1/
|   ...
|-- ...

2. 创建一个自定义 TileLayer 类：

import L from 'leaflet';

class LocalTilesProvider {
  constructor(tileDir) {
    this.tileDir = tileDir;
  }

  getTileUrl(x, y, z) {
    const tilePath = [z, x, y].join('/') + '.png';
    return this.tileDir + tilePath;
  }
}

// 使用
const localTiles = new LocalTilesProvider('tiles/');
const tileLayer = L.tileLayer(localTiles.getTileUrl, {
  attribution: 'Your custom attribution',
  maxZoom: 18 // 根据你的瓦片实际覆盖范围调整
});

3. 将这个 TileLayer 添加到地图上：

const map = L.map('map').setView([51.505, -0.09], 13); // 设置初始中心点和缩放级别
map.addLayer(tileLayer);