VRasterLayer

VRasterLayer 用于渲染栅格图块的图层。

• 配置文档

基础用法

是否显示:

图层顺序:

注记下注记上

raster-layer.vue

<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'
import { getTdtRandomToken } from '@movk-repo/libs'
import { VMapbox, VRasterLayer, VRasterSource, VTianditu } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const token = getTdtRandomToken()
const url = 'mapbox://mapbox.u8yyzaor'

const formData = ref({
  visible: true,
  order: 2,
})

const columns: PlusColumn[] = [
  {
    label: '是否显示',
    prop: 'visible',
    valueType: 'switch',
  },
  {
    colProps: { span: 12 },
    label: '图层顺序',
    prop: 'order',
    valueType: 'radio',
    options: [
      { label: '注记下', value: 0 },
      { label: '注记上', value: 2 },
    ],
  },
]
</script>

<template>
  <VMapbox :zoom="8" :center="[-87.6321, 41.8362]" :access-token="accessToken">
    <VTianditu :token="token" :anno-layer-options="{ order: 1 }" />
    <VRasterSource :url="url">
      <VRasterLayer :default-options="formData" />
    </VRasterSource>
    <template #before>
      <PlusForm
        v-model="formData" :row-props="{ gutter: 20 }" :col-props="{ span: 6 }" :columns="columns"
        :has-footer="false"
      />
    </template>
  </VMapbox>
</template>

隐藏源代码

Api

rasterLayerProps

属性名	说明	类型	默认值
visible	图层可见性	boolean	true
opacity	图层透明度	number	1
order	图层顺序	number	-
minzoom	图层最小缩放级别	number	0
maxzoom	图层最大缩放级别	number	22
sourceLayer	矢量切片源使用的图层	string	-
filter	图层过滤器	array	-
layout	图层布局属性	object	-
paint	图层绘制属性	object	-
slot	图层槽位	string	-
metadata	图层任意属性	object	-
defaultOptions	图层配置选项（覆盖同名属性）	object	-

rasterLayerEmits

事件名	说明	回调参数
load	图层加载完成时触发	Function

类型定义

RasterLayerLoadEvent

layers/RasterLayer/RasterLayer.ts

export interface RasterLayerLoadEvent {
  layer: RasterLayerSpecification
  source: RasterTileSource | RasterDemTileSource
  map: Map
}