在 OpenLayers 3 中关闭图像平滑答案

【问题标题】：Turn off image smoothing in OpenLayers 3在 OpenLayers 3 中关闭图像平滑
【发布时间】：2016-03-08 18:34:36
【问题描述】：

我意识到这可能是这个问题的重复问题：https://stackoverflow.com/questions/35582721/rendering-images-pixelated-with-openlayers-3。

但是，没有回复或 cmets。所以，我想我会在提供一些代码的同时问它。

我正在修改/更新显示各种天气相关元素（例如温度）的 PNG 图像的网页，以使用 OpenLayers 3 而不是 2，因为 OpenLayers 将允许我们使用其附加功能。我的客户需要放大和平滑时显示的实际像素。在 OpenLayers 2 中，我只需要添加图像渲染 CSS，即

.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) */
}

但是，如果我尝试在 .ol-viewport、.ol-unselectable、img 和 canvas 类/元素上执行相同的操作，则不会发生任何事情，并且在放大时图像仍然会变得平滑。

这就是我声明层的方式：

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

});

图层加载正常，但放大显示平滑/抗锯齿图像，我需要将其关闭。

【问题讨论】：

标签： javascript openlayers-3

【解决方案1】：

OpenLayers 3 默认使用画布渲染器。使用该渲染器，通过在合成地图图像之前将画布上下文的imageSmoothingEnabled 属性设置为false，很容易实现您想要的。下面的 sn-p 假设您的 map 变量包含您的 ol.Map 实例。

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

【讨论】：

成功了！有趣的是，在搜索了一天的答案然后发布了这个问题之后，我在图层而不是整个地图上使用“precompose”得到了几乎相同的答案。但我不确定这是否是最好的解决方案。为此在地图上使用“precompose”可能会更好。由于为外部客户关闭了抗锯齿的图像对于大量开发人员来说可能很重要，因此是否可以在 OL3 中将这样的东西添加为渲染器选项？它肯定会节省我一天的开发时间。
好吧，多亏了你的问题（和我的回答），它现在至少被记录了:-)。
在更新到 OL 4.2.0 后，此功能停止工作！它在 4.1.1 中工作
在 4.2.0 对我来说很好用。也许确保您使用的是 Canvas 而不是 WebGL 渲染器，即 evt.context 不是 null 并且是 CanvasRenderingContext2D。

【解决方案2】：

首先。谢谢你们的详细提问和回答。它在通过 openlayers 3 实现天气雷达数据的像素化视图的过程中帮助了我很多。我将添加一个小的奖励信息。

当我第一次添加 ahocevar 答案时，它不起作用。通过逐行浏览我的脚本，我发现如果在“ol.view”中使用了“ol.proj.transform”方法，则会忽略画布设置。

最初我的脚本包含以下地图视图定义：

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

当我将其更改为以下内容时，我实现了像素化视图：

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

所以，ahocevar 的答案对我来说也很完美，只是不能与“ol.proj.transform”一起使用。

【讨论】：