flywave.gl is an open-source 3D map rendering engine built with TypeScript. This project adopts a modular monorepo architecture, aiming to provide a high-performance, scalable, and modular 3D map rendering solution.

• 🌍 Visually Appealing 3D Maps - Create immersive map experiences using WebGL technology
• 🎨 Dynamic Visualizations - Based on the popular three.js library
• 🎨 Thematic Maps - Supports multiple map styles and themes with dynamic switching
• ⚡ High-performance Rendering - Parallelizing CPU-intensive tasks with Web Workers
• 🔧 Modular Design - Modules and data providers can be swapped as needed

There are two ways to install flywave.gl:

# Using npm
npm install @flywave/flywave.gl

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

# Clone repository
git clone https://github.com/flywave/flywave.gl.git
cd flywave.gl

# Install dependencies
pnpm install

# Start development server
pnpm start
# Visit: http://localhost:8080/

• 🚀 High-performance Rendering: Achieve smooth 3D map rendering using WebGL and modern graphics technology
• 🔧 Modular Design: Select and combine different functional modules as needed
• 🎨 Extensible Themes: Support dynamic switching and customizing map themes
• 🗺️ Multi-data Source Support: Support various map data source formats
• 🖱️ Rich Interactive Features: Provide complete map interaction and control functions
• 🌍 Multiple Projection Methods: Support spherical, planar, and ellipsoid projections
• 🏔️ Terrain Support: Built-in Digital Elevation Model (DEM) support

import { 
    MapView, 
    GeoCoordinates, 
    MapControls, 
    sphereProjection,
    ArcGISWebTileDataSource 
} from "@flywave/flywave.gl";

// Initialize map view
const mapView = new MapView({
    projection: sphereProjection,
    target: new GeoCoordinates(39.9042, 116.4074), // Beijing coordinates
    zoomLevel: 10,
    canvas: document.getElementById("mapCanvas")
});

// Create data source
const webTileDataSource = new ArcGISWebTileDataSource();

// Add data source to map
mapView.addDataSource(webTileDataSource);

// Add controls for user interaction
const mapControls = new MapControls(mapView);

We welcome contributions from the community! Please read our Contributing Guide (中文版) to get started.

• Fork the repository
• Create a feature branch
• Commit your changes
• Push to the branch
• Open a pull request

Copyright © 2022-2025 Flywave Project Authors

Licensed under the Apache License, Version 2.0.