SparkLayer

示Example例

Example Source Code

<template>
  <div class="map-container">
    <mb-map
      :zoom="14"
      :center="[116.17381, 39.92155464]"
      :pitch="60"
      background-color="black"
    >
      <mb-gradient-building-layer
        :data="__RESOURCE_URL__ + 'json/building.geojson'"
        :data-transform="(d) => d.features"
        :get-polygon="(d) => d.geometry.coordinates[0]"
        :get-elevation="(d) => d.properties.Floor * 60"
      />
      <mb-spark-layer
        :data="sparkData"
        :get-position="(d) => d.coordinates"
        :get-height="(d) => d.properties.height"
        :get-color="(d) => d.properties.color"
        :trail-length="100"
        :speed="5"
      />
    </mb-map>
  </div>
</template>

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

const sparkData = ref<
  Array<{ coordinates: number[]; properties: Record<string, any> }>
>([])

onMounted(() => {
  for (let i = 0; i < 100; i++) {
    sparkData.value.push({
      coordinates: [
        116.168 + Math.random() * 0.014,
        39.917 + Math.random() * 0.007,
      ],
      properties: {
        height: 400 + Math.random() * 500,
        color: [255, 100 + Math.random() * 150, 100 + Math.random() * 150],
      },
    })
  }
})
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
get-position	Function to retrieve the position.	AnyFunc	-
get-height	Function to retrieve the height.	number / AnyNumberFunc	1000
trail-length	Length of the trail (e.g., in number of segments or time units).	number	100
speed	Speed of movement/animation.	number	10
get-color	Function to retrieve the color. Note: Typo in original table, should be get-color.	string / AnyFunc	'black'
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 currently 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