VUiControl

VUiControl 控件用于在地图上添加自定义元素。

基础用法

ui-control.vue

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

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()

const positions = [
  'top-left',
  'top',
  'top-right',
  'right',
  'bottom-right',
  'bottom',
  'bottom-left',
  'left',
]

const position: Ref<ControlPosition> = ref('top-right')
</script>

<template>
  <VMapbox :access-token="accessToken">
    <VTianditu :token="token" />
    <VUIControl :position="position">
      ui control
    </VUIControl>
    <template #before>
      <div flex="~ items-center" mb-4>
        控件位置：
        <ElSelect v-model="position" placeholder="选择控件位置" style="width: 10rem">
          <ElOption v-for="pos in positions" :key="pos" :label="pos" :value="pos" />
        </ElSelect>
      </div>
    </template>
  </VMapbox>
</template>

隐藏源代码

API

uiControlProps

属性名	说明	类型	默认值
position	控件位置	string	top-left
container	控件容器	HTMLElement	HTMLDivElement

uiControlEmits

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

类型定义

UIControlLoadEvent

control/UiControl/UiControl.ts

export interface UIControlLoadEvent {
  type: 'ui'
  control: UiControl
  map: Map
}