GpxViewer Vue Component Library

一个基于 Vue 3 的 GPX 文件查看器组件库，支持在地图上显示 GPX 轨迹数据、高程图表和统计信息。

✨ 特性

• 🗺️ 基于高德地图的轨迹展示
• 📊 高程图表可视化
• 📈 详细的运动统计信息
• 🎯 支持拖拽上传 GPX 文件
• 🎨 使用原生 CSS 构建的现代化 UI
• 📦 纯组件库，无路由依赖，无 UnoCSS 依赖
• 🔧 TypeScript 支持

📦 安装

打包组件库

pnpm build:lib

打包后的文件会输出到 dist 目录。

在新项目中使用

pnpm add vue@^3.0.0 @amap/amap-jsapi-loader@^1.0.1 echarts@^6.0.0 fast-xml-parser@^5.3.3

🚀 快速开始

使用组件

<template>
  <div style="width: 100%; height: 100vh;">
    <GpxViewer :map-key="'your-amap-key'" />
  </div>
</template>

<script setup lang="ts">
import { GpxViewer } from './libs/gpx-viewer/gpx-viewer.es.js'
import './libs/gpx-viewer/gpx-viewer.css'
</script>

📚 文档

• 方案一配置指南 - 详细的使用配置说明
• 使用文档 - 完整的使用文档
• 快速示例 - 快速开始示例

🛠️ 开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 打包组件库
pnpm build:lib

# 类型检查
pnpm typecheck

# 代码检查
pnpm lint

📝 导出内容

组件

• GpxViewer - 主组件
• GEcharts - 高程图表组件
• GSummar - 统计信息组件

Hooks

• useFileDrop - 文件拖拽 Hook
• useMap - 地图 Hook

工具函数

• parseGPX - 解析 GPX XML 字符串
• parseGPXFile - 解析 GPX 文件
• calculateGPXStatistics - 计算统计信息
• convertGPXToMapPath - 转换为地图路径
• calculatePathBounds - 计算路径边界
• extractElevationData - 提取高程数据

类型

• GPXData
• GPXPoint
• GPXWaypoint
• GPXRoute
• GPXTrack
• GPXStatistics
• 等等...

📄 License

MIT