在 OpenLayers 3 中关闭图像平滑

Question

我意识到这可能是这个问题的重复问题：。

但是，没有任何回复或评论。所以，我想我也会在提供位代码的同时询问它。

我是 modifying/updating 一个显示各种与天气相关的元素（例如温度）的 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 classes/elements 上做同样的事情，没有任何反应，图像仍然平滑放大。

这就是我声明图层的方式：

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

});

图层加载正常，但放大后会显示 smoothed/anti-aliased 图像，我需要将其关闭。

Answer 1

OpenLayers 3 默认使用 canvas 渲染器。使用该渲染器，通过在合成地图图像之前将 canvas 上下文的 imageSmoothingEnabled 属性设置为 false ，可以轻松实现您想要的效果。下面的代码片段假定您的 map 变量包含您的 ol.Map 实例。

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

Answer 2

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

当我第一次添加 ahocevar answer 时，它不起作用。通过逐行查看我的脚本，我发现如果在“ol.view”中使用方法“ol.proj.transform”，那么 canvas 设置将被忽略。

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

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”一起使用。

在 OpenLayers 3 中关闭图像平滑

Turn off image smoothing in OpenLayers 3

javascript

openlayers-3