使用Mapzen瓦片与Leaflet

Question

根据我对Leaflet和Mapzen文档的阅读，想要在Leaflet中使用自定义瓦片提供者，只需要做两件事：

1. 在L.tilelayer(urlTemplateToTileProvider)中指定瓦片提供者
2. 将此提供者设置为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），而不是原始数据。

我在这里做错了什么？

- DroidOS

Answer 1

Tile Layer 是用于 raster 图块 (例如 PNG 格式的普通图像) 的。Mapzen 提供的是vector图块。要在 Leaflet 上使用它们，您可以使用插件，例如 Leaflet.VectorGrid (许可证)。请参见包括来自 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)。

- ghybs