用Mapzen瓷砖配传单

Question

我对传单和马岑文档的阅读表明，要使用带有传单的自定义瓷砖提供者，只需做两件事：

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

奇怪的是，传单文档和教程请求一个PNG瓷砖层(http://{s}.tile.osm.org/{z}/{x}/{y}.png)，而不是原始数据。

我在这里做错什么了？

Answer 1

瓷砖层用于光栅块(例如，普通图像，比如PNG格式)。

Mapzen提供向量瓷砖。要将它们与传单一起使用，您可以使用插件，例如Leaflet.VectorGrid (许可证)

在传单1.0.0中显示栅格矢量数据(切片GeoJSON或原生质体瓷砖)

请参阅演示，其中包括来自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)。