🌍 Flywave.gl

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

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

快速开始 · 文档 · 示例

项目简介

@flywave/flywave.gl 是 flywave.gl 项目的完整功能包，集成了所有核心模块，提供了一个功能齐全的 3D 地图渲染引擎。该包采用模块化设计，旨在提供一个高性能、可扩展且模块化的 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, 
    MapControls, 
    sphereProjection,
    ArcGISWebTileDataSource 
} from "@flywave/flywave.gl";

// 初始化地图视图
const mapView = new MapView({
    projection: sphereProjection,
    target: new GeoCoordinates(39.9042, 116.4074), // 北京坐标
    zoomLevel: 10,
    canvas: document.getElementById("mapCanvas")
});

// 创建数据源
const webTileDataSource = new ArcGISWebTileDataSource();

// 添加数据源到地图
mapView.addDataSource(webTileDataSource);

// 添加控制以支持用户交互
const mapControls = new MapControls(mapView);

核心功能

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

许可证

Copyright © 2022-2025 Flywave 项目作者

Licensed under the Apache License, Version 2.0.