将Mapzen瓷砖与Leaflet一起使用 [英] Using Mapzen tiles with Leaflet

问题描述

我对Leaflet和 Mapzen 文档的阅读表明，为了使用自定义带有Leaflet的图块提供程序，只需要做两件事:

My reading of the Leaflet and Mapzen documentations suggest that in order to use a custom tile provider with Leaflet, one needs to do just two things:

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

1. Specify the tile provider in L.tilelayer(urlTemplateToTileProvider)
2. Set this provider to MapZen

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

但是，当我尝试此操作时，我得到一个空的地图，然后继续正确显示标记等.而且还需要对生成的图块URL进行手动测试，例如

However, when I try this I end up with an empty map which then proceeds to display markers etc correctly. And yet a manual test for a generated tile URL, e.g.

http://tile.mapzen.com/mapzen/vector/v1/all/14/8471/5583.mvt?api_key=apiKey

实际上下载了一些-对我来说我听不清-数据.

did in fact download some - unintelligible to me - data.

我还尝试使用Mapzen文档中提到的其他两种格式(.json和.geojson)，但结果完全相同.鉴于后两种格式返回的是人类可读的数据，因此我在浏览器中将它们签出作为测试图块，并且这些数据确实适用于我要使用的区域.

I also tried using the other two formats mentioned in the Mapzen docs (.json and .geojson) but with exactly the same result. Given that the latter two formats return human readable data, I checked them out for my test tile in my browser and the data is indeed for the area I want to use.

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

Curiously enough, the Leaflet docs and tutorials request a PNG tile layer (http://{s}.tile.osm.org/{z}/{x}/{y}.png), not raw data.

很显然，我在这里做错了.对于那些可能会提供帮助的人，我深感荣幸.

Clearly, I am doing something wrong here. I'd be much obliged to anyone who might be able to help.

推荐答案

瓷砖层用于光栅磁贴(即普通图像，例如PNG格式).

The Tile Layer is for raster tiles (i.e. plain images, like the PNG format for example).

Mapzen提供了 vector 磁贴.要将它们与Leaflet一起使用，您可以使用插件，例如 Leaflet.VectorGrid (

Mapzen delivers vector tiles. To use them with Leaflet, you could use a plugin, e.g. Leaflet.VectorGrid (license)

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

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

请参见演示，其中包括Mapzen的图块 >

See the demo, which includes tiles from 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);

由于矢量磁贴中包含原始数据，因此需要提供样式规范(

Since you have raw data in the vector tiles, you need to provide the styling spec (vectorTileStyling)

这篇关于将Mapzen瓷砖与Leaflet一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！