Project autk-map

Expand description

autk-map: 3D Map Visualization Library

Autark Logo

autk-map is a 3D map visualization library built using WebGPU. The library can handle data in GeoJSON, GeoTIFF, and OBJ formats.

The library can be used standalone or in conjunction with other Autark modules. To facilitate adoption, we provide a large collection of examples in the example/map directory, demonstrating its functionalities both as an independent library and as part of the Autark ecosystem.

aut-map is available on NPM. To install it, run:

# autk-map
npm install -save autk-map

You'll need Node.js installed to build and run this project for development purposes. Please check the Node.js website for instructions.

Also, we use GNU Make to automate the building process. To install it, please use one of the following commands (we recommend using the package manager Chocolatey on Windows):

# Windows
choco install make

# macOS
xcode-select --install

# Debian/Ubuntu
sudo apt-get install build-essential

After istalling Node,js and GNU Make, in the root folder of the project, run the following command to install required packages:

make install

After installing the required packages, run the following command to start the development server:

make dev

There are several examples in the example/ directory that can be loaded to test Autark. To open an example different from the default, you can either change the address in the browser or update the server.open attribute in the examples/vite.config.ts file. If you decide to edit the Vite file, you must run make dev again.

Autark requires WebGPU. Please make sure to have it enabled in your browser. In Chrome or Edge (v113+), it's enabled by default. In Firefox, WebGPU is only available in Nightly builds and must be explicitly enabled:

  1. Download and install Firefox Nightly.
  2. Visit about:config.
  3. Set dom.webgpu.enabled to true.
  4. (Optional) You may also need to enable gfx.webgpu.enabled and gfx.webgpu.force-enabled.
  5. Restart Firefox.

Type Aliases§

Source§

type ColorHEX = `#${string}`

Represents a color in hexadecimal format.

example
"#FF5733"
Source§

type ColorRGB = ColorRGB

Represents a color in RGB format, with red, green, blue components and an opacity.

example
{ r: 255, g: 87, b: 51, opacity: 1 }
Source§

type ColorTEX = number[]

Represents a texture of colors as an array of numbers. Each group of four numbers represents a color in RGBA format.

example
[255, 87, 51, 1, 236, 12, 34, 0.8, ...]
Source§

type MapEventListener = (selection: number[] | string[], layerId: string) => void

Map event listener type.

Enumerations§

ColorMapInterpolator

Color map interpolators for thematic data visualization.

LayerType

The types of layer supported in autk-map.

MapEvent

Map events for interaction.

MouseStatus

Mouse status for interaction state.

ThematicAggregationLevel

Thematic aggregation levels for thematic data.

Classes§

AutkMap

The main autark map class.

AutkMapUi

Map UI class for managing the user interface elements of the map.

Camera

Camera class for managing the view parameters and transformations in a 3D space. It provides methods to manipulate the camera position, orientation, and projection.

ColorMap

ColorMap class provides methods to handle color mapping and interpolation. It allows retrieval of colors based on values and color map interpolators, as well as conversion between RGB and HEX color formats.

KeyEvents

KeyEvents class handles keyboard interactions with the map. It allows toggling layer properties and changing map styles using keyboard shortcuts.

Layer

Base class for map layers. This class provides the basic structure and functionality for all map layers.

LayerBbox
LayerManager

Manages the layers of the map.

MapEvents

Class to handle map events. It allows adding, removing, and emitting events for map interactions.

MapStyle
MouseEvents

MouseEvents class handles mouse interactions with the map. It allows for panning, zooming, and picking features on the map.

Pipeline

Abstract class representing a rendering pipeline. It provides methods for creating camera and color uniform bind groups, updating camera and color uniforms, and defining the structure for building and rendering the pipeline.

PipelineBuildingSSAO

PipelineBuildingSSAO is a rendering pipeline for drawing 3D buildings with SSAO (Screen Space Ambient Occlusion). It uses WebGPU to render the buildings in two passes: one for normal and color maps, and another for SSAO computation.

PipelineTriangleBorder

PipelineBorderFlat is a rendering pipeline for drawing flat borders of triangles in 2D space. It uses WebGPU to render lines based on the provided border data.

PipelineTriangleFlat

PipelineTriangleFlat is a rendering pipeline for drawing flat triangles in 2D space. It uses WebGPU to render triangles based on the provided mesh data.

PipelineTrianglePicking

PipelineTrianglePicking is a rendering pipeline for picking triangles in 2D space. It uses WebGPU to render triangles and allows for picking by encoding object IDs in vertex colors.

PipelineTriangleRaster

PipelineTriangleRaster is a rendering pipeline for drawing rasterized triangles. It uses WebGPU to render triangles based on the provided mesh data.

RasterLayer

Base class for map layers. This class provides the basic structure and functionality for all map layers.

Renderer
Triangles2DLayer

Triangles2DBorder class extends Triangles2DLayer to handle rendering of borders in 2D triangles layers. It manages the border positions and indices, and creates a specific rendering pipeline for borders.

Triangles3DLayer

Triangles3DLayer class extends Triangles2DLayer to handle rendering of 3D triangles layers. It manages the normals and creates a specific rendering pipeline for 3D triangles.

TriangulatorBuildings

Class for triangulating buildings from GeoJSON features. It provides methods to convert different geometry types into building meshes.

TriangulatorPoints

Class for triangulating points from GeoJSON features. It provides methods to convert different geometry types into point meshes.

TriangulatorPolygons

Class for triangulating polygons from GeoJSON features. It provides methods to convert different geometry types into polygon meshes.

TriangulatorPolylines

Class for triangulating polylines from GeoJSON features. It provides methods to convert different geometry types into polyline meshes.

TriangulatorRaster

Class for triangulating polylines from GeoJSON features. It provides methods to convert different geometry types into polyline meshes.

VectorLayer

Vector layer class extends Layer to handle vector data. It manages the positions, thematic data, indices, and components of the layer, as well as the rendering pipelines.

Interfaces§

ICameraData

Interface for camera data.

ILayerBorder

Interface for layer border information.

ILayerBorderComponent

Interface for layer border components.

ILayerComponent

Interface for layer components.

ILayerData

Interface for layer border information.

ILayerGeometry

Interface for layer geometry information.

ILayerInfo

Interface for layer information.

ILayerRenderInfo

Interface for layer render information.

ILayerThematic

Interface for layer thematic data.

IMapStyle

Interface for map styles.

IRasterData

Interface for raster data.