javascriptgisopenlayers

Howto Disable smooth image on OpenLayers 3

I'm trying to view an image on a map using OpenLayer, my image is a PNG that follows the SRID:4326. I setup an OpenLayers map and I set the projection information in order to re-project my image in OpenLayer SRID (3857).

Now..my problem is that OpenLayer shows my classified PNG with smoothed colors. I need to view the PNG without smoothed color render.

Actually my OpenLayers map shows this image enter image description here

but I need to view my image with no smoothed colors.

enter image description here

Any idea?

UPDATE: If I disable the smoothing option, following below answers, output image will be rendered without smoothing... but there are some pixels that are rendered with wrong color (with a lighter shader or with less opacity)

this is the output image:

enter image description here

but the output should be :

enter image description here

Solution

  • I know this is an old question now, but I've been wrestling this for a couple of hours and have finally made it work, so I thought others might find this helpful.

    Since OpenLayers 6.4.0, you can disable image smoothing for a source (code sample below is from this example on the OpenLayers website):

    var disabledLayer = new TileLayer({
  // specify className so forEachLayerAtPixel can distinguish layers
  className: 'ol-layer-dem',
  source: new XYZ({
    attributions: attributions,
    url:
      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
    maxZoom: 10,
    crossOrigin: '',
    imageSmoothing: false,
  }),
});

    Note: Make sure you set imageSmoothing: false on the source, not the layer! It won't cause any errors if you set it on the layer, but it just won't achieve anything ;)

    I've found that if I want the pixelation to work the way I expect it to, I need to set imageSmoothing: false on the source, then set maxZoom on the source to be less than what I've set as maxZoom on the layer and the view (e.g. maxZoom: 14 on the source, and maxZoom: 19 on the layer and the view). Then I get the nice solid blocky pixels I want, without any distortion or shading or incorrect values inside any pixels.

    Finally, make sure that the maxZoom setting on your layer is the same as the maxZoom setting on your view, or your user will be able to zoom in too far and your layer will disappear.