OpenLayers: get only areas with specific color

by User2010   Last Updated January 13, 2018 23:22 PM

Using some resources from Raster Source Example, OpenLayers: get pixel color from image layer

I can get now the pixel value for any point in an image on my map.

What I need to do is to get just the areas with a specific color from an image when the pixel values are defined by the user (certain resolution) or just shown parts of my layer which contains some colors.

<div id="color_define">
        <button onclick="summarize()">color</button>
        <input type="text" name="message" id="message" value="Pixel Value">
      </div>

function vgi(pixel) {
          var r = pixel[0];
          var g = pixel[1];
          var b = pixel[2];
          return (2 * g - r - b) / (2 * g + r + b);
        }

  function summarize(value, counts) {
    var min = counts.min;
    var max = counts.max;
    var num = counts.values.length;
    if (value < min) {
      // do nothing
    } else if (value >= max) {
      counts.values[num - 1] += 1;
    } else {
      var index = Math.floor((value - min) / counts.delta);
      counts.values[index] += 1;
    }
  }

  var raster = new ol.layer.Tile({
    source: new ol.source.XYZ({
      wrapX: false,
       // opacity: 1.0,
      url: '43/{z}/{x}/{-y}.png'
    }),
    /**
     * Run calculations on pixel data.
     * @param {Array} pixels List of pixels (one per source).
     * @param {Object} data User data object.
     * @return {Array} The output pixel.
     */
    operation: function(pixels, data) {
      var pixel = pixels[0];
      var value = vgi(pixel);
      summarize(value, data.counts);
      if (value >= data.threshold) {
        pixel[0] = 0;
        pixel[1] = 255;
        pixel[2] = 0;
        pixel[3] = 128;
      } else {
        pixel[3] = 0;
      }
      return pixel;
    },
    lib: {
      vgi: vgi,
      summarize: summarize
    }
  });
  raster.set('threshold', 0.1);

  function createCounts(min, max, num) {
    var values = new Array(num);
    for (var i = 0; i < num; ++i) {
      values[i] = 0;
    }
    return {
      min: min,
      max: max,
      values: values,
      delta: (max - min) / num
    };
  }

  raster.on('beforeoperations', function(event) {
          event.data.counts = createCounts(minVgi, maxVgi, bins);
          event.data.threshold = raster.get('threshold');
        });

        raster.on('afteroperations', function(event) {
          schedulePlot(event.resolution, event.data.counts, event.data.threshold);
        });

  function message(value, area) {
          var acres = (area / 4046.86).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
          return acres + ' acres at<br>' + value.toFixed(2) + ' VGI or above';
          document.getElementById("value")

I am a beginner in programming.



Related Questions





Open Layers 3: Distance in pixels

Updated June 15, 2017 10:22 AM

How to give weight values to polygons?

Updated September 15, 2017 11:22 AM