在OpenLayers中关闭图像平滑3

我意识到这可能是这一个的重复问题：https://stackoverflow.com/questions/35582721/rendering-images-pixelated-with-openlayers-3。在OpenLayers中关闭图像平滑3

但是，尚未有任何回应或评论。所以，当我提供一些代码的时候，我会问这个问题。

我正在修改/更新显示各种天气相关元素（例如温度）的PNG图像的网页，使用OpenLayers 3而不是2，因为OpenLayers将允许我们使用其附加功能。我的客户需要放大时显示的实际像素与平滑。在2的OpenLayers，我只需要添加图像渲染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视口，.ol，不可选择，IMG和帆布类同样的事情/元素，没有任何反应，图像仍然在平滑缩放时

这是我怎样，我宣布层：

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 

});

层负载得很好，但在显示器平滑/反缩放 - 我需要关闭的图像。

来源

2016-03-08 teknocreator

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; 
});

来源

2016-03-08 20:16:48 ahocevar

工作！有趣的是，在搜索答案然后张贴这个问题的一天之后，我在图层上使用“precompose”而不是整个地图得到几乎相同的答案。但我不确定这是否是最好的解决方案。在地图上使用'precompose'可能会更好。由于为外部客户关闭消除锯齿的图像对许多开发人员来说可能很重要，因此可以在OL3中添加类似这样的渲染选项吗？它肯定会节省我的开发时间。 – teknocreator

恩，谢谢你的问题（和我的回答），现在至少记录下:-)。 – ahocevar

更新到OL 4.2.0后，此功能停止工作！它在4.1.1中工作 – Akhorus

首先。谢谢你的详细问题和答案。它帮助我在这个过程中通过开放层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”一起。

来源

2016-08-16 14:57:38 lottoskills

在OpenLayers中关闭图像平滑3

回答

相关问题