浏览器端解码MVT数据适配Google Maps API的实现方案咨询

推荐实现方案 #

直接使用@mapbox/vector-tile和pbf两个独立轻量包即可，二者总体积仅几十KB，完全不需要引入整个mapbox-gl库，解码效果和Python端的mapbox_vector_tile包一致。

依赖引入方式 #

• 如果使用npm/yarn包管理工具：

npm install @mapbox/vector-tile pbf

• 如果是直接通过script标签在HTML中引入，可使用对应UMD版本，引入后直接通过全局变量访问VectorTile和Pbf对象即可，无需包管理工具。

解码示例代码 #

import VectorTile from '@mapbox/vector-tile'
import Pbf from 'pbf'

/**
 * 解码MVT二进制数据
 * @param {ArrayBuffer} mvtBuffer 下载得到的MVT二进制数据
 * @param {number} tileX 瓦片横坐标
 * @param {number} tileY 瓦片纵坐标
 * @param {number} tileZ 瓦片缩放层级
 * @returns {Object} 解码后的结构化数据，结构和Python端返回结果对齐
 */
function decodeMvt(mvtBuffer, tileX, tileY, tileZ) {
  const pbf = new Pbf(mvtBuffer)
  const tile = new VectorTile(pbf)
  const decodedResult = {}

  // 遍历瓦片内的所有图层
  Object.keys(tile.layers).forEach(layerName => {
    const layer = tile.layers[layerName]
    const features = []
    
    // 遍历图层内的所有要素
    for (let i = 0; i < layer.length; i++) {
      const feature = layer.feature(i)
      // 转为标准GeoJSON格式，可直接在Google Maps API的Data图层渲染
      features.push(feature.toGeoJSON(tileX, tileY, tileZ))
    }

    decodedResult[layerName] = {
      version: layer.version,
      extent: layer.extent,
      features: features
    }
  })

  return decodedResult
}

适配Google Maps API用法 #

解码得到的GeoJSON可以直接传入Google Maps API的google.maps.Data图层的addGeoJson方法，即可完成矢量要素的渲染，完全适配你切换矢量瓦片服务的需求。

补充说明 #

如果不需要生成标准GeoJSON，仅需要提取瓦片内的属性和局部坐标，直接读取feature对象的properties和loadGeometry()返回的几何数据即可，不需要传入瓦片坐标参数。

内容的提问来源于stack exchange，提问作者Antonio Gamiz Delgado