Suppose I have a large .asc file (matrix representing elevation, water depth, ….), in my backend and want to visualize it on the client (with openlayers). The requirements are:
- Smooth rendering
- User can change colormap.
- User can set thresholds for which values outside that range turn transparent.
- Full detail with enough zoom level.
- Point hover
My first and approach was to create an endpoint that receives the parameters mentioned above, render the image, and send to the client. The client would then create a static image layer. The problem with this is that it is pretty slow (especially since I want to this with many images).
After not finding openlayers examples that could help me, chatgpt joined the room. I got recommended to use gdal and to create a directory with tiles and an endpoint that takes in z, x, y and returns small .png images. From the client side, use a TileLayer with a XYZ source. This solved nr 1 and nr 4, but the .png files were having a fixed color so nr 2 remains a problem.
Now, I’m thinking that what might be the best solution is to create a custom tile map, where I store mini arrays (instead of png files), indexed by z, x, y (z is zoom btw), and then create and endpoint that takes in z,x,y and return the mini array, and then the client maps that array to colors and create an image on the spot.
As you see, this is not my field. Please guide me. I need do this not for just one image, but for many (timeseries of large .asc files…).
Am I going in the right direction?
In case it is relevant, the api is written in .NET.
2