From 7540dc9c406929a8340159dfee976a2de24650ae Mon Sep 17 00:00:00 2001 From: Daria Terekhova Date: Fri, 1 Mar 2024 17:58:14 +0200 Subject: [PATCH] Example with loading of slpk in browser implementation --- .../experimental/slpk-in-browser/package.json | 55 ++++++++ .../slpk-in-browser/public/favicon.ico | Bin 0 -> 3870 bytes .../slpk-in-browser/public/index.html | 43 ++++++ .../experimental/slpk-in-browser/src/App.tsx | 91 ++++++++++++ .../slpk-in-browser/src/browser-file.ts | 132 ++++++++++++++++++ .../slpk-in-browser/src/index.tsx | 13 ++ .../slpk-in-browser/tsconfig.json | 27 ++++ 7 files changed, 361 insertions(+) create mode 100644 examples/experimental/slpk-in-browser/package.json create mode 100644 examples/experimental/slpk-in-browser/public/favicon.ico create mode 100644 examples/experimental/slpk-in-browser/public/index.html create mode 100644 examples/experimental/slpk-in-browser/src/App.tsx create mode 100644 examples/experimental/slpk-in-browser/src/browser-file.ts create mode 100644 examples/experimental/slpk-in-browser/src/index.tsx create mode 100644 examples/experimental/slpk-in-browser/tsconfig.json diff --git a/examples/experimental/slpk-in-browser/package.json b/examples/experimental/slpk-in-browser/package.json new file mode 100644 index 0000000000..820ee61e38 --- /dev/null +++ b/examples/experimental/slpk-in-browser/package.json @@ -0,0 +1,55 @@ +{ + "name": "slpk-in-browser1", + "version": "0.1.0", + "private": true, + "dependencies": { + "@deck.gl/core": "^8.9.28", + "@deck.gl/extensions": "^8.9.28", + "@deck.gl/geo-layers": "^8.9.28", + "@deck.gl/layers": "^8.9.28", + "@deck.gl/mesh-layers": "^8.9.28", + "@deck.gl/react": "^8.9.34", + "@loaders.gl/core": "^4.0.0", + "@loaders.gl/schema": "^4.0.0", + "@loaders.gl/i3s": "^4.0.0", + "@loaders.gl/loader-utils": "^4.0.0", + "@loaders.gl/mvt": "^4.0.0", + "@loaders.gl/terrain": "^4.0.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "@types/jest": "^27.5.2", + "@types/node": "^16.18.83", + "@types/react": "^18.2.58", + "@types/react-dom": "^18.2.19", + "maplibre-gl": "^2.4.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "typescript": "^4.9.5", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/examples/experimental/slpk-in-browser/public/favicon.ico b/examples/experimental/slpk-in-browser/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 zcma);c{J4h9>;%nil|2-o+rCuEF-(I%-F}ijC~o(k~HKAkr0)!FCj~d>`RtpD?8b; zXOC1OD!V*IsqUwzbMF1)-gEDD=A573Z-&G7^LoAC9|WO7Xc0Cx1g^Zu0u_SjAPB3vGa^W|sj)80f#V0@M_CAZTIO(t--xg= z!sii`1giyH7EKL_+Wi0ab<)&E_0KD!3Rp2^HNB*K2@PHCs4PWSA32*-^7d{9nH2_E zmC{C*N*)(vEF1_aMamw2A{ZH5aIDqiabnFdJ|y0%aS|64E$`s2ccV~3lR!u<){eS` z#^Mx6o(iP1Ix%4dv`t@!&Za-K@mTm#vadc{0aWDV*_%EiGK7qMC_(`exc>-$Gb9~W!w_^{*pYRm~G zBN{nA;cm^w$VWg1O^^<6vY`1XCD|s_zv*g*5&V#wv&s#h$xlUilPe4U@I&UXZbL z0)%9Uj&@yd03n;!7do+bfixH^FeZ-Ema}s;DQX2gY+7g0s(9;`8GyvPY1*vxiF&|w z>!vA~GA<~JUqH}d;DfBSi^IT*#lrzXl$fNpq0_T1tA+`A$1?(gLb?e#0>UELvljtQ zK+*74m0jn&)5yk8mLBv;=@}c{t0ztT<v;Avck$S6D`Z)^c0(jiwKhQsn|LDRY&w(Fmi91I7H6S;b0XM{e zXp0~(T@k_r-!jkLwd1_Vre^v$G4|kh4}=Gi?$AaJ)3I+^m|Zyj#*?Kp@w(lQdJZf4 z#|IJW5z+S^e9@(6hW6N~{pj8|NO*>1)E=%?nNUAkmv~OY&ZV;m-%?pQ_11)hAr0oAwILrlsGawpxx4D43J&K=n+p3WLnlDsQ$b(9+4 z?mO^hmV^F8MV{4Lx>(Q=aHhQ1){0d*(e&s%G=i5rq3;t{JC zmgbn5Nkl)t@fPH$v;af26lyhH!k+#}_&aBK4baYPbZy$5aFx4}ka&qxl z$=Rh$W;U)>-=S-0=?7FH9dUAd2(q#4TCAHky!$^~;Dz^j|8_wuKc*YzfdAht@Q&ror?91Dm!N03=4=O!a)I*0q~p0g$Fm$pmr$ zb;wD;STDIi$@M%y1>p&_>%?UP($15gou_ue1u0!4(%81;qcIW8NyxFEvXpiJ|H4wz z*mFT(qVx1FKufG11hByuX%lPk4t#WZ{>8ka2efjY`~;AL6vWyQKpJun2nRiZYDij$ zP>4jQXPaP$UC$yIVgGa)jDV;F0l^n(V=HMRB5)20V7&r$jmk{UUIe zVjKroK}JAbD>B`2cwNQ&GDLx8{pg`7hbA~grk|W6LgiZ`8y`{Iq0i>t!3p2}MS6S+ zO_ruKyAElt)rdS>CtF7j{&6rP-#c=7evGMt7B6`7HG|-(WL`bDUAjyn+k$mx$CH;q2Dz4x;cPP$hW=`pFfLO)!jaCL@V2+F)So3}vg|%O*^T1j>C2lx zsURO-zIJC$^$g2byVbRIo^w>UxK}74^TqUiRR#7s_X$e)$6iYG1(PcW7un-va-S&u zHk9-6Zn&>T==A)lM^D~bk{&rFzCi35>UR!ZjQkdSiNX*-;l4z9j*7|q`TBl~Au`5& z+c)*8?#-tgUR$Zd%Q3bs96w6k7q@#tUn`5rj+r@_sAVVLqco|6O{ILX&U-&-cbVa3 zY?ngHR@%l{;`ri%H*0EhBWrGjv!LE4db?HEWb5mu*t@{kv|XwK8?npOshmzf=vZA@ zVSN9sL~!sn?r(AK)Q7Jk2(|M67Uy3I{eRy z_l&Y@A>;vjkWN5I2xvFFTLX0i+`{qz7C_@bo`ZUzDugfq4+>a3?1v%)O+YTd6@Ul7 zAfLfm=nhZ`)P~&v90$&UcF+yXm9sq!qCx3^9gzIcO|Y(js^Fj)Rvq>nQAHI92ap=P z10A4@prk+AGWCb`2)dQYFuR$|H6iDE8p}9a?#nV2}LBCoCf(Xi2@szia7#gY>b|l!-U`c}@ zLdhvQjc!BdLJvYvzzzngnw51yRYCqh4}$oRCy-z|v3Hc*d|?^Wj=l~18*E~*cR_kU z{XsxM1i{V*4GujHQ3DBpl2w4FgFR48Nma@HPgnyKoIEY-MqmMeY=I<%oG~l!f<+FN z1ZY^;10j4M4#HYXP zw5eJpA_y(>uLQ~OucgxDLuf}fVs272FaMxhn4xnDGIyLXnw>Xsd^J8XhcWIwIoQ9} z%FoSJTAGW(SRGwJwb=@pY7r$uQRK3Zd~XbxU)ts!4XsJrCycrWSI?e!IqwqIR8+Jh zlRjZ`UO1I!BtJR_2~7AbkbSm%XQqxEPkz6BTGWx8e}nQ=w7bZ|eVP4?*Tb!$(R)iC z9)&%bS*u(lXqzitAN)Oo=&Ytn>%Hzjc<5liuPi>zC_nw;Z0AE3Y$Jao_Q90R-gl~5 z_xAb2J%eArrC1CN4G$}-zVvCqF1;H;abAu6G*+PDHSYFx@Tdbfox*uEd3}BUyYY-l zTfEsOqsi#f9^FoLO;ChK<554qkri&Av~SIM*{fEYRE?vH7pTAOmu2pz3X?Wn*!ROX ztd54huAk&mFBemMooL33RV-*1f0Q3_(7hl$<#*|WF9P!;r;4_+X~k~uKEqdzZ$5Al zV63XN@)j$FN#cCD;ek1R#l zv%pGrhB~KWgoCj%GT?%{@@o(AJGt*PG#l3i>lhmb_twKH^EYvacVY-6bsCl5*^~L0 zonm@lk2UvvTKr2RS%}T>^~EYqdL1q4nD%0n&Xqr^cK^`J5W;lRRB^R-O8b&HENO||mo0xaD+S=I8RTlIfVgqN@SXDr2&-)we--K7w= zJVU8?Z+7k9dy;s;^gDkQa`0nz6N{T?(A&Iz)2!DEecLyRa&FI!id#5Z7B*O2=PsR0 zEvc|8{NS^)!d)MDX(97Xw}m&kEO@5jqRaDZ!+%`wYOI<23q|&js`&o4xvjP7D_xv@ z5hEwpsp{HezI9!~6O{~)lLR@oF7?J7i>1|5a~UuoN=q&6N}EJPV_GD`&M*v8Y`^2j zKII*d_@Fi$+i*YEW+Hbzn{iQk~yP z>7N{S4)r*!NwQ`(qcN#8SRQsNK6>{)X12nbF`*7#ecO7I)Q$uZsV+xS4E7aUn+U(K baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/examples/experimental/slpk-in-browser/public/index.html b/examples/experimental/slpk-in-browser/public/index.html new file mode 100644 index 0000000000..aa069f27cb --- /dev/null +++ b/examples/experimental/slpk-in-browser/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/examples/experimental/slpk-in-browser/src/App.tsx b/examples/experimental/slpk-in-browser/src/App.tsx new file mode 100644 index 0000000000..a51023ee01 --- /dev/null +++ b/examples/experimental/slpk-in-browser/src/App.tsx @@ -0,0 +1,91 @@ +import React, { useEffect, useState } from 'react'; +import DeckGL from '@deck.gl/react/typed'; + +import {TerrainLayer} from '@deck.gl/geo-layers/typed'; +import {TerrainLoader} from '@loaders.gl/terrain'; +import {parseSLPKArchive} from '@loaders.gl/i3s'; +import {BrowserFile} from './browser-file'; + + +const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line + +const INITIAL_VIEW_STATE = { + latitude: 46.24, + longitude: -122.18, + zoom: 11.5, + bearing: 140, + pitch: 60, + maxPitch: 89 +}; + +const TERRAIN_IMAGE = `https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`; +const SURFACE_IMAGE = `https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.png?access_token=${MAPBOX_TOKEN}`; + +// https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb +// Note - the elevation rendered by this example is greatly exagerated! +const ELEVATION_DECODER = { + rScaler: 6553.6, + gScaler: 25.6, + bScaler: 0.1, + offset: -10000 +}; + +function App({ + texture = SURFACE_IMAGE, + wireframe = false, + initialViewState = INITIAL_VIEW_STATE +}) { + const [fileList, setFileList] = useState(null) + const [fetchObject, setFetchObject] = useState<({fetch: (path: string) => Promise}) | undefined>(undefined) + + useEffect(() => { + if (!fileList) { + return + } + const provider = new BrowserFile(fileList[0]) + const setFetchAsync = async () => { + const slpkFile = await parseSLPKArchive(provider) + const fetch = async (path: string) => { + return await slpkFile.getFile(path, "http") + } + + //simple test, should show root json in console + console.log(new TextDecoder().decode(await fetch(''))) + + setFetchObject({fetch}) + } + + setFetchAsync().catch(console.error); + + }, [fileList]) + + const layer = new TerrainLayer({ + id: 'layer', + minZoom: 0, + maxZoom: 23, + strategy: 'no-overlap', + elevationDecoder: ELEVATION_DECODER, + elevationData: TERRAIN_IMAGE, + texture, + wireframe, + color: [255, 255, 255], + loadOptions: { + terrain: { + skirtHeight: 50 + } + }, + loaders: [TerrainLoader] + }); + + if (fileList) { + if (fetchObject) { + return + } else { + return
Loading...
+ } + } else { + return setFileList(ev.target.files)}/> + } +} + +export default App; diff --git a/examples/experimental/slpk-in-browser/src/browser-file.ts b/examples/experimental/slpk-in-browser/src/browser-file.ts new file mode 100644 index 0000000000..0a7cb16b29 --- /dev/null +++ b/examples/experimental/slpk-in-browser/src/browser-file.ts @@ -0,0 +1,132 @@ +// loaders.gl +// SPDX-License-Identifier: MIT +// Copyright (c) vis.gl contributors +import {FileProvider} from '@loaders.gl/loader-utils'; + +/** + * Provides file data using node fs library + * @deprecated - will be replaced with ReadableFile + */ +export class BrowserFile implements FileProvider { + /** The File object from which data is provided */ + private file: File; + + /** Create a new BrowserFile */ + constructor(file: File) { + this.file = file; + } + /** + * returns an ArrayBuffer whose contents are a copy of this file bytes from startOffset, inclusive, up to endOffset, exclusive. + * @param start The offset, in byte, from the start of the file where to start reading the data. + * @param lenght Length of read data + */ + private async getBytesFromFile(start: number, lenght: number): Promise { + let reader = new FileReader(); + reader.readAsArrayBuffer(this.file.slice(start, start + lenght)); + return new Promise((res, rej) => { + reader.onload = function() { + const arrayBuffer = reader.result + if (!arrayBuffer || typeof arrayBuffer === 'string') { + rej(new Error('something went wrong')); + } else { + res(arrayBuffer) + } + } + }) + } + + /** + * Truncates the file descriptor. + * @param length desired file lenght + */ + async truncate(length: number): Promise { + throw new Error("file loaded in browser cannot be changed"); + } + + /** + * Append data to a file. + * @param buffer data to append + */ + async append(buffer: Uint8Array): Promise { + throw new Error("file loaded in browser cannot be changed"); + } + + /** Close file */ + async destroy(): Promise { + throw new Error("file loaded in browser cannot be changed"); + } + + /** + * Gets an unsigned 8-bit integer at the specified byte offset from the start of the file. + * @param offset The offset, in bytes, from the start of the file where to read the data. + */ + async getUint8(offset: number | bigint): Promise { + const arrayBuffer = await this.getBytesFromFile(Number(offset), 1); + const val = new Uint8Array(arrayBuffer).at(0); + if (val === undefined) { + throw new Error('something went wrong'); + } + return val; + } + + /** + * Gets an unsigned 16-bit integer at the specified byte offset from the start of the file. + * @param offset The offset, in bytes, from the start of the file where to read the data. + */ + async getUint16(offset: number | bigint): Promise { + const arrayBuffer = await this.getBytesFromFile(Number(offset), 2); + const val = new Uint16Array(arrayBuffer).at(0); + if (val === undefined) { + throw new Error('something went wrong'); + } + return val; + } + + /** + * Gets an unsigned 32-bit integer at the specified byte offset from the start of the file. + * @param offset The offset, in bytes, from the start of the file where to read the data. + */ + async getUint32(offset: number | bigint): Promise { + const arrayBuffer = await this.getBytesFromFile(Number(offset), 4); + const val = new Uint32Array(arrayBuffer).at(0); + if (val === undefined) { + throw new Error('something went wrong'); + } + return val; + } + + /** + * Gets an unsigned 32-bit integer at the specified byte offset from the start of the file. + * @param offset The offset, in bytes, from the start of the file where to read the data. + */ + async getBigUint64(offset: number | bigint): Promise { + const arrayBuffer = await this.getBytesFromFile(Number(offset), 8); + const val = new BigInt64Array(arrayBuffer).at(0); + if (val === undefined) { + throw new Error('something went wrong'); + } + return val; + } + + /** + * returns an ArrayBuffer whose contents are a copy of this file bytes from startOffset, inclusive, up to endOffset, exclusive. + * @param startOffset The offset, in byte, from the start of the file where to start reading the data. + * @param endOffset The offset, in bytes, from the start of the file where to end reading the data. + */ + async slice(startOffset: bigint, endOffset: bigint): Promise { + const bigLength = endOffset - startOffset; + if (bigLength > Number.MAX_SAFE_INTEGER) { + throw new Error('too big slice'); + } + const length = Number(bigLength); + + return await this.getBytesFromFile(Number(startOffset), length); + } + + /** + * the length (in bytes) of the data. + */ + get length(): bigint { + return BigInt(this.file.size); + } +} diff --git a/examples/experimental/slpk-in-browser/src/index.tsx b/examples/experimental/slpk-in-browser/src/index.tsx new file mode 100644 index 0000000000..d168d2a340 --- /dev/null +++ b/examples/experimental/slpk-in-browser/src/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const root = ReactDOM.createRoot( + document.getElementById('root') as HTMLElement +); +root.render( + + + +); + diff --git a/examples/experimental/slpk-in-browser/tsconfig.json b/examples/experimental/slpk-in-browser/tsconfig.json new file mode 100644 index 0000000000..f00facecf0 --- /dev/null +++ b/examples/experimental/slpk-in-browser/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es2020", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "checkJs": false, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +}