VScaleControl

VScaleControl 控件允许用户显示地图的比例尺信息。

• 配置文档

基础用法

scale-control.vue

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

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

<template>
  <VMapbox :access-token="accessToken">
    <VTianditu type="img_w" :token="token" />
    <VScaleControl position="bottom-right" />
  </VMapbox>
</template>

隐藏源代码

API

scaleControlProps

属性名	说明	类型	默认值
maxWidth	缩放控件的最大长度（以像素为单位）	number	100
unit	缩放控件的单位	enum	'metric'

scaleControlEmits

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

类型定义

ScaleControlLoadEvent

control/ScaleControl/ScaleControl.ts

export interface ScaleControlLoadEvent {
  type: 'scale'
  control: ScaleControl
  map: Map
}

ScaleControlUnit

control/ScaleControl/ScaleControl.ts

export type ScaleControlUnit = 'imperial' | 'metric' | 'nautical'