VCustomLayer

VCustomLayer 组件用于添加自定义图层，可配置渲染模式和自定义渲染方法。

• 参考文档
• Threebox 文档

基础用法

使用 Threebox 插件将 3D 模型添加到地图，并使其场景相机与 Mapbox 相机保持同步。

threebox-layer.vue

<script lang="ts" setup>
import type { MapboxLoadEvent, MapboxProps } from '@movk-repo/mapbox'
import type { Object3D } from 'three'
import type { LoadObjOptions, ThreeboxObject } from 'threebox-plugin'
import { VCustomLayer, VMapbox, VUIControl } from '@movk-repo/mapbox'
import { Threebox } from 'threebox-plugin'

const accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN

let center: [number, number] = [-122.47920912, 37.716351775]
let tb: Threebox
let tbModel: ThreeboxObject
let line: Object3D

const options: MapboxProps['defaultOptions'] = {
  center,
  zoom: 18,
  pitch: 60,
  antialias: true,
  bearing: 0,
}

function onAdd() {
  const options: LoadObjOptions = {
    obj: 'https://mhaibaraai.github.io/mapbox/model/soldier.glb',
    type: 'gltf',
    scale: 20,
    units: 'meters',
    rotation: { x: 90, y: 0, z: 0 },
    anchor: 'center',
  }
  tb.loadObj(options, (model) => {
    model.setCoords(center)
    tbModel = model
    tb.add(model)
  })
}

function render() {
  tb.update()
}

async function fetchFunction(url: string, cb: (data: any) => void) {
  fetch(url)
    .then(response => response.json())
    .then(data => cb(data))
    .catch(error => console.error(error))
}

function travelPath(destination: [number, number]) {
  const url = `https://api.mapbox.com/directions/v5/mapbox/driving/${center.join(
    ',',
  )};${destination.join(',')}?geometries=geojson&access_token=${accessToken}`

  fetchFunction(url, (data) => {
    const duration = 10000
    const options = {
      animation: 1,
      path: data.routes[0].geometry.coordinates,
      duration,
    }
    tbModel.followPath(
      options,
      () => {
        tb.remove(line)
      },
    )
    tbModel.playAnimation(options)
    const lineGeometry = options.path.map((coord: number[]) => coord.concat([15]))
    line = tb.line({
      geometry: lineGeometry,
      width: 5,
      color: 'red',
    })
    tb.add(line)
    center = destination
  })
}

function animate() {
  requestAnimationFrame(animate)
}

function load({ map }: MapboxLoadEvent) {
  tb = (window.tb = new Threebox(
    map,
    map.getCanvas().getContext('webgl')!,
    {
      defaultLights: true,
      enableSelectingFeatures: true,
      enableSelectingObjects: true,
      enableDraggingObjects: true,
      enableRotatingObjects: true,
      enableTooltips: true,
    },
  ))
  animate()
}

const play = ref(false)
function change() {
  tbModel.stop()
  if (play.value) {
    travelPath([-122.47937337344793, 37.717373355204316])
  }
  else {
    travelPath([-122.47920912, 37.716351775])
  }
}

onUnmounted(() => {
  tb.dispose()
})
</script>

<template>
  <VMapbox type="outdoors-v12" :default-options="options" :access-token="accessToken" @load="load">
    <VCustomLayer rendering-mode="3d" :render="render" @add="onAdd" />
    <VUIControl flex="~ col">
      <ElSwitch v-model="play" active-text="前进" inactive-text="返回" @change="change" />
    </VUIControl>
  </VMapbox>
</template>

隐藏源代码

API

customLayerProps

属性名	说明	类型	默认值
renderingMode	渲染模式	enum	2d
render	渲染方法	Function	必填
prerender	预渲染方法	Function	-
renderToTile	渲染到瓦片方法	Function	-
shouldRerenderTiles	是否重新渲染瓦片	Function	-
onAdd	添加到地图时触发的回调方法	Function	-
onRemove	从地图中移除时触发的回调方法	Function	-
slot	图层槽位	string	-
order	图层顺序	number	-

customLayerEmits

事件名	说明	回调参数
load	图层加载完成时触发	(e: CustomLayerLoadEvent) => true

类型定义

CustomLayerLoadEvent

layers/CustomLayer/CustomLayer.ts

export interface CustomLayerLoadEvent {
  layer: CustomLayerInterface
  source: undefined
  map: Map
}

CustomLayerRenderMethod

layers/CustomLayer/CustomLayer.ts

export type CustomLayerRenderMethod = (
  gl: WebGL2RenderingContext,
  matrix: Array<number>,
  projection?: ProjectionSpecification,
  projectionToMercatorMatrix?: Array<number>,
  projectionToMercatorTransition?: number,
  centerInMercator?: Array<number>,
  pixelsPerMeterRatio?: number
) => void