mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-12-02 10:02:12 +00:00
71 lines
3.2 KiB
Plaintext
71 lines
3.2 KiB
Plaintext
---
|
|
title: 地图控件
|
|
---
|
|
|
|
<script>
|
|
import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
|
|
import DocsNote from '$lib/components/docs/DocsNote.svelte';
|
|
import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
|
|
</script>
|
|
|
|
# { title }
|
|
|
|
地图控件位于界面右侧。
|
|
包含导航、缩放以及在不同地图样式之间切换等功能。
|
|
|
|
### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> 导航
|
|
|
|
顶部的控件用于放大 <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> 和缩小 <Minus size="16" class="inline-block" style="margin-bottom: 2px" />，以及更改地图的方位和倾角 <Compass size="16" class="inline-block" style="margin-bottom: 2px" />。
|
|
|
|
<DocsNote>
|
|
|
|
也可在按住 <kbd>Ctrl</kbd> 的同时用鼠标拖拽地图实现此功能。
|
|
|
|
</DocsNote>
|
|
|
|
### <Search size="16" class="inline-block" style="margin-bottom: 2px" /> 搜索
|
|
|
|
使用搜索栏查找地址并在地图上定位它。
|
|
|
|
### <LocateFixed size="16" class="inline-block" style="margin-bottom: 2px" /> 定位
|
|
|
|
点击定位按钮，地图将以设备当前位置为中心。
|
|
|
|
<DocsNote>
|
|
|
|
该操作仅在浏览器和 <b>gpx.studio</b> 被允许访问设备位置时生效。
|
|
|
|
</DocsNote>
|
|
|
|
### <PersonStanding size="16" class="inline-block" style="margin-bottom: 2px" /> 街景
|
|
|
|
用于在地图上启用街景模式。
|
|
根据 [设置](./menu/settings) 中选择的街景图源进行访问：
|
|
|
|
- <a href="https://www.mapillary.com/" target="_blank">Mapillary</a>：街景覆盖范围显示为绿线。 当地图缩放层级足够大时，将以绿点显示街景中可用的确切位置。 此时将鼠标悬停其上，可显示该位置的街景；
|
|
- <a href="https://www.google.com/streetview/" target="_blank">Google Street View</a>：点击地图可打开一个带有当前位置街景的新标签页；
|
|
|
|
### <Layers size="16" class="inline-block" style="margin-bottom: 2px" /> 图层
|
|
|
|
此按钮支持切换地图底图、叠加层和兴趣点类别：
|
|
|
|
- **底图** 是显示世界主要地理特征的背景图。
|
|
根据其用途，它具有不同的样式和详细程度，
|
|
但同时只能显示一张底图；
|
|
- **叠加层** 位于底图上方，提供补充信息；
|
|
- **兴趣点** 用来显示地图上不同类别的地点，如商店、餐馆或住宿等；
|
|
|
|
<div class="flex flex-col items-center">
|
|
<DocsLayers />
|
|
<span class="text-sm text-center mt-2">
|
|
将鼠标悬停在 <a href="https://www.mapbox.com/maps/outdoors" target="_blank">Mapbox Outdoors</a> 底图上可显示 <a href="https://hiking.waymarkedtrails.org" target="_blank">Waymarked Trails hiking</a> 数据
|
|
</span>
|
|
</div>
|
|
|
|
**gpx.studio** 提供了大量全球和本地的底图、叠加层以及精选的兴趣点类别等数据，
|
|
可在 [图层](./menu/settings) 设置中启用它们。
|
|
|
|
还可以设置叠加层的不透明度。
|
|
|
|
本站还支持通过添加 <a href="https://en.wikipedia.org/wiki/Web_Map_Tile_Service" target="_blank">WMTS</a>、<a href="https://en.wikipedia.org/wiki/Web_Map_Service" target="_blank">WMS</a> 或 <a href="https://docs.mapbox.com/help/glossary/style/" target="_blank">Mapbox style JSON</a> 链接的方式来自定义底图和叠加层。
|