如何在Cesium.js应用中加载Mapbox Tiling Service矢量瓦片

你在MTS完成矢量瓦片发布后，准备好两个必填参数即可接入：

• MTS瓦片集ID，格式为你的Mapbox账号名.自定义瓦片集标识
• 对应瓦片集有权限的Mapbox访问令牌，建议生产环境配置令牌的域名白名单，避免泄露滥用

根据你的使用场景选下面两种实现方式即可，不需要引入额外第三方依赖，Cesium原生支持MVT格式矢量瓦片加载。

方式1：复用Mapbox Studio配置的样式（开发成本最低） #

如果你在发布MTS瓦片时，已经在Mapbox Studio中配置好了完整的图层样式（包括面填充、线宽、颜色、标注规则等），直接用内置的Mapbox样式加载器接入即可，不需要在Cesium里重复写样式规则：

const viewer = new Cesium.Viewer('cesiumContainer', {
  // 替换为你自己的样式ID、访问令牌
  baseLayer: Cesium.ImageryLayer.fromProviderAsync(
    Cesium.MapboxStyleImageryProvider.fromUrl('mapbox://styles/你的账号名/你的样式ID', {
      accessToken: '你的Mapbox访问令牌',
      tileSize: 512
    })
  ),
  baseLayerPicker: false
});

只要你的MTS瓦片集已经关联到对应Mapbox样式，加载时会自动拉取瓦片和样式规则，不需要额外配置瓦片地址。

方式2：单独加载MTS瓦片集，自定义Cesium侧渲染规则 #

如果需要在Cesium侧自定义矢量要素的渲染逻辑，不依赖Mapbox Studio的样式配置，直接对接MTS的MVT原始瓦片接口即可：

// MTS服务配置
const mtsConfig = {
  tilesetId: '你的账号名.你的瓦片集ID',
  accessToken: '你的Mapbox访问令牌',
  maxZoom: 16 // 替换为你在MTS发布时设置的瓦片最大缩放层级
}

// 初始化矢量瓦片提供者
const mvtProvider = new Cesium.MapboxVectorTileImageryProvider({
  url: `https://api.mapbox.com/v4/${mtsConfig.tilesetId}/{z}/{x}/{y}.mvt`,
  accessToken: mtsConfig.accessToken,
  maximumLevel: mtsConfig.maxZoom,
  minimumLevel: 0,
  // 按你瓦片集内的实际图层名自定义样式
  style: {
    // 示例：道路线图层
    road: {
      stroke: Cesium.Color.fromCssColorString('#2d2d2d'),
      strokeWidth: 2,
      zIndex: 2
    },
    // 示例：建筑面图层
    building: {
      fill: Cesium.Color.fromCssColorString('#f0f0f0'),
      stroke: Cesium.Color.fromCssColorString('#cccccc'),
      strokeWidth: 1,
      zIndex: 3
    },
    // 示例：POI点图层
    poi: {
      markerColor: Cesium.Color.fromCssColorString('#e63946'),
      markerSize: 4,
      zIndex: 5
    }
  }
});

// 将瓦片图层添加到场景中
viewer.imageryLayers.addImageryProvider(mvtProvider);

接入注意事项 #

• MTS服务默认支持CORS跨域请求，不需要额外配置代理，只要访问令牌权限配置正确即可正常加载
• 代码中填写的maximumLevel必须和MTS发布时配置的最大缩放层级一致，否则高层级瓦片请求会返回404
• MTS输出的瓦片为Web墨卡托投影（EPSG:3857），Cesium原生适配该坐标系，不需要额外做坐标转换
• 如果需要实现要素点击拾取，给MapboxVectorTileImageryProvider绑定featurePicked事件，即可获取点击位置对应要素的属性字段

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