Javascript 如何在OpenLayers 3上禁用平滑图像

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

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

实际上，我的OpenLayers地图显示了这个图像

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

有什么想法吗

更新：如果我禁用平滑选项，下面的答案，输出图像将渲染而不平滑。。。但也有一些像素使用错误的颜色渲染（使用较亮的着色器或不透明度较低）

这是输出图像：

但结果应该是：

---

问题不在于ol，而在于HTML5画布渲染。必须关闭地图画布上的图像平滑。看这张照片

使用Openlayers，您可以使用预合成/后合成事件仅对您的层禁用它：

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

---

注意：它依赖于导航器…

问题不在于ol，而在于HTML5画布渲染。必须关闭地图画布上的图像平滑。看这张照片

使用Openlayers，您可以使用预合成/后合成事件仅对您的层禁用它：

// 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 = false;
    evt.context.mozImageSmoothingEnabled = false;
    evt.context.msImageSmoothingEnabled = false;
});

---

有了这段代码，我可以对OL地图上的每一层禁用平滑功能。

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

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

---

有了这段代码，我可以对OL地图上的每一层禁用平滑功能。

我知道这是一个老问题，但我已经努力解决了几个小时，终于成功了，所以我想其他人可能会觉得这很有帮助

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

注意：确保在源上设置

图像平滑：false

，而不是图层！如果您在图层上设置它，它不会导致任何错误，但它不会实现任何功能；）

我发现，如果我希望像素化按我预期的方式工作，我需要在源上设置

imageSmoothing:false

，然后在源上设置

maxZoom

，使其小于我在层和视图上设置的

maxZoom

（例如，在源代码上为

maxZoom:14

，在图层和视图上为

maxZoom:19

），然后我得到了我想要的漂亮的实心块状像素，没有任何失真或阴影，也没有任何像素内部的错误值

---

最后，确保图层上的

maxZoom

设置与视图上的

maxZoom

设置相同，否则用户将放大太远，图层将消失。

我知道这是一个老问题，但我已经努力了几个小时，终于让它工作了，所以我想其他人可能会觉得这很有帮助

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

注意：请确保在源上设置

imageSmoothing:false

，而不是在层上设置！如果在层上设置，则不会导致任何错误，但不会实现任何效果；）

我发现，如果我希望像素化按我预期的方式工作，我需要在源上设置

imageSmoothing:false

，然后在源上设置

maxZoom

，使其小于我在层和视图上设置的

maxZoom

（例如，在源代码上为

maxZoom:14

，在图层和视图上为

maxZoom:19

），然后我得到了我想要的漂亮的实心块状像素，没有任何失真或阴影，也没有任何像素内部的错误值

---

最后，确保图层上的

maxZoom

设置与视图上的

maxZoom

设置相同，否则用户将放大太远，图层将消失。

我猜这就像是来自更高缩放的缓存数据。在没有匹配图像的情况下显示。嗯，我不这么认为……如果我执行高缩放呃缩放，图像仍然平滑。可能问题在于重新投影过程，在尝试重新创建重新投影的图像时包含错误。猜测这就像来自higer zoom的缓存数据。在没有匹配图像时显示。嗯，我不这么认为……如果我执行更高的缩放，图像仍然平滑。可能问题在于重新投影ct程序在尝试重新创建重投影图像时出现错误谢谢您的回答，上周五我找到了一个类似于您建议的解决方案：map.on（'precompose'，function（evt））{evt.context.imageSmoothingEnabled=false；evt.context.webkitImageSmoothingEnabled=false；evt.context.mozImageSmoothingEnabled=false；evt.context.msImageSmoothingEnabled=false；}）；您好，我写了我的问题的更新。不幸的是，如果我禁用Canvax的imageSmoothing，我的问题将无法解决…有什么建议吗？：（感谢您的回答，上周五我找到了一个类似于您建议的解决方案：map.on（'precompose'，function（evt））{evt.context.imageSmoothingEnabled=false；evt.context.webkitImageSmoothingEnabled=false；evt.context.mozImageSmoothingEnabled=false；evt.context.msImageSmoothingEnabled=false；}）；您好，我写了我的问题的更新。不幸的是，如果我禁用Canvax的imageSmoothing，我的问题将无法解决…有什么建议吗？：(