我的目标是显示图像，并在鼠标光标的位置显示图像的值（例如RGB值）。因为该图像的分辨率较低，所以我想通过插值来显示它（这可行），并且我想显示插值的像素值（这不起作用）。
网上有一个非常相似的示例讨论插值：https://openlayers.org/en/latest/examples/interpolation.html。但是，当我用静态图像替换源时，显示的像素值不会被插值。他们离散地从一个区域走到下一个区域。
我可以在这里创建一个最小的工作示例，使用 npm start 在本地运行：
import './style.css';
import {Map, View} from 'ol';
import ImageLayer from 'ol/layer/Image';
import Static from 'ol/source/ImageStatic';
import { Projection } from 'ol/proj';
import {getCenter} from 'ol/extent.js';
// now make my maps
const extent = \[0,0,32,32\];
// start with a projection
// this tells us how to interpret coordinates
// if we have more than one projection, we can do reprojection
const projection = new Projection({
code: 'image',
units: 'pixels',
extent: extent,
});
// in a view we have another projection. We can use this to "reproject" if necessary
const view = new View({
center: getCenter(extent),
zoom: 2,
maxZoom: 8,
projection: projection,
});
// image source needs a projection to tell us how to interpet the layout
// it needs an image extent to tell us where to put it
const image_source = new Static({
crossOrigin: '',
url: 'image0.png',
projection: projection,
imageExtent: extent, // Extent of the image in map coordinates. This is the \[left, bottom, right, top\] map coordinates of your image.
interpolate: true,
});
// the image layer will have a source, it doesn't need anything else
const image_layer = new ImageLayer({
//extent: extent, // The bounding extent for layer rendering. The layer will not be rendered outside of this extent.
source: image_source
});
// has a target, a view, and layers
const map3 = new Map({
target: 'map3',
view: view,
layers: \[image_layer\],
});
// create a hover
const info1 = document.getElementById('info1');
const display = function (evt) {
if (evt.dragging) {
return;
}
const pixel = image_layer.getData(evt.pixel);
info1.innerText = pixel
? pixel
: '-';
};
map3.on('pointermove',display);
html 文件
<!DOCTYPE html>
Using OpenLayers with Vite
<div id="map3" style="position: absolute; top: 0; bottom: 50%; width: 50%;"></div>
<div style="position: absolute; top: 50%; bottom: 0%; width: 50%;">
<label>
Value
<span id="info1">-</span>
</label>
</div>
<script type="module" src="./main.js"></script>
image0.png 是本地 32x32 图片。
我希望显示的值与屏幕上显示的像素相匹配（如开放图层文档中的示例）。但相反，显示的值与未插值图像的像素值匹配。
您可以将图层放入
ol/source/Rasterconst image_layer = new ImageLayer({
source: new RasterSource({
sources: [
new ImageLayer({
source: image_source
}),
],
operationType: 'image',
operation: function (images) {
return images[0];
},
}),
});