VRasterSource

VRasterSource ：包含栅格图块的源。

• 配置文档
• 样式规范

基础用法

raster-source.vue

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

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

const url = `https://api.maptiler.com/tiles/uk-osgb1888/tiles.json?key=${maptilerToken}`

function load({ map }: RasterSourceLoadEvent) {
  map.setCenter({
    lng: -4.855407007949083,
    lat: 55.75424333933063,
  })
  map.setZoom(14)
}
</script>

<template>
  <VMapbox :min-zoom="4" :max-zoom="17" :access-token="accessToken">
    <VRasterSource :url="url" @load="load">
      <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	-
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'>