使用Leafzen瓷砖与Leaflet

Question

我阅读Leaflet和Mapzen文档表明,为了使用Leaflet的自定义tile提供程序,需要做两件事:

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 tile layer(http://{s}.tile.osm.org/{z}/{x}/{y}.png),而不是原始数据.

显然,我在这里做错了.对于任何可能提供帮助的人,我都非常感激.

Answer 1

的瓷砖层为光栅瓦片(即普通图像,像PNG格式例如).

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

在Leaflet 1.0.0中显示网格化矢量数据(切片GeoJSON或protobuf矢量切片)

查看演示,其中包括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)