Mapbox 中图层的使用

一、矢量图层的加载及显示 (shp)

:::warning 接下来，我们以临安行政区域图层切片（面图层，图层切片名称为 linanAI:region）为例进行说明。

• WMTS协议切片地址：http://192.168.0.17:8080/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=linanAI:**region**&TILEMATRIXSET=EPSG:900913&TILEMATRIX=EPSG:900913:{z}&TILECOL={x}&TILEROW={y}&FORMAT=application/vnd.mapbox-vector-tile

• TMS协议切片地址：http://192.168.0.17:8080/geoserver/gwc/service/tms/1.0.0/linanAI:**region**@EPSG:900913@pbf/{z}/{x}/{y}.pbf :::

  加载矢量切片数据源

  矢量切片数据源可以通过两种不同的协议加载，分别是TMS和WMTS。TMS是OSGeo（Open Source Geospatial Foundation，开源空间信息基金会)创建的协议，WMTS是OGC（Open Geospatial Consortium，开放地理空间信息联盟）创建的协议。

• 通过 WMTS 协议加载

const wmtsUrl = 'http://192.168.0.17:8080/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=linanAI:region&TILEMATRIXSET=EPSG:900913&TILEMATRIX=EPSG:900913:{z}&TILECOL={x}&TILEROW={y}&FORMAT=application/vnd.mapbox-vector-tile' 
// 为了和addLayer中字段source-layer的值保持一致，建议sourceName取同一个值region 
let sourceName = 'region' 
map.addSource(sourceName, { 
    type: 'vector', 
    tiles: [wmtsUrl], 
})

• 通过 TMS 协议加载（推荐）

const tmsUrl = 'http://192.168.0.17:8080/geoserver/gwc/service/tms/1.0.0/linanAI:region@EPSG:900913@pbf/{z}/{x}/{y}.pbf' 
// 为了和map.addLayer中字段source-layer的值保持一致，建议sourceName取同一个值region 
let sourceName = 'region' 
map.addSource(sourceName, { 
    scheme: 'tms', // 加载TMS协议的切片地址，必须指明scheme字段为tms 
    type: 'vector', 
    tiles: [tmsUrl], 
})

添加图层

// 添加临安范围填充面图层 
let options = { 
    id: `city-area-layer`, 
    source: `region`, // 取map.addSource中的sourceName 
    'source-layer': `region`, // 该值必须为图层切片名（linanAI:region）中的region 
    type: 'fill', 
    paint: { 
      'fill-color': 'rgba(28,75,93, 0.8)', 
    }, 
} 
map.addLayer(options) 
// 添加临安行政边界线图层 
let lineOption = { 
    id: `city-line-layer`, 
    source: `region`, // 取map.addSource中的sourceName 
    'source-layer': `region`, // 该值必须为图层切片名（linanAI:region）中的region 
    type: 'line', 
    layout: { 
      'line-cap': 'round', 
      'line-join': 'round', 
    }, 
    paint: { 
      'line-color': '#6AF9F8', 
      'line-width': 2, 
    }, 
} 
map.addLayer(lineOption)

最终展示效果

二、栅格图层的加载及显示 （tiff）

:::warning 图层内容：临安区卫星底图
图层地址：http://192.168.0.17:8080/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=linanAI:linanditu_WGS84&TILEMATRIXSET=EPSG:900913&TILEMATRIX=EPSG:900913:{z}&TILECOL={x}&TILEROW={y}&FORMAT=image/png :::

加载数据源和图层

Note：栅格图层切片一般都是通过 WMTS 协议 进行加载

• 方式一：切片数据源和图层分开加载

const wmtsUrl = 'http://192.168.0.17:8080/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=linanAI:linanditu_WGS84&TILEMATRIXSET=EPSG:900913&TILEMATRIX=EPSG:900913:{z}&TILECOL={x}&TILEROW={y}&FORMAT=image/png' 
// 加载切片数据源 
map.addSource('linanditu_WGS84', { 
    type: 'raster', // 切片地图使用png，所以这里设置为raster 
    tiles: [wmtsUrl], 
}) 
// 加载图层 
map.addLayer({ 
    id: 'linan_satellite', 
    type: 'raster', // 这里要用raster，因为切片得到的是图片 
    source: `linanditu_WGS84`, 
    tileSize: 256, 
})

• 方式二：切片数据源和图层同时加载（推荐）

map.addLayer({ 
    id: 'linan_satellite', 
    type: 'raster', // 这里要用raster，因为切片得到的是图片 
    source: { 
      type: 'raster', // 切片地图使用png，所以这里设置为raster 
      tiles: [ 
        'http://192.168.0.17:8080/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=linanAI:linanditu_WGS84&TILEMATRIXSET=EPSG:900913&TILEMATRIX=EPSG:900913:{z}&TILECOL={x}&TILEROW={y}&FORMAT=image/png', 
      ], 
    }, 
    tileSize: 256, 
})

最终展示效果