---
title: 文件和统计
---

<script lang="ts">
    import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
</script>

# { title }

## 文件列表

所有 [已打开](./menu/file) 文件将出现在地图底部，并显示为不同标签页。
拖拽标签页可重新排序。
当文件较多时，支持在标签页列表中进行滚动切换。

<DocsNote>

使用鼠标时，须按住 <kbd>Shift</kbd> 以水平滚动。

</DocsNote>

### 文件选择

点击标签页，可在文件之间切换以检查其统计数据，或执行 [编辑](./menu/edit) 和 [工具](./toolbar) 操作。
按住 <kbd>Ctrl/Cmd</kbd> 键可选中/取消选中文件，按住 <kbd>Shift</kbd> 以多选。
大多数 [编辑](./menu/edit) 和 [工具](./toolbar) 操作支持同时应用于多个文件。

<DocsNote>

支持使用键盘上的箭头键浏览文件，并使用 <kbd>Shift</kbd> 多选。

</DocsNote>

### 编辑

右键点击文件标签页，可访问与 [编辑](./menu/edit) 中相同的操作。

### 树形布局

正如 [显示](./menu/view) 中所述，文件列表可切换为树形布局。
此布局非常适合管理大量已打开的文件，文件将被组织成一个纵向列表并显示在地图右侧。
在文件树中，展开可折叠部分可检查其中所包含的 [轨迹、路段和兴趣点](./gpx) 等要素。

[编辑](./menu/edit) 和 [工具](./toolbar) 亦可被用于文件内部要素。
此外，拖拽内部要素可对其重新排序，或将它们移动到其他层级甚至另一个文件中。

<DocsNote>

拖拽地图和文件列表之间的分隔符可以调整后者大小。

</DocsNote>

## 海拔剖面图和统计数据

已选择文件的海拔剖面图和统计数据位于界面底部。

<DocsNote>

拖拽地图和海拔剖面图之间的分隔符可以调整后者大小。

</DocsNote>

### 交互式数据

将鼠标悬停在海拔剖面图上，光标位置将显示相关统计数据。

若想获取特定部分的统计数据，可在图上拖拽以形成一个矩形选区。
点击剖面图将重置选区。

海拔剖面图可通过鼠标滚轮进行缩放，或按住 <kbd>Shift</kbd> 键并用鼠标拖动以左右移动。

<div class="h-48 w-full">
    <ElevationProfile
        {gpxStatistics}
        {slicedGPXStatistics}
        additionalDatasets={$additionalDatasets}
        elevationFill={$elevationFill}
    />
</div>
<div class="flex flex-col items-center -mt-6">
    <div class="h-10 w-fit">
        <GPXStatistics
            {gpxStatistics}
            {slicedGPXStatistics}
            panelSize={120}
            orientation={'horizontal'}
        />
    </div>
</div>

### 补充数据

使用海拔剖面图右下方的 <kbd><ChartNoAxesColumn size="16" class="inline-block" style="margin-bottom: 2px"/></kbd> 按钮，支持通过以下方式为其着色：

- 根据海拔数据计算得到的 **坡度** 信息
- 或来自 <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> 的 <a href="https://wiki.openstreetmap.org/wiki/Key:surface" target="_blank">surface</a> 和 <a href="https://wiki.openstreetmap.org/wiki/Key:highway" target="_blank">highway</a> 标签。
  注意，该方法仅适用于通过 **gpx.studio** 创建的文件。

其中亦可展示 **速度**、**心率**、**节奏**、**温度** 和 **功率** 等数据。