动态轨迹（TrailLayer）

示例

示例源码

<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

名称	描述	类型	默认值
id	图层Id	string	-
speed	速度	number	1
trail-length	-	number	10
interval	时间间隔	number	5
data	图层源数据	string / IndexAny / AnyArr / Promise<any>	''
show	是否显示	boolean	true
opacity	透明度	number	1
pickable	图层是否会响应鼠标事件，若为false，则组件不会emit鼠标相关事件	boolean	false
auto-highlight	本属性为true且pickable为true时，则会将鼠标悬浮选中的对象设为高亮	boolean	false
highlight-color	要与高亮对象原始颜色进行混合(blend)的颜色值	string / number[]	[255, 255, 128, 1]
highlighted-object-index	高亮元素序号	number	-1
on-data-load	-	AnyFunc	-
data-transform	-	AnyFunc	-
transitions	-	IndexAny	{}
get-color	颜色信息	string / AnyFunc / number[]	black
get-path	路径信息	AnyFunc	object => object.path
get-width	宽度信息	number / AnyNumberFunc	100
miter-limit	rounded为false时生效	number	4
cap-rounded	-	boolean	false
joint-rounded	-	boolean	false
width-max-pixels	-	number	Number.MAX_SAFE_INTEGER
width-min-pixels	-	number	0
width-scale	-	number	1
width-units	-	string（pixels / meters）	meters

EVENTS

名称	描述	参数

SLOTS

名称	描述

METHODS

名称	描述	定义