OpenLayers: получить цвет пикселя от изображения слоя

У меня есть простая карта со статическим слоем пиксел изображения: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>

При нажатии на изображение, я хочу, чтобы получить цвет пикселя, что я нажал на. Насколько я понимаю пример источника растра (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 не определен.

Приложение: может быть несколько слоев изображения, накладывающихся друг на друга. Мне нужно получить цвет с одного определенного слоя изображения.

источник

2016-01-29 Michael Westwort

Так что это не является идеальным, но может отправить вас в правильном направлении:

Вы можете использовать пиксельный ху события щелчка, чтобы запросить объект холста, который 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 и что холст является первым DOM элемент с помощью класса «.ol-недоступного».

Надеюсь, это поможет.

источник

2016-01-29 14:27:58 DFox

Это работает, но мне нужен немного другой результат: мне нужен только цвет изображения (например, если прозрачный слой изображения прозрачен, цвет изображения с полной непрозрачностью должен быть возвращен). Я отредактировал свой код в открытии сообщения в соответствии с вашими предложениями, используя функцию .on для слоя. Однако функция, похоже, не называется. –

Кстати, использование функции .on с картой приводит к ошибке «операция небезопасна», как только изображение отображается в представлении (вероятно, из-за той же политики происхождения). Однако показ изображения работает. –

Незначительный комментарий, но альфа будет занимать позицию [3] в массиве not [4] – ManFox

OpenLayers: получить цвет пикселя от изображения слоя

ответ

Смежные вопросы