VBackgroundLayer

VBackgroundLayer 组件用于添加地图背景图层，可配置颜色和图案填充。

• 配置文档

基础用法

background-layer.vue

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

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

const formData = ref({
  visible: true,
  maxzoom: 10,
  order: 1,
  opacity: 0.4,
  paint: {
    'background-color': '#009688',
  },
})

const columns: PlusColumn[] = [
  {
    label: '是否显示',
    prop: 'visible',
    valueType: 'switch',
  },
  {
    label: '背景颜色',
    prop: 'paint.background-color',
    valueType: 'color-picker',
  },
  {
    label: '背景透明度',
    prop: 'opacity',
    valueType: 'slider',
    fieldProps: {
      min: 0,
      max: 1,
      step: 0.1,
    },
  },
  {
    label: '背景顺序',
    prop: 'order',
    valueType: 'radio',
    options: [
      { label: '下', value: 0 },
      { label: '上', value: 1 },
    ],
  },
  {
    label: '最大缩放',
    prop: 'maxzoom',
    valueType: 'input-number',
    fieldProps: {
      min: 1,
      max: 22,
    },
  },
]
</script>

<template>
  <VMapbox :access-token="accessToken">
    <VTianditu :token="token" :order="0" type="ter_w" />
    <VBackgroundLayer :default-options="formData" />
    <template #before>
      <PlusForm
        v-model="formData" :row-props="{ gutter: 20 }" :col-props="{ span: 8 }" :columns="columns"
        :has-footer="false"
      />
    </template>
  </VMapbox>
</template>

隐藏源代码

API

backgroundLayerProps

属性名	说明	类型	默认值
visible	图层可见性	boolean	true
opacity	图层透明度	number	1
order	图层顺序	number	-
minzoom	图层最小缩放级别	number	0
maxzoom	图层最大缩放级别	number	22
layout	图层布局属性	object	-
paint	图层绘制属性	object	-
slot	图层槽位	string	-
metadata	图层任意属性	object	-
defaultOptions	图层配置选项（覆盖同名属性）	object	-

backgroundLayerEmits

事件名	说明	回调参数
load	图层加载完成时触发	Function

类型定义

BackgroundLayerLoadEvent

layers/BackgroundLayer/BackgroundLayer.ts

export interface BackgroundLayerLoadEvent {
  layer: BackgroundLayerSpecification
  source: undefined
  map: Map
}