Skip to content

Commit f6f12bf

Browse files
KanahiroKanahiro
committed
feat: use webworker
1 parent 9e4f798 commit f6f12bf

7 files changed

+217
-155
lines changed

‎package-lock.json

+108-62
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "maplibre-gl-gsi-terrain",
3-
"version": "1.0.0",
3+
"version": "1.1.0-pre.0",
44
"type": "module",
55
"main": "./dist/terrain.js",
66
"types": "./dist/terrain.d.ts",
@@ -15,11 +15,11 @@
1515
"prepare": "npm run build"
1616
},
1717
"devDependencies": {
18-
"typescript": "^4.6.4",
18+
"maplibre-gl": "^4.2.0",
19+
"typescript": "^5.4.5",
1920
"vite": "^3.2.3"
2021
},
2122
"dependencies": {
22-
"fast-png": "^6.1.0",
23-
"maplibre-gl": "^4.1.2"
23+
"workerpool": "^9.1.1"
2424
}
2525
}

‎src/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import maplibreGl, { Map } from 'maplibre-gl';
22
import 'maplibre-gl/dist/maplibre-gl.css';
33

4-
import { useGsiTerrainSource } from './terrain';
4+
import { useGsiTerrainSource } from '../dist/terrain';
55

66
const gsiTerrainSource = useGsiTerrainSource(maplibreGl.addProtocol, {
77
tileUrl: 'https://tiles.gsj.jp/tiles/elev/mixed/{z}/{y}/{x}.png',

‎src/terrain.ts

+5-68
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,7 @@
11
import type { RasterDEMSourceSpecification } from 'maplibre-gl';
22
import maplibregl from 'maplibre-gl';
3-
import { encode } from 'fast-png';
4-
5-
function gsidem2terrainrgb(
6-
r: number,
7-
g: number,
8-
b: number,
9-
): [number, number, number] {
10-
// https://qiita.com/frogcat/items/d12bed4e930b83eb3544
11-
let rgb = (r << 16) + (g << 8) + b;
12-
let h = 0;
13-
14-
if (rgb < 0x800000) h = rgb * 0.01;
15-
else if (rgb > 0x800000) h = (rgb - Math.pow(2, 24)) * 0.01;
16-
17-
rgb = Math.floor((h + 10000) / 0.1);
18-
const tR = (rgb & 0xff0000) >> 16;
19-
const tG = (rgb & 0x00ff00) >> 8;
20-
const tB = rgb & 0x0000ff;
21-
return [tR, tG, tB];
22-
}
3+
import WorkerPool from 'workerpool';
4+
const pool = WorkerPool.pool(new URL('worker.js', import.meta.url).href);
235

246
type Options = {
257
attribution?: string;
@@ -28,49 +10,6 @@ type Options = {
2810
tileUrl?: string;
2911
};
3012

31-
function loadPng(url: string): Promise<Uint8Array> {
32-
return new Promise((resolve, reject) => {
33-
const image = new Image();
34-
image.crossOrigin = '';
35-
image.onload = () => {
36-
const canvas = new OffscreenCanvas(image.width, image.height);
37-
38-
const context = canvas.getContext('2d', {
39-
willReadFrequently: true,
40-
})!;
41-
42-
// 地理院標高タイルを採用している一部のタイルは無効値が透過されていることがある
43-
// 透過されている場合に無効値にフォールバックさせる=rgb(128,0,0)で塗りつぶす
44-
context.fillStyle = 'rgb(128,0,0)';
45-
context.fillRect(0, 0, canvas.width, canvas.height);
46-
47-
context.drawImage(image, 0, 0);
48-
const imageData = context.getImageData(
49-
0,
50-
0,
51-
canvas.width,
52-
canvas.height,
53-
);
54-
for (let i = 0; i < imageData.data.length / 4; i++) {
55-
const tRGB = gsidem2terrainrgb(
56-
imageData.data[i * 4],
57-
imageData.data[i * 4 + 1],
58-
imageData.data[i * 4 + 2],
59-
);
60-
imageData.data[i * 4] = tRGB[0];
61-
imageData.data[i * 4 + 1] = tRGB[1];
62-
imageData.data[i * 4 + 2] = tRGB[2];
63-
}
64-
const png = encode(imageData);
65-
resolve(png);
66-
};
67-
image.onerror = (e) => {
68-
reject(e);
69-
};
70-
image.src = url;
71-
});
72-
}
73-
7413
/**
7514
* 地理院標高タイルを利用したtype=raster-demのsourceを返す
7615
* @param addProtocol
@@ -103,12 +42,10 @@ export const useGsiTerrainSource = (
10342
addProtocol: typeof maplibregl.addProtocol,
10443
options: Options = {},
10544
): RasterDEMSourceSpecification => {
106-
addProtocol('gsidem', async (params, abortController) => {
45+
addProtocol('gsidem', async (params, _) => {
10746
const imageUrl = params.url.replace('gsidem://', '');
108-
const png = await loadPng(imageUrl).catch((e) => {
109-
abortController.abort();
110-
throw e.message;
111-
});
47+
const p = await pool.proxy();
48+
const png = await p.loadPng(imageUrl);
11249
return { data: png };
11350
});
11451
const tileUrl =

‎src/worker.ts

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// @ts-ignore
2+
importScripts('workerpool.js');
3+
// @ts-ignore
4+
const pool = workerpool.worker({
5+
loadPng,
6+
});
7+
8+
function gsidem2terrainrgb(
9+
r: number,
10+
g: number,
11+
b: number,
12+
): [number, number, number] {
13+
// https://qiita.com/frogcat/items/d12bed4e930b83eb3544
14+
let rgb = (r << 16) + (g << 8) + b;
15+
let h = 0;
16+
17+
if (rgb < 0x800000) h = rgb * 0.01;
18+
else if (rgb > 0x800000) h = (rgb - Math.pow(2, 24)) * 0.01;
19+
20+
rgb = Math.floor((h + 10000) / 0.1);
21+
const tR = (rgb & 0xff0000) >> 16;
22+
const tG = (rgb & 0x00ff00) >> 8;
23+
const tB = rgb & 0x0000ff;
24+
return [tR, tG, tB];
25+
}
26+
27+
async function loadPng(url: string): Promise<Uint8Array | null> {
28+
let res: Response;
29+
try {
30+
res = await fetch(url);
31+
} catch (e) {
32+
return null;
33+
}
34+
35+
if (!res.ok) {
36+
return null;
37+
}
38+
39+
const blob = await res.blob();
40+
const bitmap = await createImageBitmap(blob);
41+
42+
const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
43+
const context = canvas.getContext('2d', {
44+
willReadFrequently: true,
45+
})!;
46+
47+
// 地理院標高タイルを採用している一部のタイルは無効値が透過されていることがある
48+
// 透過されている場合に無効値にフォールバックさせる=rgb(128,0,0)で塗りつぶす
49+
context.fillStyle = 'rgb(128,0,0)';
50+
context.fillRect(0, 0, canvas.width, canvas.height);
51+
52+
context.drawImage(bitmap, 0, 0);
53+
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
54+
for (let i = 0; i < imageData.data.length / 4; i++) {
55+
const tRGB = gsidem2terrainrgb(
56+
imageData.data[i * 4],
57+
imageData.data[i * 4 + 1],
58+
imageData.data[i * 4 + 2],
59+
);
60+
imageData.data[i * 4] = tRGB[0];
61+
imageData.data[i * 4 + 1] = tRGB[1];
62+
imageData.data[i * 4 + 2] = tRGB[2];
63+
}
64+
65+
const canvas2 = new OffscreenCanvas(imageData.width, imageData.height);
66+
const context2 = canvas2.getContext('2d', {
67+
willReadFrequently: true,
68+
})!;
69+
context2.putImageData(imageData, 0, 0);
70+
71+
// blob to typedarray
72+
const b2 = await canvas2.convertToBlob();
73+
const ab = await b2!.arrayBuffer();
74+
return new Uint8Array(ab);
75+
}

‎src/workerpool.js

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tsconfig.json

+21-20
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
{
2-
"compilerOptions": {
3-
"target": "ESNext",
4-
"useDefineForClassFields": true,
5-
"module": "ESNext",
6-
"lib": ["ESNext", "DOM"],
7-
"moduleResolution": "Node",
8-
"strict": true,
9-
"resolveJsonModule": true,
10-
"isolatedModules": true,
11-
"esModuleInterop": true,
12-
"declaration": true,
13-
"declarationMap": true,
14-
"declarationDir": "dist",
15-
"noUnusedLocals": true,
16-
"noUnusedParameters": true,
17-
"noImplicitReturns": true,
18-
"skipLibCheck": true,
19-
"outDir": "dist"
20-
},
21-
"include": ["src/terrain.ts"]
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"lib": ["ESNext", "DOM"],
7+
"moduleResolution": "Node",
8+
"strict": true,
9+
"resolveJsonModule": true,
10+
"isolatedModules": true,
11+
"esModuleInterop": true,
12+
"declaration": true,
13+
"declarationMap": true,
14+
"declarationDir": "dist",
15+
"noUnusedLocals": true,
16+
"noUnusedParameters": true,
17+
"noImplicitReturns": true,
18+
"skipLibCheck": true,
19+
"outDir": "dist",
20+
"allowJs": true
21+
},
22+
"include": ["src/terrain.ts", "src/worker.ts", "src/workerpool.js"]
2223
}

0 commit comments

Comments
 (0)