OpenLayers 3: карта OSM в оттенках серого

В новой версии OpenLayers (OL3) я обнаружил, что показывать плитки OpenStreetMap (OSM) в оттенках серого нетривиально.

Это может быть полезно, если вы не хотите, чтобы цвета фона мешали информации о цвете переднего плана.

Способ решения этой проблемы OpenLayers 2 больше не действует в OL3. Мое решение в основном основано на этом другом примере.

Решение

Часть 1: преобразование каждого пикселя в серый

Прокрутите все пиксели плитки, получите его RGB, вычислите яркость пикселя и установите его обратно как новый RGB:

// function applies greyscale to every pixel in canvas
function greyscale(context) {
var canvas = context.canvas;
 var width = canvas.width;
 var height = canvas.height;
var imageData = context.getImageData(0, 0, width, height);
 var data = imageData.data;
for(i=0; i<data.length; i += 4){
  var r = data[i];
  var g = data[i + 1];
  var b = data[i + 2];
  // CIE luminance for the RGB
  var v = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  // Show white color instead of black color while loading new tiles:
  if(v === 0.0)
   v=255.0;  
  data[i+0] = v; // Red
  data[i+1] = v; // Green
  data[i+2] = v; // Blue
  data[i+3] = 255; // Alpha
 }
context.putImageData(imageData,0,0);
 
}

Часть 2: свяжите эту функцию с событием «отложить»

var grayOsmLayer = new ol.layer.Tile({
 source: new ol.source.OSM()
});
grayOsmLayer.on('postcompose', function(event) {
 greyscale(event.context);
});

Обратная связь

Есть ли у вас какие-либо отзывы? Пожалуйста, оставьте комментарий или отправьте мне сообщение.

Если вы нашли эту статью полезной, пожалуйста не забудьте 👏🏻. Спасибо!! :)