将 Mapzen 瓦片与 Leaflet 一起使用答案

【问题标题】：Using Mapzen tiles with Leaflet将 Mapzen 瓦片与 Leaflet 一起使用
【发布时间】：2020-05-27 05:34:48
【问题描述】：

我对 Leaflet 和 Mapzen 文档的阅读表明，要在 Leaflet 中使用自定义磁贴提供程序，只需做两件事：

在L.tilelayer(urlTemplateToTileProvider) 中指定磁贴提供程序
将此提供程序设置为 MapZen

var urlTemplateToTileProvider =
  'http://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=apiKey'

但是，当我尝试这个时，我最终得到一个空地图，然后继续正确显示标记等。然而，对生成的磁贴 URL 进行手动测试，例如

http://tile.mapzen.com/mapzen/vector/v1/all/14/8471/5583.mvt?api_key=apiKey

实际上确实下载了一些 - 我无法理解的 - 数据。

我还尝试使用 Mapzen 文档中提到的其他两种格式（.json 和 .geojson），但结果完全相同。鉴于后两种格式返回人类可读的数据，我在浏览器中为我的测试磁贴检查了它们，并且数据确实适用于我想要使用的区域。

奇怪的是，Leaflet 文档和教程要求的是 PNG 切片图层 (http://{s}.tile.osm.org/{z}/{x}/{y}.png)，而不是原始数据。

我在这里做错了什么？

【问题讨论】：

标签： leaflet openstreetmap mapzen

【解决方案1】：

Tile Layer 用于光栅图块（即普通图像，例如 PNG 格式）。

Mapzen 提供矢量图块。要将它们与 Leaflet 一起使用，您可以使用插件，例如Leaflet.VectorGrid (license)

在 Leaflet 1.0.0 中显示网格矢量数据（切片 GeoJSON 或 protobuf 矢量切片）

查看demo，其中包括来自 Mapzen 的图块

var mapzenTilesUrl = "https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key={apikey}";
var mapzenVectorTileOptions = {
  rendererFactory: L.canvas.tile,
  attribution: '<a href="https://mapzen.com/">&copy; MapZen</a>, <a href="http://www.openstreetmap.org/copyright">&copy; OpenStreetMap</a> contributors',
  vectorTileLayerStyles: vectorTileStyling,
  apikey: 'KEY',
};
var mapzenTilesPbfLayer = L.vectorGrid.protobuf(mapzenTilesUrl, mapzenVectorTileOptions);

由于矢量切片中有原始数据，因此您需要提供样式规范 (vectorTileStyling)

【讨论】：