javascript - Turn off image smoothing in OpenLayers 3 - Stack Overflow

I realize this is probably a duplicate question of this one: .

However, there hasn't been a response or ments. So, thought I'd ask it as well while providing a bit code.

I'm modifying/updating a web page that displays PNG images of various weather-related elements (e.g. temperature) to use OpenLayers 3 instead of 2 as OpenLayers will allow us to use its additional features. My customer needs the actual pixels displayed upon zooming in versus smoothed. In OpenLayers 2, I just needed to add the image-rendering CSS, i.e.

.olTileImage {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

However, if I attempt to do the same thing on the .ol-viewport, .ol-unselectable, img, and canvas classes/elements, nothing happens and the image is still smoothed when zooming in.

This is how I'm declaring the layer:

fcstoverlay = new ol.layer.Image({
    type: 'overlay',
    opacity: 0.5,
    title: 'Forecast',
    name: 'imgforecast',

    source: new ol.source.ImageStatic({
        url: "images/ndfd/conus/mercator/maxt_2016020200.png",
        imageSize: [3328, 2048],
        imageExtent: [-15028131.257, 1878516.407,-6887893.493, 6887893.493],
        projection: ovProj

    }),
    visible: true

});

The layer loads just fine, but zooming in displays a smoothed/anti-aliased image which I need to be turned off.

I realize this is probably a duplicate question of this one: https://stackoverflow./questions/35582721/rendering-images-pixelated-with-openlayers-3.

However, there hasn't been a response or ments. So, thought I'd ask it as well while providing a bit code.

I'm modifying/updating a web page that displays PNG images of various weather-related elements (e.g. temperature) to use OpenLayers 3 instead of 2 as OpenLayers will allow us to use its additional features. My customer needs the actual pixels displayed upon zooming in versus smoothed. In OpenLayers 2, I just needed to add the image-rendering CSS, i.e.

.olTileImage {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

However, if I attempt to do the same thing on the .ol-viewport, .ol-unselectable, img, and canvas classes/elements, nothing happens and the image is still smoothed when zooming in.

This is how I'm declaring the layer:

fcstoverlay = new ol.layer.Image({
    type: 'overlay',
    opacity: 0.5,
    title: 'Forecast',
    name: 'imgforecast',

    source: new ol.source.ImageStatic({
        url: "images/ndfd/conus/mercator/maxt_2016020200.png",
        imageSize: [3328, 2048],
        imageExtent: [-15028131.257, 1878516.407,-6887893.493, 6887893.493],
        projection: ovProj

    }),
    visible: true

});

The layer loads just fine, but zooming in displays a smoothed/anti-aliased image which I need to be turned off.

• javascript
• openlayers-3

Share Improve this question Follow edited May 23, 2017 at 11:48 CommunityBot 111 silver badge asked Mar 8, 2016 at 18:34 teknocreatorteknocreator 23822 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

OpenLayers 3 uses a canvas renderer by default. With that renderer, it is easy to achieve what you want, by setting the imageSmoothingEnabled property of the canvas context to false before the map image is posed. The snippet below assumes that your map variable holds your ol.Map instance.

map.on('prepose', function(evt) {
  evt.context.imageSmoothingEnabled = false;
  evt.context.webkitImageSmoothingEnabled = false;
  evt.context.mozImageSmoothingEnabled = false;
  evt.context.msImageSmoothingEnabled = false;
});

First of all. Thank you both for your detailed question and answer. It helped me a lot in the process to achieve a pixelated view of weather radar data via openlayers 3. I will just add a small bonus information.

When I first added ahocevar answer it did not work. By going through my script line by line I figured out, that the canvas settings is ignored if the method “ol.proj.transform” is used in “ol.view”.

Originally my script included the following map view definition:

view: new ol.View({
    center: ol.proj.transform(CenterCoordinates, 'EPSG:32632', 'EPSG:3857'),
    zoom: ZoomLevel
    })

When I changed it to the following I achieve a pixelated view:

view: new ol.View({
    projection: 'EPSG:32632',
    center: CenterCoordinates,
    zoom: ZoomLevel
    })

So, the answer from ahocevar works perfect for me as well, just not together with “ol.proj.transform”.