@loaders.gl/tiles

What is @loaders.gl/tiles?

@loaders.gl/tiles is a JavaScript library designed to handle various types of tiled data formats. It provides tools for loading, parsing, and visualizing tile-based data, which is commonly used in mapping and 3D visualization applications.

What are @loaders.gl/tiles's main functionalities?

Loading Tile Data

This feature allows you to load tile data from a given URL. The example demonstrates how to load a 3D Tiles tileset using the `Tiles3DLoader`.

const { load } = require('@loaders.gl/core');
const { Tiles3DLoader } = require('@loaders.gl/3d-tiles');

async function loadTiles(url) {
  const tileset = await load(url, Tiles3DLoader);
  console.log(tileset);
}

loadTiles('https://example.com/tileset.json');

Parsing Tile Data

This feature allows you to parse raw tile data into a usable format. The example shows how to parse an ArrayBuffer containing 3D tile data.

const { parse } = require('@loaders.gl/core');
const { Tiles3DLoader } = require('@loaders.gl/3d-tiles');

async function parseTileData(arrayBuffer) {
  const tile = await parse(arrayBuffer, Tiles3DLoader);
  console.log(tile);
}

// Assume arrayBuffer is obtained from a fetch request
parseTileData(arrayBuffer);

Visualizing Tile Data

This feature allows you to visualize tile data using Deck.gl. The example demonstrates how to create a `Tile3DLayer` to visualize a 3D Tiles tileset.

const { load } = require('@loaders.gl/core');
const { Tiles3DLoader } = require('@loaders.gl/3d-tiles');
const { Deck } = require('@deck.gl/core');
const { Tile3DLayer } = require('@deck.gl/geo-layers');

async function visualizeTiles(url) {
  const tileset = await load(url, Tiles3DLoader);
  const deck = new Deck({
    initialViewState: {
      longitude: -122.4,
      latitude: 37.8,
      zoom: 14
    },
    controller: true,
    layers: [
      new Tile3DLayer({
        id: 'tile-3d-layer',
        tileset
      })
    ]
  });
}

visualizeTiles('https://example.com/tileset.json');

Other packages similar to @loaders.gl/tiles

cesium

Cesium is a JavaScript library for creating 3D globes and maps. It supports 3D Tiles and provides extensive tools for visualizing and interacting with geospatial data. Compared to @loaders.gl/tiles, Cesium offers a more comprehensive suite of features for 3D visualization but can be more complex to integrate.

mapbox-gl

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It supports vector tiles and raster tiles, making it suitable for 2D and 3D map visualizations. While it is highly optimized for performance and ease of use, it does not natively support 3D Tiles like @loaders.gl/tiles.

three

Three.js is a popular JavaScript library for 3D graphics on the web. It provides a wide range of features for rendering 3D objects, including support for various tile formats through extensions. However, it requires more manual setup and does not offer built-in support for 3D Tiles, unlike @loaders.gl/tiles.

README

@loaders.gl/tiles (Experimental)

This module contains the common components for tiles loaders, i.e. 3D tiles.

loaders.gl is a collection of loaders for big data visualizations.

For documentation please visit the website.

Changelog

v4.3.0-alpha.4

• fix(mvt): Add mvt-worker.js bundle to exports path (#3035)
• chore(deps): bump braces from 3.0.2 to 3.0.3 (#3027)
• Tiles traverser: do not check for visibility in canTraverse. (#3032)
• feat(tile-converter): Option not to use Geod transformation (#3033)
• Send json data as object rather then Buffer (#3031)
• feat(copc): Now module for COPC format (#3030)
• chore(loader-utils): Example working on range requests (#2966)
• fix(core): checkResponse crash when Request body is already used (#3026)
• feat(pmtiles): Experimental PMTilesLoader (#3023)
• Add Open.js Code Of Conduct File (#3022)
• docs: Release notes for 4.3 (#3020)
• fix(examples): geoparquet tooltips (#3021)
• examples: Modernize pointcloud example (#3018)
• feat(ktx2): Support loading mipmaps in KTX2 textures (#2999)
• examples: modernize WMS example (#3019)
• chore(tile-converter): upgrade node in the docker image (#3017)
• chore: CHANGELOG.md (#3016)
• chore: gitHead change