TrailLayer

Example

Example Source Code

<template>
  <div class="map-container">
    <mb-map :zoom="8" :pitch="40">
      <mb-path-layer
        :data="pathData"
        :get-path="getPath"
        :get-width="100"
        :get-color="[128, 128, 93, 0.2]"
        :width-min-pixels="1"
        :opacity="0.3"
      />
      <mb-trail-layer
        :data="pathData"
        :get-path="getPath"
        :get-color="getColor"
        :get-width="100"
        :speed="3"
        :trail-length="3"
        :interval="5"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
const pathData = `${__RESOURCE_URL__}json/beijing-bus-lines.json`
const getPath = (data) => {
  let prevPt
  const points: number[][] = []
  for (let i = 0; i < data.length; i += 2) {
    let pt = [data[i], data[i + 1]]
    if (i > 0) {
      pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
    }
    prevPt = pt

    points.push([pt[0] / 1e4, pt[1] / 1e4])
  }
  return points
}
const getColor = () => [Math.random() * 150 + 100, Math.random() * 100 + 28, 93]
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
speed	Speed of movement/animation.	number	1
trail-length	Length of the trail (e.g., in number of segments or time units).	number	10
interval	Time interval between updates/frames (e.g., in milliseconds).	number	5
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	{}
get-color	Color information.	string / AnyFunc / number[]	black
get-path	Path information.	AnyFunc	object => object.path
get-width	Width information.	number / AnyNumberFunc	100
miter-limit	Miter limit (used when cap-rounded is false).	number	4
cap-rounded	Whether the line caps are rounded.	boolean	false
joint-rounded	Whether the line joints are rounded.	boolean	false
width-max-pixels	Maximum width in pixels.	number	Number.MAX_SAFE_INTEGER
width-min-pixels	Minimum width in pixels.	number	0
width-scale	Scaling factor for the width.	number	1
width-units	Units for the width (pixels or meters).	string ('pixels' / 'meters')	'meters'

EVENTS

Name	Description	Parameters

SLOTS

Name	Description

METHODS

Name	Description	Definition