解决问题 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。
- 具体还是以读者当前时间对应地图服务商平台的政策协议为准,此处仅可作为本地学习使用。
完结。
864

被折叠的 条评论
为什么被折叠?



