Utilisation de tuiles Mapzen avec Dépliant

Question

Ma lecture de la notice et Mapzen documentation suggèrent que pour utiliser un fournisseur de carrelage personnalisé avec notice, il faut faire seulement deux choses:

1. spécifier le fournisseur de tuiles dans L.tilelayer(urlTemplateToTileProvider)
2. Définir ce fournisseur à MapZen

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

Cependant, quand je fami s Je me retrouve avec une carte vide qui continue à afficher correctement les marqueurs, etc. Et encore un test manuel pour une URL de tuile générée, par ex.

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

ont en fait télécharger un - incompréhensible pour moi - données. J'ai également essayé d'utiliser les deux autres formats mentionnés dans les documents Mapzen (.json et .geojson) mais avec exactement le même résultat. Étant donné que les deux derniers formats renvoient des données lisibles par l'homme, je les ai vérifiés pour ma tuile de test dans mon navigateur et les données sont en effet pour la zone que je veux utiliser. Assez curieusement, les docs Leaflet et tutoriels demandent une couche de tuiles PNG (http://{s}.tile.osm.org/{z}/{x}/{y}.png), pas de données brutes.

De toute évidence, je fais quelque chose de mal ici. Je serais très obligé à tous ceux qui pourraient être en mesure d'aider.

Answer 1

La Tile Layer est pour raster (c'est-à-dire des images simples, comme le format PNG par exemple).

Mapzen livre vecteur tuiles. Pour les utiliser avec Leaflet, vous pouvez utiliser un plugin, par ex. Leaflet.VectorGrid (license)

dans la fiche 1.0.0

Afficher les données vectorielles maillée (tuiles coupées en tranches vecteur GeoJSON ou protobuf) Voir la demo, qui comprend des carreaux de 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); 

Depuis vous avez des données brutes dans les tuiles de vecteur, vous devez fournir les spécifications de style (vectorTileStyling)