Tile3dLayer

Example

Preview

Example Source Code

<template>
  <div style="height: 400px">
    <mb-map ref="map" :zoom="8" :pitch="20">
      <mb-tianditu-layer :types="['img']" />
      <mb-tile-3d-layer
        :data="__RESOURCE_URL__ + '3dTiles/example/tileset.json'"
        @loaded="tileLoadedHandler"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const map = ref()

const tileLoadedHandler = (tileset) => {
  map.value.flyTo({
    center: [tileset.cartographicCenter[0], tileset.cartographicCenter[1]],
    zoom: 17,
  })
}
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
auto-highlight	When this property is true and pickable is also true, the hovered object will be highlighted.	boolean	false
data	Source data for the layer.	string / IndexAny / AnyArr / Promise<any>	''
highlight-color	The color to blend with the original color of the highlighted object.	string / number[]	[255, 255, 128, 1]
highlighted-object-index	The index of the currently highlighted element.	number	-1
opacity	The opacity of the layer (0-1).	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events.	boolean	false
point-size	Size of the points.	number	1
show	Whether the layer is visible.	boolean	true

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] }
loaded	-	tileset

SLOTS

Name	Description

METHODS

Name	Description	Definition