fix: compatible Safari (remove web-worker)

README_CN.md

@@ -11,10 +11,9 @@
 - 三波段渲染。
 - 多模式颜色渲染。
 - 支持在地图上查询TIFF值。
-- 支持任何投影的TIFF。
-- Web Workers 加速。
 - WebGL 加速渲染。
 - 波段计算。
+- **[实验性]** 支持任何投影的TIFF。
 
 ## 安装
 
@@ -56,7 +55,7 @@ provider.readyPromise.then(() => {
 })
 ```
 
-如果 TIFF 的投影不是 EPSG:4326，你可以通过 ``projFunc`` 来处理投影
+**[实验性]** 如果 TIFF 的投影不是 EPSG:4326，你可以通过 ``projFunc`` 来处理投影
 
 ```ts
 import proj4 from 'proj4';
@@ -291,7 +290,6 @@ pnpm dev
 
 ## 计划
 
-- [x] 使用 Web Workers 生成瓦片图像
 - [x] 使用 GPU 加速计算
 - [ ] 更高效的瓦片请求方法
 

package.json

@@ -13,11 +13,8 @@
   },
   "devDependencies": {
     "conventional-changelog-cli": "^2.2.2",
-    "esbuild": "^0.19.2",
     "lerna": "^6.1.0",
     "rimraf": "^5.0.1",
-    "rollup-plugin-dts": "^6.0.1",
-    "rollup-plugin-esbuild": "^5.0.0",
     "turbo": "^1.10.13"
   }
 }

packages/TIFFImageryProvider/README.md

@@ -13,7 +13,6 @@ Load GeoTIFF/COG(Cloud optimized GeoTIFF) on Cesium
 - Three band rendering.
 - Multi mode color rendering.
 - Support identify TIFF value with cartographic position.
-- Web Workers speed up.
 - WebGL accelerated rendering.
 - Band calculation.
 - **[experimental]** Support any projected TIFF .
@@ -121,6 +120,9 @@ class TIFFImageryProvider {
     min: number;
     max: number;
   }>;
