是否可以在鼠标悬停时从 ol.source.raster 获取像素值

Question

基于来自 ol3 的海高示例和 mapbox 全局地形，我们进行了类似的设置，将高程值放入瓦片中并使用 ol.source.raster

进行设置

            var elevation = new ol.source.TileImage({
                url: penetrationUrls[this.designator.toLowerCase()],
                projection: newProj,// "EPSG:27700", 
                crossOrigin: 'anonymous',
                tileGrid: tilegrid
            });
            var raster = new ol.source.Raster({
                sources: [elevation],
                operation: penetrates
            });

现在 -

1) 将鼠标悬停在查询像素值以显示高程工具提示时，有什么聪明的方法吗？ 2) 如果想查询线串之后的高度或其他东西，是否有一种聪明的方法来重用已加载的图块？

Answer 1

我们不渲染图层，下面的代码是我最终使用的。跳过了正在处理高程源的栅格图层。

如果对此进行改进，我会在瓦片缓存上添加一个 LRU 缓存，也许它可以挂接到 ols 瓦片缓存中。

            var elevation = new ol.source.TileImage({
                url: options.template,
                projection: elevationGridProjection,
                crossOrigin: 'anonymous',
                tileGrid: tilegrid
            });

            let tiles: { [key: string]: HTMLImageElement } = {};
            elevation.on("tileloadend", (e) => {
                let coord = e.tile.getTileCoord();
                tiles[coord.join('-')] = e.tile.getImage();

            });

            this.map.on('pointermove', (evt) => {
                // When user was dragging map, then coordinates didn't change and there's
                // no need to continue
                if (evt.dragging) {
                    return;
                }



                let coordinate = ol.proj.transform(evt.coordinate, this.map.getView().getProjection(), elevationGridProjection);

                let tileCoord = tilegrid.getTileCoordForCoordAndResolution(coordinate, this.map.getView().getResolution());
                let key = tileCoord.join('-');
                if (key in tiles) {

                    let origin = tilegrid.getOrigin(tileCoord[0]);
                    let res = tilegrid.getResolution(tileCoord[0]);
                    let tileSize = tilegrid.getTileSize(tileCoord[0]);
                    let w = Math.floor(((coordinate[0] - origin[0]) / res) % (tileSize[0] | tileSize as number));
                    let h = Math.floor(((origin[1] - coordinate[1]) / res) % (tileSize[1] | tileSize as number));

                    var canvas = document.createElement("canvas");
                    canvas.width = tiles[key].width;
                    canvas.height = tiles[key].height;

                    // Copy the image contents to the canvas
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(tiles[key], 0, 0);

                    let img = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    let imgData = img.data;
                    let index = (w + h * 256) * 4;
                    let pixel = [imgData[index + 0], imgData[index + 1], imgData[index + 2], imgData[index + 3]];
                    let height = (-10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.01))

                    console.log(`HEIGHT: ${height}, ${w},${h},${img.width}, ${img.height},${img.data.length} ,${index}, [${pixel.join(',')}]`);

                }

            });

Answer 2

如果您还将光栅源中的内容渲染为图层，则有一种获取像素数据的更简单方法 - 使用 Map#forEachLayerAtPixel。像这样：

map.on('pointermove', function(evt) {
  map.forEachLayerAtPixel(evt.pixel, function(layer, pixel) {
    let height = (-10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.01));
    console.log(height);
  }, undefined, function(layer) {
    return layer.getSource() == raster;
  });
});

是否可以在鼠标悬停时从 ol.source.raster 获取像素值

Is it possible to get pixel values from ol.source.raster on mouse over

openlayers-3