Получить пиксельный цвет из слоя OpenLayers 2 WMS

Question

Мне нужно получить цвет пикселя из слоя изображения, добавленного в OSM.

var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    x=e.x;
    y=e.y;  useCanvas(canvas,img,function(){
// get image data
var p = canvas.getContext('2d')
.getImageData(x, y, 1, 1).data;
 var coord = '<span>HEX: #'+rgbToHex(p[0],p[1],p[2])+'</span>'+
 '<span>  RGB:  rgb('+
  p[0]+','+
  p[1]+','+
  p[2]+')</span>';
 $('#status').html(coord);

Answer 1

layer.getTileData(point) даст вам изображение и положение на изображении для любых координат карты.data.tile.getCanvasContext() дает вам контекст холста для изображения.Он должен работать с любым растровым слоем, отдельным изображением или мозаичной сеткой.Указание tileOptions: { crossOriginKeyword: 'anonymous' } необходимо, если вы хотите получить доступ к данным пикселей.

//
    function rgbToHex(rgb){
        return (rgb && rgb.length === 4) ? "#" +
            ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
            ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
    }

    var map, layer;
    function init(){
        map = new OpenLayers.Map('map', { projection: 'EPSG:4326' });
        layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                'https://neo.sci.gsfc.nasa.gov/wms/wms',
                { layers: 'BlueMarbleNG' },
                { tileOptions: { crossOriginKeyword: 'anonymous' } }
        );
        map.addLayer(layer);
        map.zoomToMaxExtent();

        map.events.register("mousemove", map, function(e){
            document.getElementById("docs").innerHTML = '';
            var point = map.getLonLatFromViewPortPx(e.xy);
            var data = layer.getTileData(point);
            if (data) {
                var ctx = data.tile.getCanvasContext();
                if (ctx) {
                    var x = data.i;
                    var y = data.j;
                    // get image data
                    var p = ctx.getImageData(x, y, 1, 1).data;
                    document.getElementById("docs").innerHTML = '<span>   HEX: '+ rgbToHex(p)+'</span>' +
                        '<span>   RGB: rgb(' + p[0] + ',' + p[1] + ',' + p[2] + ')</span>';
                }
            }
        });

    }
    init();

html, body { height: 100%; margin: 0;}
#map { height: 80%; margin: 0;}