An open-source 3D map rendering engine built with TypeScript
Creating high-performance, scalable 3D map visualization solutions using WebGL and Three.js
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
 |  |  |
 |  |  |
 |  |  |
 |  |  |
| Tool | Version | Check Command |
|---|---|---|
| Node.js | >= 22.15.0 | node --version |
| pnpm | >= 9.0.0 | pnpm --version |
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 viewconstmapView=newMapView({projection: sphereProjection,target: newGeoCoordinates(39.9042,116.4074),// Beijing coordinateszoomLevel: 10,canvas: document.getElementById("mapCanvas")});// Create data sourceconstwebTileDataSource=newArcGISWebTileDataSource();// Add data source to mapmapView.addDataSource(webTileDataSource);// Add controls for user interactionconstmapControls=newMapControls(mapView);| 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 |
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.
Made with ❤️ by the Flywave Community
