小编tek*_*tor的帖子

我意识到这可能是一个重复的问题: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

});

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