使用 Openlayers 缓慢矢量平铺屏幕画布渲染

Question

Openlayers 网站上有一个示例：

https://openlayers.org/en/latest/examples/offscreen-canvas.html

它工作正常，但是当我尝试向地图添加额外的图块层（XYZ 或 WMS）时，渲染过程会变得非常慢。

有人解决问题了吗？

刚刚尝试将 OSM 图层与示例中的图层一起添加到地图中，这导致渲染速度显着减慢。

Answer 1

从代码使用

frameState

的方式来看，它可能期望工作人员完成所有渲染，而直接添加另一层会与该假设相冲突。如果您必须直接添加到地图，为 OSM 指定

transition: 0

可能会有所帮助。

您也可以尝试将 OSM 添加到工作线程 - 它不需要

stylefunction

但我认为其他一切都适用

const layers = [];
const layer = new TileLayer({
  source: new OSM({transition: 0})
});
layer.getRenderer().useContainer = function (target, transform) {
  this.containerReused = this.getLayer() !== layers[0];
  this.canvas = canvas;
  this.context = context;
  this.container = {
    firstElementChild: canvas,
    style: {
      opacity: layer.getOpacity(),
    },
  };
  rendererTransform = transform;
};
layers.push(layer);

需要一些额外的工作，因为这需要自定义 Tile 类 - 图像不能在工作线程中使用，因此需要以与精灵相同的方式加载。

更新

理想情况下，OSM 可以采用tileLoadFunction，以与精灵图像相同的方式将图像加载为与工作程序兼容的imageBitmap：

    tileLoadFunction: function (tile, src) {
      const worker = self;
      worker.postMessage({
        action: 'loadImage',
        src: src,
      });
      worker.addEventListener('message', (event) => {
        tile.setImage(event.data.image);
      });
    }

不幸的是，ImageTile 中的代码仍然会抛出错误，因为它最初尝试创建一个空图像而不检查是否受支持，因此除非修复了该问题，否则将需要自定义类 - 例如，您可以从

https 复制所有代码://github.com/openlayers/openlayers/blob/main/src/ol/ImageTile.js 将类名称更改为 ImageBitmapTile 并将所有出现的 new Image()

 编辑为 

new Observable()

（从 

ol/Observable.js

 导入 - 一个简单的接受侦听器的通用对象）

OSM 不接受自定义图块类，因此您需要使用 TileImage 源并指定 OSM url 和 maxZoom：

new TileLayer({
  source: new TileImage({
    url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    tilegrid: createXYZ({maxZoom: 19}),
    tileClass: ImageBitMapTile,
    tileLoadFunction: function (tile, src) {
      const worker = self;
      worker.postMessage({
        action: 'loadImage',
        src: src,
      });
      worker.addEventListener('message', (event) => {
        tile.setImage(event.data.image);
      });
    }
  }),
}),