VNavigationControl

VNavigationControl 控件允许用户控制地图的导航，例如缩放和旋转。

• 配置文档

基础用法

navigation-control.vue

<script lang="ts" setup>
import { getTdtRandomToken } from '@movk-repo/libs'
import { VMapbox, VNavigationControl, VTianditu } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()
</script>

<template>
  <VMapbox :access-token="accessToken">
    <VTianditu :token="token" />
    <VNavigationControl />
  </VMapbox>
</template>

隐藏源代码

API

navigationControlProps

属性名	说明	类型	默认值
position	控件位置	string	top-left
showCompass	显示指南针	boolean	true
showZoom	显示缩放按钮	boolean	true
visualizePitch	可视化俯仰	boolean	false

navigationControlEmits

事件名	说明	回调参数
add	控件添加完成后触发	Function
remove	控件移除完成后触发	Function

类型定义

NavigationControlLoadEvent

control/NavigationControl/NavigationControl.ts

export interface NavigationControlLoadEvent {
  type: 'navigation'
  control: NavigationControl
  map: Map
}