ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Get pixel data

Browse Source
This commit is contained in:
Tim Schaub
2022-02-06 16:46:01 -07:00
parent cd45663996
commit eb4d5e0784
23 changed files with 721 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/cog-math.html
View File

@@ -3,9 +3,12 @@ layout: example.html
title: NDVI from a Sentinel 2 COG
shortdesc: Calculating NDVI and applying a custom color map.
docs: >
The GeoTIFF layer in this example draws from two Sentinel 2 sources: a red band and a near infrared band.
The GeoTIFF layer in this example draws from two Sentinel 2 sources: a red band and a near-infrared band.
The layer style includes a `color` expression that calculates the Normalized Difference Vegetation Index (NDVI)
from values in the two bands. The `interpolate` expression is used to map NDVI values to colors.
The `layer.getData()` method can be used to retrieve pixel values from the GeoTIFF. Move your mouse
or tap on the map to see calculated NDVI values based on the red and near-infrared pixel values.
tags: "cog, ndvi"
---
<div id="map" class="map"></div>
<div>NDVI: <span id="output"></span></div>

125
examples/cog-math.js
View File

@@ -17,65 +17,74 @@ const source = new GeoTIFF({
],
});
const layer = new TileLayer({
style: {
color: [
'interpolate',
['linear'],
// calculate NDVI, bands come from the sources below
['/', ['-', ['band', 2], ['band', 1]], ['+', ['band', 2], ['band', 1]]],
// color ramp for NDVI values, ranging from -1 to 1
-0.2,
[191, 191, 191],
-0.1,
[219, 219, 219],
0,
[255, 255, 224],
0.025,
[255, 250, 204],
0.05,
[237, 232, 181],
0.075,
[222, 217, 156],
0.1,
[204, 199, 130],
0.125,
[189, 184, 107],
0.15,
[176, 194, 97],
0.175,
[163, 204, 89],
0.2,
[145, 191, 82],
0.25,
[128, 179, 71],
0.3,
[112, 163, 64],
0.35,
[97, 150, 54],
0.4,
[79, 138, 46],
0.45,
[64, 125, 36],
0.5,
[48, 110, 28],
0.55,
[33, 97, 18],
0.6,
[15, 84, 10],
0.65,
[0, 69, 0],
],
},
source: source,
});
const map = new Map({
target: 'map',
layers: [
new TileLayer({
style: {
color: [
'interpolate',
['linear'],
// calculate NDVI, bands come from the sources below
[
'/',
['-', ['band', 2], ['band', 1]],
['+', ['band', 2], ['band', 1]],
],
// color ramp for NDVI values, ranging from -1 to 1
-0.2,
[191, 191, 191],
-0.1,
[219, 219, 219],
0,
[255, 255, 224],
0.025,
[255, 250, 204],
0.05,
[237, 232, 181],
0.075,
[222, 217, 156],
0.1,
[204, 199, 130],
0.125,
[189, 184, 107],
0.15,
[176, 194, 97],
0.175,
[163, 204, 89],
0.2,
[145, 191, 82],
0.25,
[128, 179, 71],
0.3,
[112, 163, 64],
0.35,
[97, 150, 54],
0.4,
[79, 138, 46],
0.45,
[64, 125, 36],
0.5,
[48, 110, 28],
0.55,
[33, 97, 18],
0.6,
[15, 84, 10],
0.65,
[0, 69, 0],
],
},
source: source,
}),
],
layers: [layer],
view: source.getView(),
});
const output = document.getElementById('output');
function displayPixelValue(event) {
const data = layer.getData(event.pixel);
if (!data) {
return;
}
const red = data[0];
const nir = data[1];
const ndvi = (nir - red) / (nir + red);
output.textContent = ndvi.toFixed(2);
}
map.on(['pointermove', 'click'], displayPixelValue);

4
examples/getfeatureinfo-image.html
View File

@@ -3,8 +3,8 @@ layout: example.html
title: WMS GetFeatureInfo (Image Layer)
shortdesc: Using an image WMS source with GetFeatureInfo requests
docs: >
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
tags: "getfeatureinfo, forEachLayerAtPixel"
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer. Additionally `layer.getData(pixel)` is used to change the mouse pointer when hovering a non-transparent pixel on the map.
tags: "getfeatureinfo, getData"
---
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

6
examples/getfeatureinfo-image.js
View File

@@ -47,9 +47,7 @@ map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
const hit = map.forEachLayerAtPixel(pixel, function () {
return true;
});
const data = wmsLayer.getData(evt.pixel);
const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

4
examples/getfeatureinfo-tile.html
View File

@@ -3,8 +3,8 @@ layout: example.html
title: WMS GetFeatureInfo (Tile Layer)
shortdesc: Issuing GetFeatureInfo requests with a WMS tiled source
docs: >
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.
tags: "getfeatureinfo, forEachLayerAtPixel"
This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer. Additionally `layer.getData(pixel)` is used to change the mouse pointer when hovering a non-transparent pixel on the map.
tags: "getfeatureinfo, getData"
---
<div id="map" class="map"></div>
<div id="info">&nbsp;</div>

6
examples/getfeatureinfo-tile.js
View File

@@ -47,9 +47,7 @@ map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
const pixel = map.getEventPixel(evt.originalEvent);
const hit = map.forEachLayerAtPixel(pixel, function () {
return true;
});
const data = wmsLayer.getData(evt.pixel);
const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});