开放图层:从图像图层获取像素颜色

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

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

在这里（如何从Openlayers 3层获取像素的颜色值？）颜色是从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元素。

希望对您有所帮助。

相关内容

最新更新

热门标签：