Gltf图层（GltfLayer）

示例

示例源码

<template>
  <div style="height: 400px">
    <mb-map :zoom="18" :pitch="60" :bearing="60" :center="mapCenter">
      <mb-tianditu-layer :types="['img']" />
      <mb-gltf-layer
        :gltf-url="gltfUrl"
        :data="gltfData"
        :get-orientation="[0, 0, 90]"
        get-color="rgba(255,0,0,0)"
        :size-scale="10"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
const mapCenter = [116, 39]
const gltfData = [{ position: [116, 39] }]
const gltfUrl = `${__RESOURCE_URL__}gltf/GroundVehicle/GroundVehicle.glb`
</script>

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
gltf-url	模型URL	string	-
auto-highlight	本属性为true且pickable为true时，则会将鼠标悬浮选中的对象设为高亮	boolean	false
data	图层源数据	string / IndexAny / AnyArr / Promise<any>	''
get-orientation	朝向信息	number[] / AnyNumbersFunc	[0, 0, 90]
get-position	位置信息	AnyFunc	-
get-scale	放大倍数信息	number[] / AnyNumbersFunc	[1, 1, 1]
get-translation	位移信息	number[] / AnyNumbersFunc	[0, 0, 0]
highlight-color	要与高亮对象原始颜色进行混合(blend)的颜色值	string / number[]	[255, 255, 128, 1]
highlighted-object-index	高亮元素序号	number	-1
opacity	透明度	number	1
pickable	图层是否会响应鼠标事件，若为false，则组件不会emit鼠标相关事件	boolean	false
size-scale	放大倍数	number	1
show	是否显示	boolean	true
animations	动画配置	IndexAny	{ speed: 5 }

EVENTS

名称	描述	参数
created	初始化完成事件	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

名称	描述

METHODS

名称	描述	定义