leaflet - 在传单中使用Mapzen瓷砖

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


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

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

但是，当我尝试这样做时，我最终得到一个空的地图，然后继续正确显示标记等。尚需手动测试生成的图块网址，例如

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），而不是原始数据。

我在这里做错了什么？

最佳答案

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）