I'm attempting to load a vector tile in binary format into OpenLayers but I'm facing challenges with the tileLoadFunction. I'm struggling to manually set the data to the tile. The reason why I need to use the tileLoadFunction is because I have to pass an API key to authenticate with the tile server. This is the current code snippet I have:
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);
}
});
},
})
);
I've looked for similar examples but haven't found any that guide me in the right direction.