MigrationLayer

Example

Example Source Code

<template>
  <div class="map-container">
    <mb-map :pitch="60" :bearing="30" :zoom="3.5">
      <mb-tianditu-layer :types="['img']" />
      <mb-arc-layer
        :data="data"
        :source-position="sourcePosition"
        :target-position="targetPosition"
        :width="3"
        :height="0.8"
        :source-color="sourceColor"
        :target-color="targetColor"
      />
      <mb-migration-layer
        :data="data"
        :source-position="sourcePosition"
        :target-position="targetPosition"
        :width="3"
        :height="0.8"
        source-color="#fff"
        target-color="#fff"
        :trail-length="5"
      />
    </mb-map>
  </div>
</template>

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

const data = ref<{ to: [number, number] }[]>([])
const sourcePosition = [116, 39]
const targetPosition = (d) => d.to
const sourceColor = 'rgb(255, 0, 128)'
const targetColor = 'rgb(0, 200, 255)'

function getRandomArbitrary(min: number, max: number) {
  return Math.random() * (max - min) + min
}

onMounted(() => {
  for (let i = 0; i < 100; i++) {
    data.value.push({
      to: [getRandomArbitrary(100, 132), getRandomArbitrary(25, 50)],
    })
  }
})
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
trail-length	Length of the trail (e.g., in number of segments, time units, or distance).	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 this property is 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	{}
source-position	Source position.	AnyArr / AnyFunc	-
target-position	Target position.	AnyArr / AnyFunc	-
source-color	Source color.	string / AnyFunc	'black'
target-color	Target color.	string / AnyFunc	'black'
width	Width.	number / AnyNumberFunc	1

EVENTS

Name	Description	Parameters

SLOTS

Name	Description

METHODS

Name	Description	Definition