LeafletJS基础地图优化：如何仅保留道路与建筑（无标注信息）

核心思路 #

Leaflet的底图内容完全由瓦片服务决定，默认OpenStreetMap瓦片包含大量标签信息，你需要使用自定义样式的瓦片服务，只保留道路、建筑的几何图形，隐藏所有文字类元素（名称、编号、POI标签等）。

具体实现步骤 #

1. 自定义瓦片样式（推荐用Maptiler/Mapbox Studio）

这类可视化工具能直接编辑OpenStreetMap的图层，快速剔除冗余元素：

• 新建空白样式，导入OpenStreetMap数据源
• 在图层列表中，仅保留道路（roads）、**建筑（buildings）**相关图层，删除或隐藏所有带文字标签的图层（比如place_labels、road_labels、poi_labels等）
• 按需调整道路、建筑的颜色样式，导出为瓦片服务并获取对应的瓦片URL

2. 在Leaflet中加载自定义瓦片

将默认的OpenStreetMap图层替换为你自定义的瓦片服务，示例代码：

// 初始化地图
const map = L.map('map').setView([51.505, -0.09], 13);

// 加载自定义无标签道路建筑瓦片（替换成你自己的瓦片URL和API密钥）
L.tileLayer('https://api.maptiler.com/maps/your-custom-style/{z}/{x}/{y}.png?key=YOUR_API_KEY', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 18
}).addTo(map);

3. 备选方案：使用现成极简瓦片服务

如果不想自定义样式，可选择合规的开源极简瓦片（仅包含道路、建筑，无文字标签），直接替换图层URL即可（注意确认瓦片的版权许可）。

注意事项 #

• 所有基于OpenStreetMap的瓦片服务，需保留对应的版权声明
• 若需离线使用，可下载对应层级的瓦片文件，通过L.tileLayer加载本地路径

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