是否有可能從鼠標上的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

我們不渲染圖層，下面的代碼就是我最終使用的。跳過正在操作高程源的柵格圖層。

如果對此進行改進，我會在tile緩存中添加一個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; 
    }); 
});