CODEWITHSUNDEEP
imagepnggisopenlayerstiles
Sam
Sam

Reputation: 25

Get rgb value data from TileLayer onHover (openlayers)

Goal: visualize large .asc data (2d array data) on the client. More specifically, the user should be able to apply different color-maps and also hover on the point to see its value (at least a good enough approximation).

I have been struggling so much with this seemingly simple problem. I have been going back and forth with different methods, each one having its own issue (load time, resources, ..).

The method that "seems" to be the right approach is to generate tiles (a folder structure with a bunch of small .png images). Did that with gdal tools. In order to store information about the numerical data, I created a .tif image in gray, where min=>0 and max=>255. So far so good. The following code allows me visualize the data smoothly:

const rasterLayer = new TileLayer({
  source: new XYZ({
    url: "http://localhost:8000/{z}/{x}/{-y}.png"

  }),

});

const osmLayer = new TileLayer({
  source: new OSM(),
});

const map = new Map({
  target: mapDiv!,
  layers: [osmLayer, rasterLayer],
  
  view: new View({
    center: fromLonLat([5, 56]), // Adjust based on your data's centerA
    zoom: 6, // Initial zoom level
  }),
});

Now, all I want to do is: when hovering over the rasterLayer, extract the RGB data on that point. That's all I'm asking for. How hard can that be really? Because I dont find any freaking example doing that anywhere on the **** internet. Please help.

For example:

    map.on('pointermove', (event) => {
      console.log(rasterLayer.getData(event.pixel));
      console.log(osmLayer.getData(event.pixel));


});

works for the osmLayer, but not the rasterLayer. Why!

Upvotes: 0

Views: 57

Answers (0)

Related Questions