VRasterSource

VRasterSource ：包含栅格图块的源。

• 配置文档
• 样式规范

基础用法

raster-source.vue

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

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

function tiles() {
  const subdomains = ['a', 'b', 'c']
  return subdomains.map(subdomain => `https://${subdomain}.tile.opentopomap.org/{z}/{x}/{y}.png`)
}
</script>

<template>
  <VMapbox :access-token="accessToken" projection="mercator" :zoom="1">
    <VRasterSource :tiles="tiles">
      <VRasterLayer />
    </VRasterSource>
  </VMapbox>
</template>

隐藏源代码

添加 WMTS 服务

wmts-source.vue

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

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const tiles = [
  `https://iserver.supermap.io/iserver/services/map-china400/wmts100?Service=WMTS&Request=GetTile&Version=1.0.0&LAYER=China&Format=image%2Fpng&TileMatrixSet=Custom_China&TileMatrix={z}&TileRow={y}&TileCol={x}`,
]
</script>

<template>
  <VMapbox :access-token="accessToken">
    <VRasterSource :tiles="tiles">
      <VRasterLayer />
    </VRasterSource>
  </VMapbox>
</template>

隐藏源代码

Api

rasterSourceProps

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

rasterSourceEmits

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

类型定义

RasterSourceLoadEvent

sources/RasterSource/RasterSource.ts

export interface RasterSourceLoadEvent {
  source: RasterTileSource
  map: Map
}

RasterExcludeProps

export type RasterExcludeProps = OmitByKey<RasterSourceSpecification, 'tiles' | 'type'>