我有一个普通的底图，想使用 OSM 数据在其上添加道路和地点名称

Question

一般来说，我的目标是在某些边界内制作 map，允许查询和搜索郊区名称或城市名称以及我稍后将添加的数据集，例如建筑物信息！

现在我有一个名为 voyager 的底图：

var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
    subdomains: 'abcd',
    maxZoom: 20
});
map.addLayer(layer);

已经嵌入到我的网页中。

我的问题是最好的方法是什么： 1-从 OpenStreetMap 中提取公共数据？ （如道路名称、商店、公园名称等） 2 将从 OSM 提取的数据放在我的 Basemap 上它们应该在的位置（如街道名称）。 3-使 map 可搜索和可搜索，就像您搜索地址或基准时一样。

如果需要相当多的知识，您会推荐任何分步教程资源吗？ 像绑定QGIS和QuickOSM等等我不知道的？