VHillshadeLayer

VHillshadeLayer 用于渲染山体阴影的图层。

• 配置文档

基础用法

将数字高程模型 (DEM) 和测深，编码为 RGB 的全球覆盖范围的海洋栅格数据源添加到地图上。

hillshade-layer.vue

<script lang="ts" setup>
import { getTdtRandomToken } from '@movk-repo/libs'
import { VHillshadeLayer, VMapbox, VRasterDemSource, VTianditu } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
const maptilerKey = import.meta.env.VITE_MAPTILER_KEY
const token = getTdtRandomToken()

const url = `https://api.maptiler.com/tiles/ocean-rgb/tiles.json?key=${maptilerKey}`
</script>

<template>
  <VMapbox :access-token="accessToken" :zoom="1.6">
    <VTianditu :token="token" />
    <VRasterDemSource :url="url" :terrain="false">
      <VHillshadeLayer />
    </VRasterDemSource>
  </VMapbox>
</template>

隐藏源代码

Api

hillshadeLayerProps

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

hillshadeLayerEmits

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

类型定义

HillshadeLayerLoadEvent

layers/HillshadeLayer/HillshadeLayer.ts

export interface HillshadeLayerLoadEvent {
  layer: HillshadeLayerSpecification
  source: RasterDemTileSource
  map: Map
}