OpenLayers：从图像层获取像素颜色答案

【问题标题】：OpenLayers: get pixel color from image layerOpenLayers：从图像层获取像素颜色
【发布时间】：2018-01-25 02:02:35
【问题描述】：

我有一个带有静态像素图像层的简单地图：

<!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/en/v3.13.0/examples/raster.html)，这仅适用于光栅源，因此我将图像转换为光栅源。（当我将该栅格源添加到图层时，我收到此操作不安全的消息，因此我仍然使用图像在地图上显示。）

这里 (How to get a pixel's color value from an Openlayers 3 layer?) 颜色是从 evt.context 读取的。但是，对我来说 evt.context 是未定义的。

附录：可能有多个图像层相互重叠。我需要从单个特定图像层获取颜色。

【问题讨论】：

标签： openlayers-3

【解决方案1】：

所以这并不理想，但可能会让你走上正确的道路：

您可以使用点击事件的像素 xy 来查询 openlayers 创建的画布对象并将您的地图数据放置到其中。

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 元素。

希望对您有所帮助。

【讨论】：

这行得通，但我需要一个稍微不同的结果：我只需要图像的颜色（例如，如果图像层是透明的，则应返回具有完全不透明度的图像的颜色）。我根据您的建议在开篇文章中编辑了我的代码，并为图层添加了 .on 函数。但是，该函数似乎没有被调用。
顺便说一句，只要图像显示在视图中（可能是因为相同的来源策略），对地图使用 .on 函数就会引发“操作不安全”错误。但是，显示图像是可行的。
次要评论，但 alpha 将是数组中的位置 [3] 而不是 [4]
作为一种解决方法，以下方法对我来说效果很好：检查单击的像素是否位于图层范围内。如果是这样，将图层的不透明度更改为 1，将图层提升到前面（使用其 z-index），应用 DFox 的解决方案，将不透明度和 z-index 设置回其原始值。但是，这样做必须满足同源策略，例如通过从同一服务器访问所有文件。