VWmtsSource

VWmtsSource：Web Map Tile Service (WMTS) 数据源，用于请求和获取地图瓦片。WMTS 提供了基于预先缓存的瓦片地图服务，支持高效地获取和显示地图瓦片。

• Web地图平铺服务（WMTS）
• WMTS服务初步理解与读取
• OGC WMTS

基础用法

使用 WMTS 源加载瓦片图层：

wmts-source.vue

<script lang="ts" setup>
import { VMapbox, VRasterLayer, VUIControl, VWmtsSource } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const url = 'https://www.ign.es/wmts/ign-base'
const layer = 'IGNBase-gris'
const tileMatrixSet = 'GoogleMapsCompatible'
const format = 'image/jpeg'

const visible = ref(true)
</script>

<template>
  <VMapbox :access-token="accessToken" :zoom="1">
    <VWmtsSource :url="url" :layer="layer" :tile-matrix-set="tileMatrixSet" :format="format">
      <VRasterLayer :visible="visible" />
    </VWmtsSource>
    <VUIControl>
      <ElSwitch v-model="visible" size="small" active-text="显示" inactive-text="隐藏" />
    </VUIControl>
  </VMapbox>
</template>

隐藏源代码

Api

wmtsSourceProps

属性名	说明	类型	默认值
继承属性	rasterSourceProps	-	-
url	服务地址	string	必填
layer	图层名称	string	必填
version	服务版本	string	1.0.0
tileMatrixSet	瓦片矩阵集	string	c
style	图层样式	string	default
customParams	自定义参数	object	-
defaultOptions	配置选项（覆盖同名属性）	object	-

wmtsSourceEmits

事件名	说明	回调参数
继承事件	rasterSourceEmits	-

类型定义

WmtsSourceSpecification

interface WmtsSourceSpecification {
  service?: 'WMTS'
  request?: 'GetCapabilities' | 'GetTile' | 'GetFeatureInfo'
  version?: string
  url?: string
  layer?: string
  style?: string
  format?: string
  tileMatrixSet?: string
  tileMatrix?: number
  tileRow?: number
  tileCol?: number
  customParams?: Record<string, any>
}