ArcLayer

Example

Example Source Code

<template>
  <div style="height: 400px">
    <mb-map :pitch="60" :bearing="30" :zoom="2.5">
      <mb-tianditu-layer />
      <mb-arc-layer
        :data="data"
        :source-position="[116, 39]"
        :target-position="(d) => d.to"
        :width="3"
        source-color="rgb(255, 0, 128)"
        target-color="rgb(0, 200, 255)"
      />
    </mb-map>
  </div>
</template>

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

const data = ref<Array<{ to: [number, number] }>>([])

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(81, 150), getRandomArbitrary(0, 60)],
    })
  }
})
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
source-position	Source position. This defines the starting point of the connection/line. Can be an array of coordinates (e.g., [longitude, latitude] or [x, y, z]) or a function that returns the coordinates based on the data.	AnyArr / AnyFunc	-
target-position	Target position. This defines the ending point of the connection/line. Can be an array of coordinates (e.g., [longitude, latitude] or [x, y, z]) or a function that returns the coordinates based on the data.	AnyArr / AnyFunc	-
auto-highlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data. This data is often used in conjunction with accessor functions (like source-position, target-position, source-color, target-color, etc.) to dynamically style the connections/lines.	string / IndexAny / AnyArr / Promise<any>	''
highlight-color	The color to blend with the original color of the highlighted object. This creates the highlight effect. The value can be a color string (e.g., 'red', '#FF0000') or an RGBA array (e.g., [255, 0, 0, 255] for red).	string / number[]	[255, 255, 128, 1]
highlighted-object-index	The index of the currently highlighted object within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
opacity	The opacity of the connection/line (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true
source-color	Color of the source point of the connection/line. This can be a string representing a color name, a function that returns a color based on the data, or an array of RGBA values.	string / AnyFunc	'black'
target-color	Color of the target point of the connection/line. This can be a string representing a color name, a function that returns a color based on the data, or an array of RGBA values.	string / AnyFunc	'black'
width	Width of the connection/line. This can be a fixed number or a function that returns the width based on the data.	number / AnyNumberFunc	1

EVENTS

Name	Description	Parameters
created	Initialization complete event	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

Name	Description

METHODS

Name	Description	Definition