Google Maps 3D Tiles × loaders.gl

loader-playground.js

import { load } from '@loaders.gl/core';
import { LoaderContext } from '@loaders.gl/core';
import { Tiles3DLoader } from '@loaders.gl/3d-tiles';
import { Tileset3D } from '@loaders.gl/tiles';
import { WebMercatorViewport } from '@deck.gl/core';

const apiKey = '<insertKey>';

async function fetchRootTileset() {
	const baseURL = 'https://tile.googleapis.com'
	const rootTilesetURL = `${baseURL}/v1/3dtiles/root.json?key=${apiKey}`;

	try {
		const response = await fetch(rootTilesetURL);
		if (response.ok) {
			const rootTileset = await response.json();
			const uri = rootTileset.root.children[0].children[0].content.uri;
			
			const completeURL = `${baseURL}${uri}&key=${apiKey}`;
			//const completeURL = `${baseURL}${uri}`;

			return completeURL;
		} else {
			throw new Error('Failed to fetch root tileset.');
		}
	} catch (error) {
		console.error('Error fetching root tileset:', error);
	}
}

async function loadTiles(urlString) {
	const loadOptions = {
		fetch: {
			headers: { 'X-GOOG-API-KEY': apiKey }
		}
	};
	const options = { 
		loadOptions: { ...loadOptions }
	};

	console.log("options", options);

	const tilesetJson = await load(urlString, Tiles3DLoader, options.loadOptions);
	const tileset = new Tileset3D(tilesetJson, {
		onTileLoad: (tile) => {
			console.log("New tile loaded.")
			console.log(tile)
		},
		onTileError: (tile, error) => {
			console.log("Tile Error: ", error)
		},
		...options
	});

	console.log('params: ', tileset.queryParams);

	const viewport = new WebMercatorViewport({
		width: 600,
		height: 600,
		longitude: 13.40802,
		latitude: 52.51874,
		zoom: 12,
		pitch: 30,
		bearing: 15
	});

	// set initial viewport
	tileset.update(viewport);
}

fetchRootTileset()
	.then((url) => {
		console.log('Complete URL:', url);
    	
    	loadTiles(url);
	});