在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

回答

相關問題