VGeoSource

VGeoSource：包含GeoJSON数据的源。

• 配置文档
• 样式规范

基础用法

fill-layer-expression.vue

<script lang="ts" setup>
import type { FillLayerProps, GeoSourceSetDataEvent } from '@movk-repo/mapbox'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VFillLayer, VGeoSource, VMapbox, VTianditu } from '@movk-repo/mapbox'

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

const data = '/mapbox/data/relation-4591410.geojson'

const paint: FillLayerProps['paint'] = {
  'fill-color': [
    'case',
    ['==', ['get', 'name'], '转塘街道'],
    '#e76f51',
    ['==', ['get', 'name'], '双浦镇'],
    '#e9c46a',
    '#2a9d8f',
  ],
  'fill-opacity': 0.8,
  'fill-outline-color': '#fff',
}

function setData({ map, bounds }: GeoSourceSetDataEvent) {
  map.fitBounds(bounds, { padding: 80, duration: 1000 })
}
</script>

<template>
  <VMapbox :access-token="accessToken">
    <VTianditu :token="token" />
    <VGeoSource :data="data" @set-data="setData">
      <VFillLayer :minzoom="8" :paint="paint" />
    </VGeoSource>
  </VMapbox>
</template>

隐藏源代码

Api

geoSourceProps

属性名	说明	类型	默认值
data	文件或内联URL	string | object	-
filter	过滤规则	array	-
buffer	缓冲区大小 0-512	number	128
cluster	是否聚合	boolean	false
clusterRadius	聚合半径	number	50
clusterMaxZoom	聚合最大缩放	number	-
clusterMinPoints	聚合最小点数	number	2
clusterProperties	聚合属性	object	-
lineMetrics	是否计算线距离度量	boolean	false
generateId	是否生成ID	boolean	false
promoteId	用作功能ID的属性	string | object	-
tolerance	普克简化公差	number	0.375
dynamic	是否优化源	boolean	false
minzoom	源最小缩放级别	number	0
maxzoom	源最大缩放级别	number	22
attribution	源名称	string	-
volatile	是否本地缓存	boolean	false
defaultOptions	默认配置项（覆盖同名属性）	object	-

geoSourceEmits

事件名	说明	回调参数
load	源加载完成后触发	Function
setData	设置数据后触发	Function

类型定义

GeoSourceLoadEvent

sources/GeoSource/GeoSource.ts

export interface GeoSourceLoadEvent {
  source: GeoJSONSource
  map: Map
}

GeoSourceSetDataEvent

sources/GeoSource/GeoSource.ts

export interface GeoSourceSetDataEvent extends GeoSourceLoadEvent {
  data: GeoJSON
  bounds: [number, number, number, number]
}

GeoJSONExcludeProps

export type GeoJSONExcludeProps = OmitByKey<GeoJSONSourceSpecification, 'data' | 'type'>