О том, как отображать openlayers на offscreencanvas

#javascript #openlayers #web-worker #offscreen-canvas

Вопрос:

Недавно я наткнулся на сообщение, в котором говорится о рендеринге слоев openlayer на offscreencanvas в web worker (https://openlayers.org/en/latest/examples/offscreen-canvas.html ). Я хотел бы внедрить это в свой проект. Мой план состоит в том, чтобы сначала выяснить, как работает рендеринг offscreencanvas, а затем добавить web worker. Прямо сейчас я застрял на первом шаге (рендеринг слоев на offscreencanvas). Я пытался следовать шаблону в сообщении, но я не мог получить слои, отображаемые на offscreencanvas.

Вот мое понимание подхода, используемого в сообщении:

  1. В основном потоке создайте «фиктивный» слой и добавьте его на карту openlayer. Будет выполнен хук «render» на «фиктивном» слое. Затем он передает framestate веб-работнику.
  2. После получения framestate web worker создает реальные слои и отображает слои на offscreencanvas, определенных в web worker. Затем то, что отображается на offscreencanvas, переносится в растровое изображение. Это растровое изображение передается обратно в основной поток.
  3. После получения растрового изображения основной поток прикрепляет его к холсту.

Я использую подход offscreencanvas в примере codesandbox.

Вот codesandbox, который содержит правильные фигуры, отображаемые на холсте: https://codesandbox.io/s/confident-elion-6qzj9?file=/src/index.js

Вот codesandbox, который содержит подход offscreencanvas, но слои не отображаются: https://codesandbox.io/s/mystifying-glitter-4nqn7?file=/src/index.js

Интересно, есть ли у кого-нибудь опыт рендеринга слоев openlayer на offscreencanvas? Любая помощь приветствуется!