Leaflet加载天地图怎么配?Key在哪里申请?

“天地图Key申请失败？坐标系错乱？”——别慌，Dr.Gis手把手带你打通Leaflet接入全流程

上周一位在国土局实习的研究生私信我：“老师，我按教程加了天地图，怎么一片空白？控制台还报‘403 Forbidden’？”——这几乎是每个GIS新人必踩的坑。别急，今天我就用10年项目实战经验，把Leaflet加载天地图的“暗桩”全给你拔干净。

天地图不是“免费午餐”，Key是你的身份证

很多人以为天地图像OpenStreetMap一样开箱即用，结果一跑代码就撞墙。核心原因：自2020年起，天地图全面启用API Key鉴权机制。没有Key？服务器直接把你当“非法入侵者”拒之门外。

我在参与长三角生态绿色一体化项目时吃过这个亏——团队在野外调试平板端WebGIS，突然所有底图变灰。排查三小时才发现是测试Key过期。从此我给新人立规矩：Key管理必须像管银行卡密码一样严谨！

三步拿到你的“天地图通行证”

1. 打开天地图API控制台（认准官网！警惕山寨站）
2. 用手机号注册 → 实名认证（个人选“自然人”，企业选“法人”）
3. 创建应用 → 填写应用名称（如“MyLeafletApp”）→ 勾选“浏览器端” → 自动生成Key

⚠️ 重要提醒：免费Key有配额限制（日调用量1万次），商用务必申请企业版。Key泄露？立刻在控制台“重置密钥”！

Leaflet配置避坑指南：坐标系+瓦片URL双核校验

拿到Key只是第一步，90%的空白图问题出在坐标系和URL拼接。记住这个黄金公式：

// 天地图使用CGCS2000坐标系（等同于WGS84），Leaflet默认EPSG:3857需显式声明
L.tileLayer('https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=你的KEY', {
    attribution: '天地图',
    crs: L.CRS.EPSG3857 // 关键！强制指定坐标系
}).addTo(map);

类比教学：这就像寄快递——你填了收件人（Key），但没写城市区号（坐标系），包裹当然送不到。常见瓦片类型对照表：

终极调试技巧：开发者工具是你的“听诊器”

如果还是显示异常，打开浏览器F12：

• Network标签页 → 查看tile请求状态码（403=Key错误，404=URL拼错）
• Console标签页 → 检查是否有跨域报错（需确保域名已备案或使用localhost测试）
• 用Postman直接访问瓦片URL → 快速验证Key有效性

最后送你一个我私藏的调试代码片段——自动切换备用节点避免服务中断：

const tdtServers = [
  'https://t0.tianditu.gov.cn',
  'https://t1.tianditu.gov.cn', 
  'https://t2.tianditu.gov.cn'
];
// 随机选择服务器提升稳定性
const serverUrl = tdtServers[Math.floor(Math.random() * tdtServers.length)];

总结：三个动作立即生效

① 申请Key → 控制台实名认证
② 校验URL → 对照上表检查layer参数和tk位置
③ 声明坐标系 → 添加crs: L.CRS.EPSG3857

现在轮到你了！在评论区告诉我：
“你卡在哪个环节了？是Key申请被拒，还是瓦片加载失败？”
我会抽三位读者，赠送《天地图企业级密钥申请避坑手册》PDF（含审批话术模板）！