GltfLayer

Example

Example Source Code

<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

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
gltf-url	URL of the glTF model. This specifies the location of the 3D model file.	string	-
auto-highlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data. This data is often used in conjunction with accessor functions (like get-position, get-scale, etc.) to dynamically position and style the models.	string / IndexAny / AnyArr / Promise<any>	''
get-orientation	Orientation of the model. This can be an array of Euler angles (e.g., [rotationX, rotationY, rotationZ] in degrees) or a function that returns the orientation based on the data. The default is [0, 0, 90], which might represent a rotation around the Z-axis by 90 degrees.	number[] / AnyNumbersFunc	[0, 0, 90]
get-position	Function to retrieve the position of each model instance. This function should accept a data item as an argument and return an array representing the [longitude, latitude] or [longitude, latitude, altitude/elevation].	AnyFunc	-
get-scale	Scaling factor for the model. This can be an array of scaling factors for each axis (e.g., [scaleX, scaleY, scaleZ]) or a function that returns the scale based on the data. The default is [1, 1, 1], meaning no scaling.	number[] / AnyNumbersFunc	[1, 1, 1]
get-translation	Translation (offset) of the model. This can be an array representing the translation along each axis (e.g., [translateX, translateY, translateZ]) or a function that returns the translation based on the data. The default is [0, 0, 0], meaning no translation.	number[] / AnyNumbersFunc	[0, 0, 0]
highlight-color	The color to blend with the original color of the highlighted object. This creates the highlight effect. The value can be a color string or an RGBA array (e.g., [R, G, B, A] where R, G, B, and A are values between 0 and 255).	string / number[]	[255, 255, 128, 1]
highlighted-object-index	The index of the currently highlighted object within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
opacity	The opacity of the model (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
size-scale	A global scaling factor applied to the model's size. This is useful for uniformly scaling all instances of the model.	number	1
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true
animations	Animation configuration for the gltf model. This is an object where you can specify animation parameters, such as speed. The structure of this object may depend on the specific animation library or implementation being used.	IndexAny	{ speed: 5 }

EVENTS

Name	Description	Parameters
created	Initialization complete event	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

Name	Description

METHODS

Name	Description	Definition