Openlayers 3 可以用鼠标从ol.source.raster获取像素值吗
基于ol3和mapbox global terrain中的海平面高度,我们进行了类似的设置,将高程值放入平铺中,并使用ol.source.raster进行设置Openlayers 3 可以用鼠标从ol.source.raster获取像素值吗,openlayers-3,Openlayers 3,基于ol3和mapbox global terrain中的海平面高度,我们进行了类似的设置,将高程值放入平铺中,并使用ol.source.raster进行设置 var elevation = new ol.source.TileImage({ url: penetrationUrls[this.designator.toLowerCase()], projection: newProj,// "EPSG:27
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) 如果想要查询线串或其他东西后面的高度,是否有一种聪明的方法可以重用已加载的平铺?我们不渲染层,下面的代码就是我最终使用的代码。跳过了正在操作高程源的光栅图层 如果对此有所改进,我会在平铺缓存上添加一个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(',')}]`);
}
});
我们不渲染层,下面的代码就是我最终使用的代码。跳过了正在操作高程源的光栅图层 如果对此有所改进,我会在平铺缓存上添加一个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(',')}]`);
}
});
如果还将光栅源中的内容渲染为图层,则有一种更容易获取像素数据的方法-使用
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;
});
});
如果还将光栅源中的内容渲染为图层,则有一种更容易获取像素数据的方法-使用
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;
});
});
谢谢:)我不知道像素。我想我们可以把立面图层添加到地图上并隐藏起来。我用一种更详细的解决方案更新了我的答案,这种解决方案允许更多的自由,但可能会改用这种方法。当你不使用该源渲染层时,这种方法不起作用,并且该层也可能不会被隐藏。这也是我理解你答案的原因——我最终使用了作为答案发布的示例。考虑把它打包成可重复使用的东西。谢谢:)我不知道像素。我想我们可以把立面图层添加到地图上并隐藏起来。我用一种更详细的解决方案更新了我的答案,这种解决方案允许更多的自由,但可能会改用这种方法。当你不使用该源渲染层时,这种方法不起作用,并且该层也可能不会被隐藏。这也是我理解你答案的原因——我最终使用了作为答案发布的示例。考虑把它打包成可重用的东西。