wmts (GeoTiff) pour une source Mapbox-GL

Question

J'essaie d'utiliser un wmts (à partir de GeoServer d'un GeoTiff) pour une source Mapbox-GL. Mapbox-GL est capable de créer la source et le calque sans aucune erreur. Cependant, la couche n'est pas rendue et GeoServer n'est jamais interrogé pour les tuiles.

map.on('load', function() { 

    // Create raster layer from GeoServer 
    map.addSource('rasterTest', { 
     'type': 'raster', 
     'tiles': 'http://localhost:32769/geoserver/gwc/service/wmts?SERVICE=WMTS&REQUEST=GetTile&LAYER=enview:sample&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&format=image%2Fpng&TileCol={x}&TileRow={y}', 
     'tileSize': 256, 
    }); 

    map.addLayer({ 
     'id':1, 
     'source': 'rasterTest', 
     'type': 'raster', 
     'visibility': 'visible', 
     'source-layer': 'rasterTest', 
    }); 

    console.log('map:'); 
    console.log(map); 

}) 

Answer 1

Vous avez ajouté des 'tuiles' en tant qu'option à addSource. Je ne pense pas que cela soit valable pour une source raster - voir docs here. Au lieu de cela, vous avez besoin d'une propriété 'url'. Le prochain gotcha est que la propriété 'url' n'est pas directement un modèle d'URL comme beaucoup de librairies de mapping, mais l'URL d'un doc TileJSON (pas assez de rep pour lier, désolé!), Qui contient le pattern. Ce n'est pas correctement documenté sur le lien ci-dessus.

Voici un WMTS TileJSON doc minimum je suis arrivé à travailler avec MapBox GL JS 0.15.0: https://gist.github.com/georgemarrows/e6eba8207281a93a0fc1

Answer 2

Modifier la "couche-source" avec le nom de la couche de wmts.

'source-layer': 'enview:sample' ou 'source-layer': 'sample'

//modified source 
map.on('load', function() { 

    // Create raster layer from GeoServer 
    map.addSource('rasterTest', { 
     'type': 'raster', 
     'tiles': 'http://localhost:32769/geoserver/gwc/service/wmts?SERVICE=WMTS&REQUEST=GetTile&LAYER=enview:sample&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&format=image%2Fpng&TileCol={x}&TileRow={y}', 
     'tileSize': 256, 
    }); 

    map.addLayer({ 
     'id':'rasterTest', 
     'source': 'rasterTest', 
     'type': 'raster', 
     'visibility': 'visible', 
     'source-layer': 'enview:sample' //'rasterTest', 
    }); 

})