防止平滑 TileImage 层

Question

我在 OpenLayers 4.6.5 中使用由 AWS Lambda 切片服务器提供的 Landsat 8 TileImage 图层（根据 https://github.com/mapbox/landsat-tiler），并且需要防止图像中的像素被 dithered/interpolated - 这样每个像素（大约 30m 高 x 30m 宽）只包含一种没有阴影的颜色。以下是我所看到的示例：

我发现了一些其他人对静态 PNG 源有同样问题的情况，所以我尝试了以下 javascript:

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

...以及以下 CSS：

.tm-openlayer-map
    canvas {
      image-rendering: optimizeSpeed;
      image-rendering: -moz-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: -o-crisp-edges;
      image-rendering: pixelated;
      -ms-interpolation-mode: nearest-neighbor;
    }

但这两种方法似乎都没有任何区别。我只能得出结论，要么这些方法不适用于 TileImage 层，要么我的图块服务器实际上在提供预先平滑的图像。非常感谢任何和所有建议！

Answer 1

我知道这是一个老问题了，但我终于能够解决这个问题，所以我认为其他人可能会觉得这有帮助。

自 OpenLayers 网站上的 OpenLayers 6.4.0, you can disable image smoothing for a source (code sample below is from 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,
  }),
});

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

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

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

防止平滑 TileImage 层

Preventing smoothing of TileImage layer

openlayers