OpenLayers:从图像层获取像素颜色 [英] OpenLayers: get pixel color from image layer
问题描述
我有一个带有静态像素图像层的简单地图:
I have a simple map with a static pixel image layer:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
// reference to jquery here
</head>
<body>
<div id="map" class="map"></div>
<script>
var extent = [0, 0, 2000000, 2000000];
var projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: extent
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
image = new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://imgs.xkcd.com/comics/online_communities.png',
projection: projection,
imageExtent: extent
})
});
map.addLayer(image);
image.on('singleclick', function(evt) {
var xy = evt.pixel;
console.log(xy);
var canvasContext = $('.ol-unselectable')[0].getContext('2d');
var pixelAtClick = canvasContext.getImageData(xy[0], xy[1], 1, 1).data;
var red = pixelAtClick[0]; // green is [1] , blue is [2] , alpha is [4]
});
</script>
</body>
</html>
单击图像时，我想获得单击的像素的颜色.据我了解的栅格源示例( http://openlayers.org/zh_cn/v3.13.0/examples/raster.html )，这仅适用于栅格源，因此我将图像转换为栅格源. (当我将该栅格源添加到图层时，会收到此操作不安全的消息，因此我仍然使用该图像在地图上显示.)
When clicking on the image I want to get the color of the pixel that I clicked on. As far as I understand the raster source example (http://openlayers.org/en/v3.13.0/examples/raster.html), this is only possible with raster sources so I converted the image into a raster source. (When I add that raster source to the layer, I get the message that this operation is insecure, so I still use the image to show on the map.)
此处(如何获取从Openlayers 3图层获取像素的颜色值?)是从evt.context中读取颜色.但是，evt.context是不确定的.
Here (How to get a pixel's color value from an Openlayers 3 layer?) the color is read from evt.context. However, with me evt.context is undefined.
附录:可能会有多个相互重叠的图像层.我需要从单个特定的图像层获取颜色.
Addendum: There might be several image layers overlaying each other. I need to get the color from a single specific image layer.
推荐答案
所以这不是理想的选择，但可能会按照正确的路线发送给您:
So this isn't ideal but might send you along the right lines:
您可以使用click事件的像素xy来查询openlayers创建的画布对象并将其放置在地图数据上.
You can use the pixel xy of the click event to query the canvas object that openlayers creates and puts your map data onto.
map.on('singleclick', function(evt) {
var xy = evt.pixel;
var canvasContext = $('.ol-unselectable')[0].getContext('2d');
var pixelAtClick = canvasContext.getImageData(xy[0], xy[1], 1, 1).data;
var red = pixeAtClick[0]; // green is [1] , blue is [2] , alpha is [4]
});
这假设您使用的是jQuery，并且画布是使用".ol-unselectable"类的第一个DOM元素.
This assumes that you are using jQuery and that the canvas is the first DOM element using the class '.ol-unselectable'.
希望它会有所帮助.
这篇关于OpenLayers:从图像层获取像素颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
