如何在Leaflet中使用人道主义图层替代OpenStreetMap标准图层？

嘿，这个问题我刚好折腾过！在Leaflet里把默认的OpenStreetMap标准图层换成人道主义（Humanitarian/Hot）图层其实超简单，只需要调整瓦片地址和版权声明就行，给你一步步拆解：

先回顾下默认的OSM图层写法 #

咱们平时初始化Leaflet默认底图是这样的：

// 默认OpenStreetMap标准图层
const defaultOSMLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

// 绑定到地图
const map = L.map('map').setView([51.505, -0.09], 13);
defaultOSMLayer.addTo(map);

替换为人道主义图层的核心修改 #

人道主义图层是OpenStreetMap专门为人道主义场景（比如灾害响应、社区救援）优化的瓦片服务，只需要改两个地方：

• 修改瓦片服务URL：把标准图层的地址换成人道主义图层的地址：https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
• 更新版权归属声明：人道主义图层由Hot团队维护，所以要在attribution里加上对应的版权信息，这是使用开源地图资源的必要规范哦

完整代码示例 #

// 初始化人道主义图层
const humanitarianLayer = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/">OpenStreetMap France</a>'
});

// 创建地图并设置人道主义图层为默认底图
const map = L.map('map').setView([51.505, -0.09], 13);
humanitarianLayer.addTo(map);

额外小提示 #

• 如果你的地图已经加载了默认的OSM图层，记得先调用 defaultOSMLayer.remove() 移除旧图层，再添加新的人道主义图层；
• 地址里的 {s} 是子域名占位符，Leaflet会自动轮换a/b/c三个子域名，提升瓦片加载效率；
• 一定要保留完整的版权声明，这是遵守OpenStreetMap使用条款的重要部分~

内容的提问来源于stack exchange，提问作者bissenbay