VModelLayer

VModelLayer 用于渲染模型的图层。

• 配置文档

注意

Note that this is an experimental feature which is under development and is prone to change。

请注意，这是一个实验性功能，正在开发中，很容易发生变化。

基础用法

model-layer.vue

<script lang="ts" setup>
import type { MapboxProps, ModelLayerProps } from '@movk-repo/mapbox'
import type { Feature } from 'geojson'
import { VGeoSource, VMapbox, VModelLayer } from '@movk-repo/mapbox'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

const options: MapboxProps['defaultOptions'] = {
  center: [-0.126326, 51.533582],
  zoom: 15.27,
  pitch: 42,
  bearing: -50,
  minZoom: 15,
  maxZoom: 16,
}

const data: Feature = {
  type: 'Feature',
  properties: {
    'model-url': 'https://mhaibaraai.github.io/mapbox/model/tower.glb',
  },
  geometry: {
    coordinates: [-0.12501974, 51.5332374],
    type: 'Point',
  },
}

const paint: ModelLayerProps['paint'] = {
  'model-opacity': 1,
  'model-rotation': [0.0, 0.0, 35.0],
  'model-scale': [0.8, 0.8, 1.2],
  'model-color-mix-intensity': 0,
  'model-cast-shadows': true,
  'model-emissive-strength': 0.8,
}
</script>

<template>
  <VMapbox type="standard" :default-options="options" :access-token="accessToken">
    <VGeoSource :data="data">
      <VModelLayer :paint="paint" :layout="{ 'model-id': ['get', 'model-url'] }" />
    </VGeoSource>
  </VMapbox>
</template>

隐藏源代码

Api

modelLayerProps

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

modelLayerEmits

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

类型定义

ModelLayerLoadEvent

layers/ModelLayer/ModelLayer.ts

export interface ModelLayerLoadEvent {
  layer: ModelLayerSpecification
  source: GeoJSONSource | VectorTileSource
  map: Map
}