openlayers 从二进制加载矢量图块

Question

我想将二进制格式的矢量图块加载到 openlayer，但在 tileLoadFunction 上挂断了。我似乎无法手动将数据设置到图块。我需要使用 tileLoadFunction，因为必须将 API 密钥传递给磁贴服务器以进行身份验证。这是我目前所拥有的：

    let http = HttpClient;

    let layer = new VectorTileLayer();
    layer.setSource(
      new VectorTileSource({
        format: new MVT(),
        url: 'TILE_SERVER_URL',
        tileLoadFunction: (tile, src) => {
          // set headers
          const headers = new HttpHeaders({
            accept: 'application/binary',
            'authentication_id': environment.auth_token,
          });
         
          // retrieve the tiles
          this.http
            .get(src, {
              headers: headers,
              responseType: 'blob',
            })
            .subscribe((data) => {
              if (data !== undefined) {
                console.log(data);
                let vector_tile = tile as VectorTile;
                const format = new MVT();
                // Setting the features as follows is not valid
                // vector_tile.setFeatures(format.readFeatures(data, {}));
              } else {
                tile.setState(TileState.ERROR);
              }
            });
        },
      })
    );

我试图找到类似的例子，但不幸的是，没有任何东西能给我指明正确的方向。

Answer 1

所以主要错误不是使用 blob 类型而是 arraybuffer 导致以下结果：


import MVT from 'ol/format/MVT';
import VectorTileLayer from 'ol/layer/VectorTile';
import VectorTileSource from 'ol/source/VectorTile';

    layer.setSource(
      new VectorTileSource({
        url: 'https://your-vector-tile-api/{z}/{x}/{y}.pbf',
        format: new MVT(),
        tileLoadFunction: (tile: any, src) => {
          tile.setLoader(
            (extent: Extent, resolution: number, projection: Projection) => {
              // set headers
              const headers = new HttpHeaders({
                accept: 'application/binary'
              });

              this.http
                .get(src, {
                  headers: headers,
                  responseType: 'arraybuffer',
                })
                .subscribe((data: any) => {
                  if (data !== undefined) {
                    const format = new MVT();

                    let features = format.readFeatures(data, {
                      extent: extent,
                      featureProjection: projection,
                    });
                    tile.setFeatures(features);
                    this.map.updateSize();
                  } else {
                    this.logger.error('error while loading features');
                    tile.setState(TileState.ERROR);
                  }
                });
            }
          );
        },
      })
    );

openlayers 从二进制加载矢量图块

openlayers load vector tile from binary

openlayers

typescript

angular