🌍 Flywave.gl

一个基于 TypeScript 构建的开源 3D 地图渲染引擎

使用 WebGL 和 Three.js 创建高性能、可扩展的 3D 地图可视化解决方案

项目简介

flywave.gl 是一个基于 TypeScript 构建的开源 3D 地图渲染引擎。该项目采用模块化 monorepo 架构，旨在提供一个高性能、可扩展且模块化的 3D 地图渲染解决方案。

您可以使用此引擎来：

🌍 开发视觉上吸引人的 3D 地图 - 利用 WebGL 技术创建沉浸式地图体验
🎨 使用 WebGL 创建高度动画和动态的地图可视化 - 基于流行的 three.js 库
🎨 创建可动态切换的主题地图 - 支持多种地图样式和主题
⚡ 通过高性能的地图渲染和解码创建流畅的地图体验 - Web Workers 并行化 CPU 密集型任务
🔧 模块化设计地图 - 可以根据需要交换模块和数据提供者

系统截图

文档

完整文档 - API 文档、教程、最佳实践
示例集合 - 功能示例、代码片段
开发指南 - 环境搭建、构建说明
快速开始 - 安装、基本使用
问题反馈 - Bug 报告、功能建议
社区讨论 - 技术交流、使用帮助

快速开始

环境要求

Node.js >= 22.15.0 (检查命令: node --version)
pnpm >= 9.0.0 (检查命令: pnpm --version)

安装

使用 pnpm (推荐):

pnpm add @flywave/flywave.gl

或使用 npm:

npm install @flywave/flywave.gl

代码中使用

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

const mapView = new MapView({
  projection: sphereProjection,
  target: new GeoCoordinates(36, 118),
  zoomLevel: 6,
  canvas: document.getElementById("mapCanvas") as HTMLCanvasElement
});

核心功能

🚀 高性能渲染: 利用 WebGL 和现代图形技术实现流畅的 3D 地图渲染
🔧 模块化设计: 可以根据需要选择和组合不同的功能模块
🎨 可扩展主题: 支持动态切换和自定义地图主题
🗺️ 多数据源支持: 支持多种地图数据源格式
🖱️ 丰富的交互功能: 提供完整的地图交互和控制功能
🌍 多种投影方式: 支持球面、平面和椭球投影
🏔️ 地形支持: 内置数字高程模型 (DEM) 支持

许可证

Licensed under the Apache License, Version 2.0.

项目简介​

系统截图​

文档​

快速开始​

环境要求​

安装​

代码中使用​

核心功能​

许可证​