I have following program to render cesium point tiles using deck.gl:
<code>import { load } from '@loaders.gl/core';
import {Tileset3D} from '@loaders.gl/tiles';
import { CesiumIonLoader } from '@loaders.gl/3d-tiles';
import { WebMercatorViewport } from '@deck.gl/core';
import { Deck } from '@deck.gl/core';
import { TileLayer } from '@deck.gl/geo-layers';
const tilesetUrl = 'http://localhost/mytileset/tileset.json';
const options = { ion: { loadGLTF: true } };
const tilesetJson = await load(tilesetUrl, CesiumIonLoader, {...options});
// Setup the viewport using Web Mercator
const latitude = 18.5204;
const longitude = 73.8567;
const zoom = 14;
const viewport = new WebMercatorViewport({ latitude, longitude, zoom });
const tileset3d = new Tileset3D(tilesetJson, {
throttleRequests: false,
onTileLoad: (tile) => console.log(tile)
});
tileset3d.selectTiles(viewport);
// visible tiles
const visibleTiles = tileset3d.tiles.filter((tile) => tile.selected);
while (!tileset3d.isLoaded()) {
await tileset3d.selectTiles(viewport);
}
// Create a Deck.gl TileLayer to display the tileset
const tileLayer = new TileLayer({
id: 'tile-layer',
data: tilesetJson,
onTileLoad: (tile) => console.log('Tile loaded: ', tile),
onTileUnload: (tile) => console.log('Tile unloaded: ', tile),
minZoom: 0,
maxZoom: 19,
renderSubLayers: (props) => {
const { deck, tile, viewport } = props;
return []; // Render sublayers here if needed
}
});
// Create the Deck.gl instance and render the map
const deckgl = new Deck({
container: 'app', // The ID of the HTML container to render the map
layers: [tileLayer],
initialViewState: viewport,
controller: true,
});
</code>
<code>import { load } from '@loaders.gl/core';
import {Tileset3D} from '@loaders.gl/tiles';
import { CesiumIonLoader } from '@loaders.gl/3d-tiles';
import { WebMercatorViewport } from '@deck.gl/core';
import { Deck } from '@deck.gl/core';
import { TileLayer } from '@deck.gl/geo-layers';
const tilesetUrl = 'http://localhost/mytileset/tileset.json';
const options = { ion: { loadGLTF: true } };
const tilesetJson = await load(tilesetUrl, CesiumIonLoader, {...options});
// Setup the viewport using Web Mercator
const latitude = 18.5204;
const longitude = 73.8567;
const zoom = 14;
const viewport = new WebMercatorViewport({ latitude, longitude, zoom });
const tileset3d = new Tileset3D(tilesetJson, {
throttleRequests: false,
onTileLoad: (tile) => console.log(tile)
});
tileset3d.selectTiles(viewport);
// visible tiles
const visibleTiles = tileset3d.tiles.filter((tile) => tile.selected);
while (!tileset3d.isLoaded()) {
await tileset3d.selectTiles(viewport);
}
// Create a Deck.gl TileLayer to display the tileset
const tileLayer = new TileLayer({
id: 'tile-layer',
data: tilesetJson,
onTileLoad: (tile) => console.log('Tile loaded: ', tile),
onTileUnload: (tile) => console.log('Tile unloaded: ', tile),
minZoom: 0,
maxZoom: 19,
renderSubLayers: (props) => {
const { deck, tile, viewport } = props;
return []; // Render sublayers here if needed
}
});
// Create the Deck.gl instance and render the map
const deckgl = new Deck({
container: 'app', // The ID of the HTML container to render the map
layers: [tileLayer],
initialViewState: viewport,
controller: true,
});
</code>
import { load } from '@loaders.gl/core';
import {Tileset3D} from '@loaders.gl/tiles';
import { CesiumIonLoader } from '@loaders.gl/3d-tiles';
import { WebMercatorViewport } from '@deck.gl/core';
import { Deck } from '@deck.gl/core';
import { TileLayer } from '@deck.gl/geo-layers';
const tilesetUrl = 'http://localhost/mytileset/tileset.json';
const options = { ion: { loadGLTF: true } };
const tilesetJson = await load(tilesetUrl, CesiumIonLoader, {...options});
// Setup the viewport using Web Mercator
const latitude = 18.5204;
const longitude = 73.8567;
const zoom = 14;
const viewport = new WebMercatorViewport({ latitude, longitude, zoom });
const tileset3d = new Tileset3D(tilesetJson, {
throttleRequests: false,
onTileLoad: (tile) => console.log(tile)
});
tileset3d.selectTiles(viewport);
// visible tiles
const visibleTiles = tileset3d.tiles.filter((tile) => tile.selected);
while (!tileset3d.isLoaded()) {
await tileset3d.selectTiles(viewport);
}
// Create a Deck.gl TileLayer to display the tileset
const tileLayer = new TileLayer({
id: 'tile-layer',
data: tilesetJson,
onTileLoad: (tile) => console.log('Tile loaded: ', tile),
onTileUnload: (tile) => console.log('Tile unloaded: ', tile),
minZoom: 0,
maxZoom: 19,
renderSubLayers: (props) => {
const { deck, tile, viewport } = props;
return []; // Render sublayers here if needed
}
});
// Create the Deck.gl instance and render the map
const deckgl = new Deck({
container: 'app', // The ID of the HTML container to render the map
layers: [tileLayer],
initialViewState: viewport,
controller: true,
});
On chrome console I see no error and tile loading related messages displayed. But no point data is rendered on page.
What am I missing in this code?
PS: My index.html is
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeckGL + Cesium Ion Tiles Viewer</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- This is the container where Deck.gl will render the map -->
<div id="app"></div>
<!-- Include your main JavaScript file -->
<script type="module" src="index.js"></script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeckGL + Cesium Ion Tiles Viewer</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- This is the container where Deck.gl will render the map -->
<div id="app"></div>
<!-- Include your main JavaScript file -->
<script type="module" src="index.js"></script>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeckGL + Cesium Ion Tiles Viewer</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- This is the container where Deck.gl will render the map -->
<div id="app"></div>
<!-- Include your main JavaScript file -->
<script type="module" src="index.js"></script>
</body>
</html>