diff --git a/package-lock.json b/package-lock.json index 1ef6c6cb6..30b768a01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "0.4.5", "license": "Apache-2.0", "dependencies": { + "@mapbox/vector-tile": "^2.0.3", "@react-three/postprocessing": "^2.16.3", "@takram/three-atmosphere": "^0.6.0", "@takram/three-geospatial": "^0.0.1-alpha.4", "@takram/three-geospatial-effects": "^0.0.1-alpha.4", + "pbf": "^4.0.1", "postprocessing": "^6.36.4" }, "devDependencies": { @@ -3881,6 +3883,23 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mapbox/point-geometry": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz", + "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==", + "license": "ISC" + }, + "node_modules/@mapbox/vector-tile": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.3.tgz", + "integrity": "sha512-Fq8PzBAaBeG3sEZA7Bomlv+8ZJcS5KCD6MRlCqiFrroOLnwZFFSJVydk1J9sneScJq9q4yyGfxKa+i7x2TLG8A==", + "license": "BSD-3-Clause", + "dependencies": { + "@mapbox/point-geometry": "~1.1.0", + "@types/geojson": "^7946.0.14", + "pbf": "^4.0.1" + } + }, "node_modules/@mediapipe/tasks-vision": { "version": "0.10.17", "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz", @@ -5076,6 +5095,12 @@ "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "dev": true }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "license": "MIT" + }, "node_modules/@types/graceful-fs": { "version": "4.1.9", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz", @@ -12971,6 +12996,18 @@ "node": ">=8" } }, + "node_modules/pbf": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz", + "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==", + "license": "BSD-3-Clause", + "dependencies": { + "resolve-protobuf-schema": "^2.1.0" + }, + "bin": { + "pbf": "bin/pbf" + } + }, "node_modules/picocolors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", @@ -13162,6 +13199,12 @@ "node": ">=12.0.0" } }, + "node_modules/protocol-buffers-schema": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz", + "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==", + "license": "MIT" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -13499,6 +13542,15 @@ "node": ">=8" } }, + "node_modules/resolve-protobuf-schema": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz", + "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==", + "license": "MIT", + "dependencies": { + "protocol-buffers-schema": "^3.3.1" + } + }, "node_modules/resolve.exports": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz", diff --git a/package.json b/package.json index 1843fb2da..36fb41bf6 100644 --- a/package.json +++ b/package.json @@ -74,10 +74,12 @@ "react-dom": "^18.3.1" }, "dependencies": { + "@mapbox/vector-tile": "^2.0.3", "@react-three/postprocessing": "^2.16.3", "@takram/three-atmosphere": "^0.6.0", "@takram/three-geospatial": "^0.0.1-alpha.4", "@takram/three-geospatial-effects": "^0.0.1-alpha.4", + "pbf": "^4.0.1", "postprocessing": "^6.36.4" } } diff --git a/src/base/loaders/MVTLoaderBase.d.ts b/src/base/loaders/MVTLoaderBase.d.ts new file mode 100644 index 000000000..d08a60188 --- /dev/null +++ b/src/base/loaders/MVTLoaderBase.d.ts @@ -0,0 +1,14 @@ + + +import { VectorTile } from '@mapbox/vector-tile'; + +export type MVTBaseResult = { + vectorTile: VectorTile +}; + +export class MVTLoaderBase { + + load(url: string): Promise; + parse(buffer: ArrayBuffer): Promise; + +} diff --git a/src/base/loaders/MVTLoaderBase.js b/src/base/loaders/MVTLoaderBase.js new file mode 100644 index 000000000..db03e3580 --- /dev/null +++ b/src/base/loaders/MVTLoaderBase.js @@ -0,0 +1,16 @@ +// MVT File Format +// https://github.com/mapbox/vector-tile-spec/blob/master/2.1/README.md + +import { LoaderBase } from './LoaderBase.js'; +import { VectorTile } from '@mapbox/vector-tile'; +import Protobuf from 'pbf'; + +export class MVTLoaderBase extends LoaderBase { + + parse(buffer) { + const vectorTile = new VectorTile(new Protobuf(buffer)); + return Promise.resolve({ vectorTile }); + } + +} + diff --git a/src/three/loaders/MVTLoader.d.ts b/src/three/loaders/MVTLoader.d.ts new file mode 100644 index 000000000..b35b94fb7 --- /dev/null +++ b/src/three/loaders/MVTLoader.d.ts @@ -0,0 +1,22 @@ +import { MVTBaseResult, MVTLoaderBase } from '../../base/loaders/MVTLoaderBase'; +import { Group, LoadingManager } from 'three'; + +interface MVTScene extends Group { + + vectorTile: VectorTile + +} + +export interface MVTResult extends MVTBaseResult { + + scene: MVTScene; + +} + +export class MVTLoader extends MVTLoaderBase { + + constructor(manager: LoadingManager); + load(url: string): Promise; + parse(buffer: ArrayBuffer): Promise; + +} diff --git a/src/three/loaders/MVTLoader.js b/src/three/loaders/MVTLoader.js new file mode 100644 index 000000000..7002d2553 --- /dev/null +++ b/src/three/loaders/MVTLoader.js @@ -0,0 +1,33 @@ + +import { + Points, + PointsMaterial, + BufferGeometry, + BufferAttribute, + DefaultLoadingManager, + Vector3, + Color, +} from 'three'; + +export class MVTLoader extends MVTLoaderBase { + + constructor(manager = DefaultLoadingManager) { + + super(); + this.manager = manager; + + } + + parse(buffer) { + + return super.parse(buffer).then(async (result) => { + + const { vectorTile } = result; + + return result; + + }); + + } + +}