VSyncMap

VSyncMap 组件用于同步多个地图之间的操作，如拖拽、缩放、旋转和倾斜。

基础用法

每个地图单独设置同步选项，以控制其同步行为。

sync-map.vue

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

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

const terSyncOptions = ref({
  enabled: false,
  properties: ['center', 'zoom'] as SyncProperties,
})

const options = [
  { label: '中心点', value: 'center' },
  { label: '缩放级别', value: 'zoom' },
  { label: '旋转角度', value: 'bearing' },
  { label: '倾斜角度', value: 'pitch' },
]

const columns: PlusColumn[] = [
  { prop: 'enabled', label: '地形图同步', valueType: 'switch' },
  { prop: 'properties', label: '地形图同步属性', valueType: 'checkbox', options },
]
</script>

<template>
  <PlusForm v-model="terSyncOptions" label-width="auto" :has-footer="false" :columns="columns" />
  <div flex="~ row">
    <VSyncMap>
      <VMapbox :access-token="accessToken">
        <VTianditu :token="token" />
      </VMapbox>
      <VMapbox :sync-options="terSyncOptions" :access-token="accessToken">
        <VTianditu type="ter_w" :token="token" />
      </VMapbox>
      <VMapbox :access-token="accessToken">
        <VTianditu type="img_w" :token="token" />
      </VMapbox>
    </VSyncMap>
  </div>
</template>

隐藏源代码

API

syncMapProps

属性名	说明	类型	默认值
enabled	是否启用同步	boolean	true
properties	同步的地图属性	array	['center','zoom','bearing','pitch']

Inject

hooks/symbol.ts

export const syncControllerKey: InjectionKey<ShallowRef<SyncController | undefined>> = Symbol('syncController')

hooks/useSyncMap.ts

export function useSyncMap() {
  const controller = inject(syncControllerKey)
  if (!controller) {
    throw new Error('No SyncController provided')
  }
  return unref(controller)
}

类型定义

SyncProperties

plugin/SyncMap/SyncMap.ts

export type SyncProperties = Array<'center' | 'zoom' | 'bearing' | 'pitch'>