如何在我的 OSM 地图中使用 Leaflet 显示“公共 gps 跟踪”？答案

【问题标题】：How do I display "public gps traces" with Leaflet in my OSM map?如何在我的 OSM 地图中使用 Leaflet 显示“公共 gps 跟踪”？
【发布时间】：2017-11-15 16:19:37
【问题描述】：

当我去 openstreetmaps 时，我可以看到查询字符串中的标志切换，但在我的地图传单实现中，我无法显示“公共 GPS 跟踪”或“自行车地图”。我是 Leaflet 的新手，并假设它是一层。但是有很多层的变体，我不知道如何让它显示这些。

这是我的代码...

var map = L.map( 'wwmap', {
  center: [41.2779, -72.7073],
  minZoom: 9,
  zoom: 13,   
}) 
  L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a', 'b', 'c']
}).addTo( map )

在以下 URL 中，我可以看到正在传递的层标志 (layers=CG)。不知道如何让它们显示在带有传单的嵌入默认地图中。带有查询字符串的示例 URL： https://www.openstreetmap.org/#map=16/41.2812/-72.7147&layers=CG

【问题讨论】：

标签： leaflet openstreetmap

【解决方案1】：

这些标志 (layers=CG) 与您无关。他们只是告诉要激活哪些图块来源。

查看浏览器加载的图像，您将看到这些图块来源的 URL。 GPS层位于http://gps-{s}.tile.openstreetmap.org/lines/，循环层位于http://{s}.tile.thunderforest.com/cycle/。

有关可能的磁贴服务器列表，请查看：

请注意，每个磁贴服务器都有一个特定的usage policy，您必须遵循。此外，有些（例如 Thunderforest 中的图块）需要 API 密钥。

【讨论】：

【解决方案2】：

我们需要添加两个瓦片层，以实现公共gps跟踪

 var map = new L.Map("map", { center: [37.8, -96.9], zoom: 4})
                    .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"))
                    .addLayer(new L.TileLayer("http://gps-{s}.tile.openstreetmap.org/lines/{z}/{x}/{y}.png"));

【讨论】：