在 Leaflet 中使用 Mapzen 图块

Question

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. 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'

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, eg

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

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

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.

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

What am I doing wrong here?

Answer 1

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

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

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

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 )