VSymbolLayer

VSymbolLayer 组件用于渲染图标和文本注记图层。

• 配置文档

动态过滤符号

symbol-layer-filter.vue

<script lang="ts" setup>
import type { MapboxProps, SymbolLayerProps } from '@movk-repo/mapbox'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VGeoSource, VMapbox, VSprite, VSymbolLayer, VTianditu, VUIControl } from '@movk-repo/mapbox'
import BusStop from '/mapbox/sprite/bus_stop.svg'
import Peak from '/mapbox/sprite/peak.svg'
import Temple from '/mapbox/sprite/temple.svg'
import Village from '/mapbox/sprite/village.svg'

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

const defaultOptions: MapboxProps['defaultOptions'] = {
  zoom: 12.066228421248345,
  center: { lng: 120.10542525951269, lat: 30.21961535504866 },
  pitch: 47.99999999999977,
  bearing: -24.00000000000034,
}

const data = '/mapbox/data/features.geojson'
const options = [
  { label: '社区', value: 'village', image: Village },
  { label: '山峰', value: 'peak', image: Peak },
  { label: '公交站', value: 'bus_stop', image: BusStop },
  { label: '寺庙', value: 'temple', image: Temple },
]

const checkList = ref(['village', 'peak'])
const layerFilter = computed(() => [
  'all',
  ['==', '$type', 'Point'],
  ['in', 'category', ...checkList.value],
])
const layout = {
  'icon-image': ['get', 'category'],
  'icon-allow-overlap': true,
  'icon-size': 0.3,
} as SymbolLayerProps['layout']
</script>

<template>
  <VMapbox :default-options="defaultOptions" :access-token="accessToken">
    <VTianditu :token="token" type="img_w" terrain />
    <VSprite v-for="opt in options" :id="opt.value" :key="opt.value" :image="opt.image" icon-color="#e63946" />
    <VGeoSource :data="data">
      <VSymbolLayer :layout="layout" :filter="layerFilter" />
    </VGeoSource>
    <VUIControl>
      <ElCheckboxGroup v-model="checkList" size="small">
        <ElCheckboxButton v-for="opt in options" :key="opt.value" :value="opt.value">
          {{ opt.label }}
        </ElCheckboxButton>
      </ElCheckboxGroup>
    </VUIControl>
  </VMapbox>
</template>

隐藏源代码

API

symbolLayerProps

属性名	说明	类型	默认值
visible	图层可见性	boolean	true
opacity	图层透明度	number	1
order	图层顺序	number	-
minzoom	图层最小缩放级别	number	0
maxzoom	图层最大缩放级别	number	22
sourceLayer	矢量切片源使用的图层	string	-
filter	图层过滤器	array	-
layout	图层布局属性	object	-
paint	图层绘制属性	object	-
slot	图层槽位	string	-
metadata	图层任意属性	object	-
cursor	图层移入时鼠标样式	string	pointer
defaultOptions	图层配置选项（覆盖同名属性）	object	-

symbolLayerEmits

事件名	说明	回调参数
load	图层加载完成时触发	Function
mousedown	鼠标按下时触发	Function
mouseup	鼠标抬起时触发	Function
mouseover	鼠标悬停时触发	Function
mousemove	鼠标移动时触发	Function
preclick	鼠标单击前触发	Function
click	鼠标单击时触发	Function
dblclick	鼠标双击时触发	Function
mouseenter	鼠标进入时触发	Function
mouseleave	鼠标离开时触发	Function
mouseout	鼠标移出时触发	Function

类型定义

SymbolLayerLoadEvent

layers/SymbolLayer/SymbolLayer.ts

export interface SymbolLayerLoadEvent {
  layer: SymbolLayerSpecification
  source: GeoJSONSource | VectorTileSource
  map: Map
}