1. 需求

使用百度地图JSAPI WebGL v1.0 加载geoserver发布的pbf矢量切片

2. 代码实现

使用百度的矢量图层mvtLayer来加载

let customLayer = new BMapGL.MVTLayer({
        idProperty:  'id',
        spanLevel: -1,
        noCollision: false, // 图层文字碰撞
        transform: { source: 'GCJ02' },
        gridModel: BMapGL.MVTLayer.GridModel.GOOGLEWEB,
        style: {
          point: {
            type: 'point',
            painter: {
              iconSize: [60, 60],
              icon: `http://localhost:8080/images/mapmark/mark.png`
            }
          }
        },
        tileUrlTemplate: `http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myworkspace:roadmark@EPSG%3A900913@pbf/[z]/[x]/[y].pbf`,
        yTemplate: function (x, y, z) {
          return Math.pow(2, z) - y - 1;
        }
      });
mapInstance.addTileLayer(customLayer);

3. 注意事项

图层的原始坐标，最好用WGS84 或者 GCJ02的，如果用BD09的，会比较麻烦
gridModel 默认是BMapGL.MVTLayer.GridModel.BAIDUWEB，这个需要改成BMapGL.MVTLayer.GridModel.GOOGLEWEB,因为我尚未搞清楚百度的网格集到谷歌的网格集的映射关系，也就是如果用BMapGL.MVTLayer.GridModel.BAIDUWEB，切片的XYZ,目前不会算。
yTemplate 可以写，也可以不写，不写的话记得添加加tms:true的属性，这个百度api文档上有
我用的原始切片的坐标系是GCJ02的所以写了配置transform: { source: 'GCJ02' }。如果用百度坐标系，可以不用写，但是图层会整体向上（北）偏，目前不晓得原因。见注意事项1.

百度地图api加载geoserver发布的矢量切片

1. 需求

2. 代码实现

3. 注意事项

4. 效果