+  origin: number[];
+  reverseY: boolean;
+  samples: number;
   constructor(options: TIFFImageryProviderOptions & {
     /** 
      * @deprecated 
@@ -293,7 +295,6 @@ pnpm dev
 
 ## Plans
 
-- [x] Use Web Workers to generate tile image
 - [x] GPU speed up calculation
 - [ ] More efficient tile request method
 

packages/TIFFImageryProvider/package.json

@@ -42,11 +42,12 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^11.0.0",
     "@types/offscreencanvas": "^2019.7.0",
     "cesium": "^1.108.0",
+    "esbuild": "^0.19.2",
     "rollup": "^3.28.1",
-    "rollup-plugin-web-worker-loader": "^1.6.1",
+    "rollup-plugin-dts": "^6.0.1",
+    "rollup-plugin-esbuild": "^5.0.0",
     "tslib": "^2.5.0",
     "typescript": "4.8.4"
   },

packages/TIFFImageryProvider/rollup.config.js

@@ -1,9 +1,4 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
 import { readFileSync } from 'fs';
-import webWorkerLoader from "rollup-plugin-web-worker-loader";
-import { createRequire } from "module";
 import esbuild from 'rollup-plugin-esbuild';
 import path from 'path';
 import dts from 'rollup-plugin-dts';
@@ -29,12 +24,6 @@ const config = [
     },
     external,
     plugins: [
-      webWorkerLoader({
-        inline: true,
-        targetPlatform: "browser",
-        extensions: ["ts", "js"],
-        external,
-      }),
       esbuild({
         target: 'node14',
       }),

packages/TIFFImageryProvider/src/TIFFImageryProvider.ts

@@ -2,17 +2,13 @@ import { Event, GeographicTilingScheme, Credit, Rectangle, ImageryLayerFeatureIn
 import GeoTIFF, { Pool, fromUrl, fromBlob, GeoTIFFImage } from 'geotiff';
 
 import { addColorScale, plot } from './plotty'
-import WorkerFarm from "./worker/worker-farm";
 import { getMinMax, generateColorScale, findAndSortBandNumbers, stringColorToRgba } from "./helpers/utils";
 import { ColorScaleNames, TypedArray } from "./plotty/typing";
 import TIFFImageryProviderTilingScheme from "./TIFFImageryProviderTilingScheme";
 import { reprojection } from "./helpers/reprojection";
 
-// @ts-ignore
-import GenerateImageWorker from "web-worker:./worker/worker-generateImage";
-// @ts-ignore
-import ReverseArrayWorker from "web-worker:./worker/worker-reverseArray";
-import { GenerateImageOptions } from "./helpers/generateImage";
+import { GenerateImageOptions, generateImage } from "./helpers/generateImage";
+import { reverseArray } from "./helpers/utils";
 
 export interface SingleBandRenderOptions {
   /** band index start from 1, defaults to 1 */
@@ -181,10 +177,8 @@ export class TIFFImageryProvider {
   private _images: (GeoTIFFImage | null)[] = [];
   private _imagesCache: Record<string, {
     time: number;
-    data: ImageBitmap | HTMLCanvasElement | HTMLImageElement;
+    data: ImageData | HTMLCanvasElement | HTMLImageElement;
   }> = {};
-  private _generateImageworkerFarm: WorkerFarm | null;
-  private _reverseArrayWorkerFarm: WorkerFarm | null;
   private _cacheTime: number;
   private _isTiled: boolean;
   private _proj?: {
@@ -195,6 +189,7 @@ export class TIFFImageryProvider {
   };
   origin: number[];
   reverseY: boolean = false;
+  samples: number;
 
   constructor(private readonly options: TIFFImageryProviderOptions & {
     /**
@@ -210,8 +205,6 @@ export class TIFFImageryProvider {
     this.minimumLevel = options.minimumLevel ?? 0;
     this.credit = new Credit(options.credit || "", false);
     this.errorEvent = new Event();
-    this._generateImageworkerFarm = new WorkerFarm(new GenerateImageWorker());
-    this._reverseArrayWorkerFarm = new WorkerFarm(new ReverseArrayWorker());
     this._cacheTime = options.cache ?? 60 * 1000;
 
     this.ready = false;
@@ -282,6 +275,7 @@ export class TIFFImageryProvider {
 
     // 获取波段数
     const samples = image.getSamplesPerPixel();
+    this.samples = samples;
     this.renderOptions = renderOptions ?? {}
     // 获取nodata值
     const noData = image.getGDALNoData();
@@ -538,17 +532,14 @@ export class TIFFImageryProvider {
       } else {
         res = await image.readRasters(options) as TypedArray[];
         if (this.reverseY) {
-          if (!this._reverseArrayWorkerFarm?.worker) {
-            throw new DeveloperError('web workers bootstrap error');
-          }
-          res = await Promise.all((res).map(arr => this._reverseArrayWorkerFarm.scheduleTask<any, TypedArray>({ array: arr, width: (res as any).width, height: (res as any).height })));
+          res = await Promise.all((res).map((arr: any) => reverseArray({ array: arr, width: (res as any).width, height: (res as any).height }))) as any;
         }
       }
 
       if (this._proj?.project && this.tilingScheme instanceof TIFFImageryProviderTilingScheme) {
         const sourceRect = this.tilingScheme.tileXYToNativeRectangle2(x, y, z);
         const targetRect = this.tilingScheme.tileXYToRectangle(x, y, z);
-        
+
         const sourceBBox = [sourceRect.west, sourceRect.south, sourceRect.east, sourceRect.north] as any;
         const targetBBox = [targetRect.west, targetRect.south, targetRect.east, targetRect.north].map(CesiumMath.toDegrees) as any
 
@@ -602,7 +593,7 @@ export class TIFFImageryProvider {
         return undefined;
       }
 
-      let result: ImageBitmap | HTMLImageElement
+      let result: ImageData | HTMLImageElement
 
       if (multi || convertToRGB) {
         const opts: GenerateImageOptions = {
@@ -621,11 +612,8 @@ export class TIFFImageryProvider {
           noData: this.noData,
           colorMapping: Object.entries(this.renderOptions.colorMapping ?? { 'black': 'transparent' }).map((val) => val.map(stringColorToRgba)),
         }
-        if (!this._generateImageworkerFarm?.worker) {
-          throw new DeveloperError('web workers bootstrap error');
-        }
 
-        result = await this._generateImageworkerFarm.scheduleTask<GenerateImageOptions, ImageBitmap>(opts);
+        result = await generateImage(opts);
       } else if (single && this.plot) {
         const { band = 1 } = single;
         this.plot.removeAllDataset();
@@ -722,7 +710,6 @@ export class TIFFImageryProvider {
     this._images = undefined;
     this._source = undefined;
     this._imagesCache = undefined;
-    this._generateImageworkerFarm?.destory();
     this.plot?.destroy();
     this._destroyed = true;
   }

packages/TIFFImageryProvider/src/helpers/utils.ts

@@ -85,4 +85,20 @@ export function stringColorToRgba(color: string) {
   const { red, green, blue, alpha } = newColor;
 
   return [red, green, green, alpha].map(val => Math.round(val * 255));
+}
+
+export function reverseArray(options: {
+  array: number[]; width: number; height: number;
+}) {
+  const { array, width, height } = options;
+  const reversedArray = [];
+
+  for (let row = height - 1; row >= 0; row--) {
+    const startIndex = row * width;
+    const endIndex = startIndex + width;
+    const rowArray = array.slice(startIndex, endIndex);
+    reversedArray.push(...rowArray);
+  }
+
+  return reversedArray;
 }