Question

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

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

我修改/更新显示各种天气相关元素（例如温度）的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

});

图层加载得很好，但放大会显示一个平滑/消除锯齿的图像，我需要将其关闭。

Answer 1

OpenLayers 3默认使用画布渲染器。使用该渲染器，通过在组合地图图像之前将画布上下文的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回答它没有用。通过逐行浏览我的脚本，我发现，如果在“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”一起使用。

在OpenLayers 3中关闭图像平滑

2 个答案: