VSwipeMap

VSwipeMap 组件用于在两个地图的滑动与同步。

基础用法

结合 VSyncMap 组件控制两个地图的滑动。

swipe-map.vue

<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VMapbox, VSwipeMap, VSyncMap, VTianditu, VUIControl } from '@movk-repo/mapbox'

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

const formData = ref({
  direction: 'horizontal' as 'horizontal' | 'vertical',
  disabled: false,
  syncOption: {
    enabled: true,
  },
})

const options = [
  { label: '水平', value: 'horizontal' },
  { label: '垂直', value: 'vertical' },
]

const columns: PlusColumn[] = [
  { prop: 'direction', label: '方向', valueType: 'radio', options },
  { prop: 'disabled', label: '禁用', valueType: 'switch' },
  { prop: 'syncOption.enabled', label: '地图同步', valueType: 'switch' },
]
</script>

<template>
  <PlusForm v-model="formData" :col-props="{ span: 12 }" :row-props="{ gutter: 10 }" :has-footer="false" :columns="columns" />
  <VSyncMap>
    <VSwipeMap :direction="formData.direction" :disabled="formData.disabled" h-450px>
      <template #before>
        <VMapbox :sync-options="formData.syncOption" :access-token="accessToken">
          <VTianditu :token="token" />
          <VUIControl position="top-right">
            我是左侧地图的控件
          </VUIControl>
        </VMapbox>
      </template>
      <template #after>
        <VMapbox :sync-options="formData.syncOption" :access-token="accessToken">
          <VTianditu type="img_w" :token="token" />
          <VUIControl position="top-left">
            我是右侧地图的控件
          </VUIControl>
        </VMapbox>
      </template>
    </VSwipeMap>
  </VSyncMap>
</template>

隐藏源代码

API

swipeMapProps

属性名	说明	类型	默认值
direction	拖拽方向	enum	horizontal
disabled	是否禁用滑块拖动	boolean	false
modelValue	滑块初始位置比例	number	0.5

swipeMapEmits

事件名	参数类型	说明
update:modelValue	Function	当滑块位置改变时触发

swipeMapSlots

名称	说明
before	（左、上） 地图
after	（右、下）地图

类型定义

SwipeMapDirection

plugin/SwipeMap/SwipeMap.ts

export type SwipeMapDirection = 'horizontal' | 'vertical'

SwipeMapEmits

plugin/SwipeMap/SwipeMap.ts

export type SwipeMapEmits = {
  'update:modelValue': [e: number]
}