在OpenLayers 3中關閉圖像平滑

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地圖圖像之前將畫布上下文的imageSmoothingEnabled屬性設置為false ，可以輕松實現所需的imageSmoothingEnabled 。 下面的代碼段假定您的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”一起使用。