openlayers从二进制加载矢量瓦片答案

【问题标题】：openlayers load vector tile from binaryopenlayers从二进制加载矢量瓦片
【发布时间】：2021-12-11 23:12:59
【问题描述】：

我想将二进制格式的矢量切片加载到 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);
              }
            });
        },
      })
    );

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

【问题讨论】：

一个tileLoadFunction对于MVT格式需要设置一个函数加载器，见openlayers.org/en/latest/apidoc/…中的例子
看看第二个例子，没有分配瓦片加载器。感兴趣的部分指向setFeatures，这对于这两种情况都是等效的，我不太确定如何从二进制 blob 中读取这些特征。
MVT 内部坐标是相对于瓦片的，需要瓦片在瓦片网格中的范围才能正确读取要素，如openlayers.org/en/latest/examples/drag-and-drop-custom-mvt.html
@BeatScherrer 你知道怎么做吗？我正在努力解决同样的问题。非常感谢！
我曾经并且可以在白天晚些时候发布答案。

标签： angular typescript openlayers

【解决方案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);
                  }
                });
            }
          );
        },
      })
    );

【讨论】：