🌍 Flywave.gl

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

Creating high-performance, scalable 3D map visualization solutions using WebGL and Three.js

🇨🇳 中文版本 • 📚 Documentation • 🎯 Examples

🌟 Overview

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.

🔧 Key Capabilities

• 🌍 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

📸 Showcase

🚀 Getting Started

📋 Prerequisites

Tool	Version	Check Command
Node.js	>= 22.15.0	node --version
pnpm	>= 9.0.0	pnpm --version

🛠️ Installation

There are two ways to install flywave.gl:

Direct npm Installation (Recommended for projects)

# Using npm
npm install @flywave/flywave.gl

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

From Source (For development)

# 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/

📦 Building for Production

🎯 Core Features

• 🚀 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

💡 Usage Examples

Basic Map with Data Source

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);

📚 Resources

Resource	Description	Link
📖 Documentation	API docs, tutorials, best practices	flywave.github.io/flywave.gl/docs
🎯 Examples	Functional examples, code snippets	flywave.github.io/flywave.gl/examples
🏠 Website	Project homepage, latest news	flywave.github.io/flywave.gl
🐛 Issues	Bug reports, feature suggestions	GitHub Issues
💬 Discussions	Technical exchanges, usage help	GitHub Discussions

🤝 Contributing

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

📄 License

Copyright © 2022-2025 Flywave Project Authors

Licensed under the Apache License, Version 2.0.

Made with ❤️ by the Flywave Community