在 Leaflet 中使用 Mapzen 磁贴

Question

我对 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），但结果完全相同。考虑到后两种格式 return 人类可读数据，我在浏览器中检查了它们的测试图块，数据确实是我想使用的区域。

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

我做错了什么？

Answer 1

Tile Layer 用于 raster tiles（即纯图像，例如 PNG 格式）。

Mapzen 交付了 vector 个图块。要将它们与 Leaflet 一起使用，您可以使用插件，例如Leaflet.VectorGrid (license)

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0

查看 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)

在 Leaflet 中使用 Mapzen 磁贴

Using Mapzen tiles with Leaflet

openstreetmap

leaflet

mapzen