解决问题 GET https://a.tile.openstreetmap.org/13/6746/3103.png net::ERR_CONNECTION_RESET

项目背景：

• 地图API 技术平替方案参考，防止三大Map商用版权风险。

问题截图：

• 报错内容：
  GET https://a.tile.openstreetmap.org/13/6746/3103.png net::ERR_CONNECTION_RESET

  

问题分析

• 遇到的 ERR_CONNECTION_RESET 报错，说明当前网络无法访问 OpenStreetMap 的官方瓦片服务器（tile.openstreetmap.org）。
• 这在大陆区很常见，因为 OSM 官方地图瓦片经常被墙，导致地图无法正常显示。

解决办法：

1. 更换为国内可用的开源地图瓦片源

可以将 Leaflet 的 tileLayer 地址替换为国内镜像，

比如：

• 腾讯地图（推荐，速度快，免费，无需key）

  L.tileLayer('https://rt0.map.gtimg.com/tile?z={z}&x={x}&y={y}&styleid=2&scene=0', {
    attribution: '© 腾讯地图',
    maxZoom: 18
  }).addTo(map.value)
  

• 高德地图（需注明来源，免费，无需key）

  L.tileLayer('https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
    attribution: '© 高德地图',
    maxZoom: 18
  }).addTo(map.value)
  

• 天地图（中国国家基础地理信息中心，免费，无需key）

  L.tileLayer('https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的天地图key', {
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    attribution: '© 天地图',
    maxZoom: 18
  }).addTo(map.value)
  

2. 代码修改示例（以腾讯地图为例）

• 找到对应组件中如下代码：

  L.default.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
    maxZoom: 19
  }).addTo(map.value)
  

  替换为：

  L.default.tileLayer('https://rt0.map.gtimg.com/tile?z={z}&x={x}&y={y}&styleid=2&scene=0', {
    attribution: '© 腾讯地图',
    maxZoom: 18
  }).addTo(map.value)
  

3. 说明

腾讯地图、高德地图、天地图等国内地图服务，仅提供底图，不会有商用侵权风险（只要不用于导航/路径规划等高级API）。

• 你可以根据实际需求选择合适的底图服务。
• 如果需要卫星图、地形图等，也可以更换 styleid 或 URL。
• 具体还是以读者当前时间对应地图服务商平台的政策协议为准，此处仅可作为本地学习使用。

完结。