VVectorSource

VVectorSource ：包含矢量切片的源。

• 配置文档
• 样式规范

基础用法

vector-source.vue

<script lang="ts" setup>
import type { MapboxProps } from '@movk-repo/mapbox'
import { VCircleLayer, VLineLayer, VMapbox, VUIControl, VVectorSource } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const maptilerToken = import.meta.env.VITE_MAPTILER_KEY

const defaultOptions: MapboxProps['defaultOptions'] = {
  zoom: 10.21723018200149,
  minZoom: 5,
  maxZoom: 14,
  center: [8.188882439693572, 46.776497566761435],
}

const url = `https://api.maptiler.com/tiles/outdoor/tiles.json?key=${maptilerToken}`
</script>

<template>
  <VMapbox type="light-v11" :default-options="defaultOptions" :access-token="accessToken">
    <VVectorSource :url="url">
      <VLineLayer source-layer="trail" :paint="{ 'line-color': '#6b40a9' }" />
      <VCircleLayer source-layer="outdoor_poi" :paint="{ 'circle-color': '#d6de3f' }" />
      <VLineLayer source-layer="ski" :paint="{ 'line-color': '#a3ed5c' }" />
    </VVectorSource>
    <VUIControl flex="~ col gap-2" text-align-center color-white position="top-right">
      <ElTag color="#6b40a9">
        trail
      </ElTag>
      <ElTag color="#d6de3f">
        outdoor_poi
      </ElTag>
      <ElTag color="#a3ed5c">
        ski
      </ElTag>
    </VUIControl>
  </VMapbox>
</template>

隐藏源代码

Api

vectorSourceProps

属性名	说明	类型	默认值
url	源服务的URL	string	-
tiles	瓦片源的数组	array	-
bounds	源的边界框	array	-
scheme	坐标参考系统	'xyz' | 'tms'	xyz
promoteId	用作功能 ID 的属性	string | object	-
minzoom	最小缩放级别	number	0
maxzoom	最大缩放级别	number	22
attribution	源的名称	string	-
volatile	是否缓存瓦片	boolean	false
defaultOptions	默认配置项（覆盖同名属性）	object	-

vectorSourceEmits

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

类型定义

VectorSourceLoadEvent

sources/VectorSource/VectorSource.ts

export interface VectorSourceLoadEvent {
  source: VectorTileSource
  map: Map
}