OpenLayers vector tile rendering problem on .NET Core 2.2

Question

I working on OpenLayers vector tile. I am using PostGIS ST_AsMvt function for render my geom data.

I sending query like this to PostgreSQL in my .NET Core server

SELECT ST_AsMVT(mvt, 'geom', 4096, 'geom')
 FROM (
 SELECT
 I.gid,
 I.fid,
 ST_AsMVTGeom(
 I.geom,
 st_makeenvelope(minX, minY,maxX , maxY),
 4096,
 256,
 false
 ) as geom
 FROM public."GeomTable" I
 WHERE I.geom && st_makeenvelope(minX, minY,maxX , maxY)
 AND ST_Intersects(I.geom,st_makeenvelope(minX, minY,maxX , maxY))) mvt;

and just returning as response byte array data. But getting type error while OpenLayers parse this data to PBF.

Uncaught Error: Unimplemented type: 7 at Pbf.skip
Uncaught Error: Unimplemented type: 4 at Pbf.skip
Uncaught Error: Unimplemented type: 3 at Pbf.skip

My VectorTileLayer object;

var mvtVectorLayer = new VectorTileLayer({
 declutter: false,
 source: new VectorTileSource({
 format: new MVT(),
 url: "https://localhost:5001/{z}/{x}/{y}"
 }),
 style: new Style({
 stroke: new Stroke({
 color: "red",
 width: 1
 })
 })
 });

So I am so confused about solution . I have done a lot of research but I don't get any solution.

Example data from DB

GvIMChNpbnRlcm5hbC1sYXllci1uYW1lEh0SAgAAGAMiFQmMC4oeOhQAADgqAAA2EwAAGykADxIVEgIAARgDIg0JjAv4HhoUAAAcEwAPEhUSAgACGAMiDQm2C5QfGhQAADQTAA8SKRICAAMYAyIhCfYQ9iFqPgAAHBQAABoWAAA4FAAAHBQAAFA9AAAbUQAPElsSAgAEGAMiUwmsNNAjqgIAGxMAADMTAAAbFAAAGykAADUpAABtEQAANSkAAFE8AAAcKgAANhYAABwUAAAaFAAAGkAAABwSAAA4FgAANhQAAIgBOwAAHBUAABsPEosBEgIABRgDIoIBCZg0tCPqAwAcFAAAHBMAABopAAAZKQAAGxEAAFIVAAAcEwAAHH0AABsTAAAbEwAAGxMAADUVAAA3EwAATxUAADUTAAA3FQAATxYAABsqAAAcFAAANBYAABk8AAAaFgAAGRQAADYqAABSFAAAHBYAABwqAAA0EgAAFxYAABgqAAAcDxJWEgIABhgDIk4JiAzkIpoCaAAAHBQAABgWAAAcKgAAHBIAABwqAAAaFgAAHBQAAGw9AAAZJwAAGRUAABspAAAbKQAAGycAABkVAAAbEwAAGxMAABsUAA8S5wESAgAHGAMi3gEJjAu0I9oGVAAAHBQAABwUAAAaFAAAHCoAABwUAAAcKgAAGhYAABoUAAAcKAAAHBYAABwqAAAaKAAAHBYAABwUAABQKAAAHCoAABwqAAAaKgAAHBYAABwUAAAcFAAAGioAABwoAAAaFgAAUhUAABwTAAAcPQAAGz0AABspAAAbKQAAGSkAABsRAAAZFQAAGykAABkTAAAbEwAAGxUAABspAAAZJwAAGxMAABsVAAAZEwAAGRUAADcnAAAbFQAAGScAABsTAAAbFQAAGykAABkpAAAZEwAAbRQAABsWAA8STBICAAgYAyJECZIamCbqAWYAABwqAAAcFgAANBQAABwWAABuFAAAogGRAQAANRMAABkTAAAbFQAAGRMAAFMTAABrFQAAGRYAABsUAA8SPhICAAkYAyI2CYIZoCe6ARQAABwoAAAaFgAAHBQAADgWAABsKQAAGj0AABkTAAAbKQAANRUAAG0WAAAZKgAPEt0BEgIAChgDItQBCfYm7COqBnwAABoqAAA4FAAANhQAADYWAAAcFAAAHBYAADYUAAAcFAAAHBQAADQWAAA4FAAAGhYAADgUAAAcFgAAGhQAABwUAAAaFAAANhYAADgUAAA2FAAAHCoAABwWAAAaFAAAigETAAAaFQAAHKMBAAAbFQAAGRMAABsVAABREwAAGxUAABkTAAA3EwAANRMAADcpAAA1FQAANRMAADUTAAA3FQAANRMAADUTAAA1EwAAGxUAABsTAAAZFQAANxMAABsVAAAZFgAANRUAADcWAA8SjwESAgALGAMihgEJ

I am getting byte array data from db but when i return it as response , browser automatically convert to base64 string.

• Dawid Rutkowski: Can you show how the data from the DB looks like on the frontend?
• khayyam: @DawidRutkowski I updated my answer

Answer 1

SOLUTION

I was responding to the browser as bytes

return (byte[]datas);

so i change response type to File and works fine

return File(datas, "application/vnd.mapbox-vector-tile");