VPopup

VPopup 控件用于在地图上显示弹窗。

• 配置文档

基础用法

将弹窗结合 VMarker 使用。

popup.vue

<script lang="ts" setup>
import type { LngLatLike } from 'mapbox-gl'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VMapbox, VMarker, VPopup, VTianditu } from '@movk-repo/mapbox'
import zooImg from '/mapbox/sprite/zoo.jpg'

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

const center = ref<LngLatLike>([120.19, 30.26])
const visible = ref(true)
</script>

<template>
  <VMapbox :access-token="accessToken" :center="center">
    <VTianditu :token="token" type="img_w" />
    <VMarker v-model:center="center">
      <img :src="zooImg" class="marker-img">
      <template #popup>
        <VPopup v-model="visible" :offset="25">
          这是一个自定义的弹窗
        </VPopup>
      </template>
    </VMarker>
  </VMapbox>
</template>

<style scoped>
.marker-img {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
</style>

隐藏源代码

点击弹窗

popup-click.vue

<script lang="ts" setup>
import type { PopupProps } from '@movk-repo/mapbox'
import type { Feature, Point } from 'geojson'
import type { MapMouseEvent } from 'mapbox-gl'
import type { PlusColumn } from 'plus-pro-components'
import { VCircleLayer, VGeoSource, VMapbox, VPopup } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const data = '/mapbox/data/popup-data.geojson'

const options = [
  { label: '顶部', value: 'top' },
  { label: '底部', value: 'bottom' },
  { label: '左侧', value: 'left' },
  { label: '右侧', value: 'right' },
]

const center = ref()
const description = ref()
const visible = ref(false)

const formData: Ref<PopupProps['defaultOptions']> = ref({
  offset: 15,
  anchor: 'top',
  maxWidth: '240px',
})
const columns: PlusColumn[] = [
  { prop: 'offset', label: '偏移量', valueType: 'slider', fieldProps: { min: 0, max: 30, step: 5 } },
  { prop: 'anchor', label: '锚点', valueType: 'select', options },
  { prop: 'maxWidth', label: '最大宽度', valueType: 'input', fieldProps: { clearable: false } },
]

function handlePopup(e: MapMouseEvent) {
  if (!e.features)
    return
  const feature = e.features[0] as Feature<Point>
  center.value = feature.geometry.coordinates.slice()
  description.value = feature.properties?.description
  visible.value = true
}
</script>

<template>
  <VMapbox type="streets-v12" :center="[-77.04, 38.907]" :zoom="11.15" :access-token="accessToken">
    <VGeoSource :data="data">
      <VCircleLayer
        :paint="{
          'circle-color': '#4264fb',
          'circle-radius': 6,
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ffffff',
        }" @click="handlePopup"
      />
    </VGeoSource>
    <VPopup v-model="visible" :center="center" :html="description" :default-options="formData" />
    <template #before>
      <PlusForm v-model="formData" label-width="auto" :row-props="{ gutter: 20 }" :col-props="{ span: 8 }" :has-footer="false" :columns="columns" />
    </template>
  </VMapbox>
</template>

隐藏源代码

单击显示多边形信息

popup-polygon.vue

<script lang="ts" setup>
import type { Feature, Point } from 'geojson'
import type { MapMouseEvent } from 'mapbox-gl'
import { VFillLayer, VGeoSource, VMapbox, VPopup } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const data = '/mapbox/data/ne_110m_admin_1_states_provinces_shp.geojson'

const center = ref()
const description = ref()
const visible = ref(false)

function handlePopup(e: MapMouseEvent) {
  if (!e.features)
    return
  const feature = e.features[0] as Feature<Point>
  center.value = e.lngLat
  description.value = feature.properties?.name
  visible.value = true
}
</script>

<template>
  <VMapbox type="light-v11" :center="[-100.04, 38.907]" :zoom="3" :access-token="accessToken">
    <VGeoSource :data="data">
      <VFillLayer
        :paint="{
          'fill-color': 'rgba(200, 100, 240, 0.4)',
          'fill-outline-color': 'rgba(200, 100, 240, 1)',
        }"
        @click="handlePopup"
      />
    </VGeoSource>
    <VPopup v-model="visible" :center="center">
      <span>{{ description }}</span>
    </VPopup>
  </VMapbox>
</template>

隐藏源代码

API

popupProps

属性名	说明	类型	默认值
modelValue	弹窗是否可见	boolean	必填
center	弹窗的经纬度坐标	object, array	-
text	弹窗的文本	string	-
html	弹窗的 HTML 内容	string	-
closeButton	显示关闭按钮	boolean	false
closeOnClick	点击地图时关闭弹窗	boolean	true
closeOnMove	移动地图时关闭弹窗	boolean	false
focusAfterOpen	打开弹窗后焦点	boolean	false
anchor	锚点位置	string	center
offset	偏移量	object,array,number	-
className	弹窗的 CSS 类名	string	-
maxWidth	弹窗的最大宽度	string	240px
defaultOptions	弹窗的配置项（覆盖同名属性）	object	-

popupEmits

事件名	说明	回调参数
load	弹窗加载完成后触发	Function
update:modelValue	弹窗可见性更新时触发	Function
open	弹窗打开时触发	Function
close	弹窗关闭时触发	Function

popupSlots

插槽名	说明
default	自定义弹框的内容

Inject

hooks/symbol.ts

export const popupKey: InjectionKey<ShallowRef<Popup | undefined>> = Symbol('Popup')

hooks/usePopup.ts

export function usePopup() {
  const popup = inject<Popup>(popupKey)
  if (!popup) {
    consola.warn('no popup provided')
  }
  return unref(popup)
}

类型定义

PopupLoadEvent

plugin/Popup/Popup.ts

export interface PopupLoadEvent {
  map: Map
  popup: Popup
}

PopupAnchor

plugin/Popup/Popup.ts

export type PopupAnchor =
  | 'center'
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right'

PopupOffset

plugin/Popup/Popup.ts

export type PopupOffset = number | PointLike | Partial<Record<PopupAnchor, PointLike>>

PopupEvents

plugin/Popup/Popup.ts

export interface PopupEvents {
  open: void
  close: void
}