Mapbox-GL源的wmts (GeoTiff)

Question

我正在尝试使用Mapbox-GL源的wmts (来自GeoTiff的GeoServer )。Mapbox-GL能够在没有任何错误的情况下创建源和图层。但是，不会渲染层，也不会向GeoServer查询平铺。

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

你已经将'tiles‘作为addSource的一个选项列出了。我不认为这对于栅格源是有效的-请参阅docs here。相反，你需要一个'url‘属性。

下一个问题是，' URL‘属性并不像许多映射库那样直接是一个URL模式，而是一个包含该模式的TileJSON文档的URL(没有足够的代表链接，对不起！)。这没有在上面的链接中正确地停靠。

这是我使用Mapbox GL JS 0.15.0：https://gist.github.com/georgemarrows/e6eba8207281a93a0fc1时得到的一个最小的WMTS TileJSON文档

Answer 2

使用wmts层名称更改"source- LAYER“。

'source-layer': 'enview:sample'或'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',
    });

})