MapboxNavigationControl
导航控件，提供缩放按钮与指北罗盘，position 控制停靠角，options 透传至 mapbox-gl。
简介
MapboxNavigationControl 在地图上挂载缩放按钮与指北罗盘。position 指定停靠角（省略用地图默认位置），options 直通 mapbox-gl 的 NavigationControl 构造选项（showZoom / showCompass / visualizePitch）。控件在地图就绪后挂载，组件卸载时自动移除。
用法
调整 position 切换停靠角：
<script setup lang="ts">
import type { ControlPosition } from 'mapbox-gl'
withDefaults(defineProps<{ position?: ControlPosition }>(), {
position: 'top-right'
})
</script>
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{ style: 'mapbox://styles/mapbox/light-v11', center: [116.39, 39.91], zoom: 10 }"
>
<MapboxNavigationControl :position="position" />
</MapboxMap>
</div>
</template>
示例
可视化俯仰角
倾斜底图后开启 visualizePitch，罗盘随俯仰角倾斜以指示视角：
<template>
<div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
<MapboxMap
:options="{
style: 'mapbox://styles/mapbox/streets-v12',
center: [116.39, 39.91],
zoom: 11,
pitch: 55,
bearing: -25
}"
>
<!-- visualizePitch 让罗盘随俯仰角倾斜，showZoom 保留缩放按钮 -->
<MapboxNavigationControl
position="top-right"
:options="{ visualizePitch: true, showCompass: true, showZoom: true }"
/>
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
position | "top-left" | "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left"控件停靠位置；省略用地图默认位置 | |
options | mapboxgl.NavigationControlOptionsNavigationControl 构造选项 |
Changelog
No recent changes