有改善光栅图块加载的方法吗？

Question

光栅图块加载似乎是这样工作的：

* erase old tile layer image
* fetch new tile layer image   // <-- the tile area is blank during this
* draw new tile layer image

瓷砖似乎在“闪烁”；也就是说，旧的图块图像被删除，该屏幕区域仅显示背景，然后新的图块出现。

我目前在 TileLayer() 中使用它：

const src = new XYZ({
   url: 'https://my_titiler_server.com/cog/tile/{z}/{x}/{y}?url=time_01.png';
  }),

稍后网址将通过以下方式更新：

  src.setUrl('https://my_titiler_server.com/cog/tile/{z}/{x}/{y}?url=time_02.png')

问：TileLayer 机制是否有参数可以使其顺利显示？

问：WebGL FrameBuffer 是否可以在加载过程中以某种方式使用双缓冲新图块，然后将其换出？

问：WebGL“过滤器”表达式可以以某种方式使用吗？我对 WebGL 点和线使用了“过滤器”表达式，效果非常好。我尝试制作栅格数据的多边形，但顶点数量淹没了浏览器。

Answer 1

这似乎是由于 WebGL 图块图层缓存图块纹理并在 url 或参数更改时清除该缓存的方式所致。

例如，将

https://openlayers.org/en/latest/examples/wms-time.html

中的

ol/layer/Tile

更改为 ol/layer/WebGLTile，您将看到与您描述的相同的问题。

这种情况下的解决方法是添加新层而不是更新源，并在新层加载后通过替换删除旧层

  layers[1].getSource().updateParams({'TIME': startDate.toISOString()});

与

  const oldLayer = map.getLayers().item(1);
  map.addLayer(
    new TileLayer({
      extent: extent,
      source: new TileWMS({
        attributions: ['Iowa State University'],
        url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
        params: {
          'LAYERS': 'nexrad-n0r-wmst',
          'TIME': startDate.toISOString(),
        },
      }),
    }),
  );
  map.once('loadend', () => map.removeLayer(oldLayer));