WindowBuildingLayer
Example
Example Source Code
vue
<template>
<div class="map-container" style="background-color: black">
<mb-map :zoom="14.5" :center="[116.17381, 39.92155464]" :pitch="60">
<mb-window-building-layer
:data="__RESOURCE_URL__ + 'json/building.geojson'"
:get-fill-color="[28, 57, 85]"
:data-transform="(d) => d.features"
:get-polygon="(d) => d.geometry.coordinates[0]"
:get-elevation="(d) => d.properties.Floor"
:elevation-scale="50"
/>
</mb-map>
</div>
</template>
<script setup lang="ts"></script>
API
PROPS
Name | Description | Type | Default |
---|---|---|---|
id | Layer ID | string | - |
get-elevation | Function to get the elevation value. | number / AnyNumberFunc | 1000 |
get-fill-color | Function to get the fill color. | number[] / AnyFunc | [0, 125, 125] |
get-polygon | Function to get the polygon data. | AnyFunc | - |
elevation-scale | A scaling factor for the elevation. | number | 1 |
data | Source data for the layer. | string / IndexAny / AnyArr / Promise<any> | '' |
show | Whether the layer is visible. | boolean | true |
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 |
auto-highlight | When true and pickable is also true, the hovered object will be highlighted. | boolean | false |
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 highlighted element. | number | -1 |
on-data-load | Callback function invoked after data loading is complete. | AnyFunc | - |
data-transform | Function to transform the data before rendering. | AnyFunc | - |
transitions | Transition settings for the layer. | IndexAny | {} |
EVENTS
Name | Description | Parameters |
---|
SLOTS
Name | Description |
---|
METHODS
Name | Description | Definition |
---|