Openlayers 3 OpenLayers：从图像层获取像素颜色_Openlayers 3

Openlayers 3 OpenLayers：从图像层获取像素颜色

openlayers-3

Openlayers 3 OpenLayers：从图像层获取像素颜色,openlayers-3,Openlayers 3,我有一张带有静态像素图像层的简单地图： <!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

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

<!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>


简单地图
//这里对jquery的引用
风险值范围=[0,0,2000000,2000000]；
var投影=新的ol.proj.projection({
代码：“xkcd图像”，
单位：'像素'，
范围：范围
});
var map=新ol.map({
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
目标：“地图”，
视图：新ol.view({
中间：[0,0]，
缩放：2
})
});
image=新的ol.layer.image({
来源：new ol.source.ImageStatic({
网址：'http://imgs.xkcd.com/comics/online_communities.png',
投影：投影，
imageExtent：范围
})
});
map.addLayer（图像）；
image.on（'singleclick'，函数（evt）{
var xy=evt.pixel；
控制台日志（xy）；
var canvasContext=$（'.ol不可选择'）[0].getContext（'2d'）；
var pixelAtClick=canvasContext.getImageData（xy[0]，xy[1]，1,1）.data；
var red=pixelAtClick[0]；//绿色为[1]，蓝色为[2]，alpha为[4]
});

当点击图像时，我想得到我点击的像素的颜色。就我对光栅源示例（）的理解而言，这仅适用于光栅源，因此我将图像转换为光栅源。（当我将该光栅源添加到图层时，我会收到这样一条信息：该操作不安全，因此我仍然使用该图像在地图上显示。）

这里（）从evt.context读取颜色。但是，对于我来说，evt.context是未定义的

补充：可能有几个图像层相互重叠。我需要从一个特定的图像层获取颜色。

因此这并不理想，但可能会给您带来正确的结果：

您可以使用单击事件的像素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索引），应用DFox的解决方案，将不透明度和z索引设置回其原始值。但是，执行此操作时必须遵守同源策略，例如从同一服务器访问所有文件。