防止平滑TileImage层

Question

我在OpenLayers 4.6.5中使用由AWS Lambda切片服务器提供的Landsat 8 TileImage图层（根据https://github.com/mapbox/landsat-tiler），并且需要防止图像中的像素抖动/插值-这样每个像素（大约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图层，要么我的tile服务器实际上正在提供经过预平滑的图像。不胜感激所有建议！

Answer 1

我现在知道这是一个老问题，但我终于能够完成这项工作，所以我认为其他人可能会觉得这有帮助。

由于 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 设置相同，否则您的用户将无法放大太多而您的图层将消失。