如何使用maplibre-gl-js仅调用Mapbox Vector Tiles API渲染矢量瓦片

你当前使用mapbox://styles/mapbox/light-v10作为样式地址的写法，会加载Mapbox托管的完整样式资源，Mapbox会将这类完整样式加载行为统计为「Web端地图加载量」。要仅调用Mapbox Vector Tiles API使用矢量瓦片，你可以手动构造自定义样式，单独指定Mapbox矢量瓦片作为数据源，代码示例如下：

// 替换为你自己的Mapbox访问令牌
const MAPBOX_TOKEN = '你的Mapbox Access Token';

this.map = new maplibregl.Map({
  container: this.element,
  // 自定义样式，不使用Mapbox托管的完整样式
  style: {
    version: 8,
    sources: {
      'mapbox-tiles': {
        type: 'vector',
        // 直接调用Mapbox Vector Tiles API，可自行替换为需要的瓦片集ID
        tiles: [`https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=${MAPBOX_TOKEN}`],
        tileSize: 512,
        attribution: '© Mapbox © OpenStreetMap contributors'
      }
    },
    layers: [
      // 按需配置矢量瓦片对应图层的渲染规则，以下为路网图层示例
      {
        id: 'road-layer',
        type: 'line',
        source: 'mapbox-tiles',
        'source-layer': 'road',
        paint: {
          'line-color': '#cccccc',
          'line-width': 1
        }
      }
      // 可继续补充其他图层的样式配置
    ]
  }
})

• 上述写法直接请求Mapbox Vector Tiles API的mvt瓦片资源，不会触发Mapbox的「Web端地图加载量」统计，所有请求会计入Mapbox Vector Tiles API的调用量，你可以根据业务需求调整tiles参数中的瓦片集ID，也可叠加配置多个Mapbox矢量瓦片源。
• 你需要根据所用瓦片集包含的图层列表，自行配置所有需要展示的图层样式规则，未配置的瓦片图层不会在地图上渲染。

内容的提问来源于stack exchange，提问作者Vasco Nunes