如何在 OpenLayers 3 中禁用平滑图像答案

【问题标题】：Howto Disable smooth image on OpenLayers 3如何在 OpenLayers 3 中禁用平滑图像
【发布时间】：2018-04-04 16:29:04
【问题描述】：

我正在尝试使用 OpenLayer 在地图上查看图像，我的图像是遵循 SRID:4326 的 PNG。我设置了一个 OpenLayers 地图并设置了投影信息，以便在 OpenLayer SRID (3857) 中重新投影我的图像。

现在..我的问题是 OpenLayer 以平滑的颜色显示我的分类 PNG。我需要在没有平滑颜色渲染的情况下查看 PNG。

实际上我的 OpenLayers 地图显示了这张图片

但我需要查看没有平滑颜色的图像。

有什么想法吗？

更新：如果我禁用平滑选项，按照以下答案，输出图像将在不平滑的情况下渲染...但是有些像素以错误的颜色渲染（使用较浅的着色器或较低的不透明度）

这是输出图像：

但输出应该是：

【问题讨论】：

猜这就像来自更高缩放的缓存数据。当没有匹配的图像时显示。
嗯我不这么认为......如果我执行更高的缩放，图像仍然会平滑。可能问题出在重新投影过程中，它在尝试重新创建重新投影的图像时包含错误

标签： javascript gis openlayers

【解决方案1】：

问题不在 ol 上，而在 HTML5 Canvas 渲染上。您必须关闭地图画布上的图像平滑。看imageSmoothingEnabled option。

使用 Openlayers，您可以使用 precompose/postcompose 事件仅为您的图层禁用它：

// Remove image smoothing on precompose
layer.on('precompose', function(event) {
  var ctx = event.context;
  ctx.mozImageSmoothingEnabled = 
  ctx.webkitImageSmoothingEnabled = 
  ctx.msImageSmoothingEnabled = 
  ctx.imageSmoothingEnabled = false;
}
// Restore image smoothing on postcompose
layer.on('postcompose', function(event) {
  var ctx = event.context;
  ctx.mozImageSmoothingEnabled = 
  ctx.webkitImageSmoothingEnabled = 
  ctx.msImageSmoothingEnabled = 
  ctx.imageSmoothingEnabled = true;
}

注意：它依赖于导航器...

【讨论】：

感谢您的回答，上周五我找到了与您的建议类似的解决方案：map.on('precompose', function(evt) { evt.context.imageSmoothingEnabled = false; evt.context.webkitImageSmoothingEnabled = 假；evt.context.mozImageSmoothingEnabled = 假；evt.context.msImageSmoothingEnabled = 假；})；
嗨，我写了我的问题的更新。不幸的是，如果我禁用 Canvax 的 imageSmoothing，我的问题将无法解决……有什么建议吗？ :(

【解决方案2】：

我现在知道这是一个老问题，但我已经为此苦苦挣扎了几个小时，终于让它工作了，所以我认为其他人可能会觉得这很有帮助。

由于 OpenLayers 6.4.0，您可以禁用源的图像平滑（下面的代码示例来自 OpenLayers 网站上的 this example）：

var disabledLayer = new TileLayer({
  // specify className so forEachLayerAtPixel can distinguish layers
  className: 'ol-layer-dem',
  source: new XYZ({
    attributions: attributions,
    url:
      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
    maxZoom: 10,
    crossOrigin: '',
    imageSmoothing: false,
  }),
});

注意：确保在源上设置imageSmoothing: false，而不是图层！如果你在图层上设置它不会导致任何错误，但它不会实现任何东西;）

我发现如果我希望像素化按照我期望的方式工作，我需要在源上设置imageSmoothing: false，然后在源上设置maxZoom，使其小于我设置的值作为层和视图上的maxZoom（例如，源上的maxZoom: 14，层和视图上的maxZoom: 19）。然后我得到了我想要的漂亮的实心块状像素，没有任何失真或阴影或任何像素内的不正确值。

最后，确保您图层上的maxZoom 设置与您视图上的maxZoom 设置相同，否则您的用户将能够放大太多而您的图层将消失。

【讨论】：

【解决方案3】：

上面的答案解决了我的问题。但我也找到了这个解决方案

  map.on('precompose', function(evt) {
    evt.context.imageSmoothingEnabled = false;
    evt.context.webkitImageSmoothingEnabled = false;
    evt.context.mozImageSmoothingEnabled = false;
    evt.context.msImageSmoothingEnabled = false;
});

使用此代码，我能够为我的 OL 地图上的每一层禁用平滑。

【讨论】：