Using Cesium function in Web worker

[johnnylc]

I want to use the cesium’s process function and data types(like Cartisian3) in web worker.
I searched related topics in the community:

cannot use cesiume in Worker

Hi, I need to do some processing in a worker, and I'd love to use Cesium functions, but:     importScripts('url_of/Cesium.js'); Won't work because document and window are undefined (which is expected). Is there a ways to use Cesium build in a worker ? Thanks, Vincent.

Not able to Use Cesium.js functions in the worker thread

Hello Team, I am trying to use the cesium.js intersection test in the worker thread but somehow I am not able to run and execute the code. Latter on I realized worker is not even process/identify the Cesium.Cartesian3. Is there any way we can use cesium js functions/API in the worker thread ? Or is it not possible to do so ? @Gabby_Getz @omar Thank you !!

I tried to add cesium to the worker using import Cesium from ‘cesium’ , or importScripts(‘url_to_cesium_index.js’) . but none of them work.
So how to use Cesium functions in Web worker ?

[Gabby_Getz]

Hi,

There is no reason you can’t use Cesium functions in a web worker.

However, web workers do not share the same global scope as the webpage. You must import Cesium code accordingly, and any build process for workers may need to be treated differently that that of the main app.

Could you share the current way you are creating the worker and and built tools associated with your project? For example are you using webpack to build?

Thanks,
Gabby

[johnnylc]

Yes，I use webpack and worker-loader to build the project,
1, Webpack rule config for worker-loader as below:

config.module.rules = [
      {
        test: /\.worker\.js$/i,
        use: [
          {
            loader: 'worker-loader',
            options: {
              inline: 'no-fallback'
            }
          }
        ]
      },
      ...config.module.rules
    ]

2, The web worker is implemented in “history-data.worker.js”:

import _ from 'lodash'
import moment from 'moment'
importScripts(`http://localhost/js/Cesium/index.js`)

self.onmessage = async function (e) {
  const type = e.data.type
  const payload = e.data.payload

  if (type === 'INIT') {
    console.log('init time', moment().format('YYYY-MM-DD HH:mm:ss.SSSS'))
    self.postMessage({
      type: 'WORKER_INIT',
      payload: { data: 'success' }
    })
  }
}

3, The worker is imported and created in the project:

   import DataWorker from './worker/history-data.worker'
   const dataProcessWorker = new DataWorker()
   const dataProcessWorker.postMessage({ type: 'INIT', payload: {} })

• Error occurs at the importScripts line
  importScripts(http://localhost/js/Cesium/index.js`)`
  

  

• Error when replaced the importScripts line to:
  import * as Cesium from 'cesium'
  Compile error occurs:
  

  

So could you please make an example of using Cesium in a web worker?
Thank you.

[Gabby_Getz]

Hi there,

import * as Cesium from 'cesium' is the best way to import Cesium.

The issue is that webpack is not handling the optional chaining in the source code ( the variable.?property syntax). This issue should cover how to address the issue..

You can also import only the modules you need in the worker to help minimize the worker, for example

import { Cartesian3, Cartographic } from 'Cesium'.

[johnnylc]

Thank you, following you suggestion it works.

Add these lines to package.json, replace the acorn package that the webpack uses as a parser:

{
  ...
  "resolutions": {
    "acorn": "npm:acorn-with-stage3"
  },
  "dependencies": {