1. Project Overview

 Flywave.gl

An open-source 3D map rendering engine built with TypeScript

A high-performance, extensible 3D map visualization solution powered by WebGL and Three.js
flywave.gl is an open-source 3D map rendering engine built with TypeScript. The project adopts a modular monorepo architecture and aims to provide a high-performance, extensible, and modular 3D map rendering solution.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Function Demonstration

4. Feature Overview

Core Capabilities

• Visually Appealing 3D Maps
   - Create immersive mapping experiences using WebGL technology
• Dynamic Visual Effects
   - Powered by the popular three.js library
• Thematic Maps
   - Supports dynamically switching between multiple map styles and themes
• High-performance rendering - Parallelizes CPU-intensive tasks using Web Workers
• Modular design
   - Modules and data providers can be swapped as needed

Core Function

• High-performance rendering
  Achieve smooth 3D map rendering using WebGL and modern graphics technologies
• Modular design
  Select and combine different functional modules as needed
• Extensible Themes
  Supports dynamic switching and custom map themes
• ️ Multiple data source support: Supports multiple map data source formats
• ️ Rich Interactive Features: Provides comprehensive map interaction and control features
• Multiple Projection Methods
  Supports spherical, planar, and ellipsoidal projections
• ️ Terrain Support: Built-in support for Digital Elevation Models (DEM)

5. Tech Stack

Quick Start

 Environment Requirements

️ Installation Steps

There are two ways to install flywave.gl:

Install directly using npm (recommended for projects)

# Using npm
npm install @flywave/flywave.gl
# Using pnpm (recommended)
pnpm add @flywave/flywave.gl

Install from Source (for development)

# Clone the repository
git clone flywave.gl
cd flywave.gl
# Install dependencies
pnpm install
# Start the Development Server
pnpm start
# Visit:http://localhost:8080/

Production Build

Usage Examples

Basic Map with Data Sources

import {
    MapView,
    GeoCoordinates,
    MapControls,
    sphereProjection,
    ArcGISWebTileDataSource
} from "@flywave/flywave.gl";
// Initialize the map view
const mapView = new MapView({
    projection: sphereProjection,
    target: new GeoCoordinates(39.9042, 116.4074), // Beijing coordinates
    zoomLevel: 10,
    canvas: document.getElementById("mapCanvas")
});
// Create a data source
const webTileDataSource = new ArcGISWebTileDataSource();
// Add the data source to the map
mapView.addDataSource(webTileDataSource);
// Add controls to support user interaction
const mapControls = new MapControls(mapView);