弧线图层（ArcLayer）

示例

示例源码

<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

名称	描述	类型	默认值
id	图层Id	string	-
source-position	源位置	AnyArr / AnyFunc	-
target-position	目的位置	AnyArr / AnyFunc	-
auto-highlight	本属性为true且pickable为true时，则会将鼠标悬浮选中的对象设为高亮	boolean	false
data	图层源数据	string / IndexAny / AnyArr / Promise<any>	''
highlight-color	要与高亮对象原始颜色进行混合(blend)的颜色值	string / number[]	[255, 255, 128, 1]
highlighted-object-index	高亮元素序号	number	-1
opacity	透明度	number	1
pickable	图层是否会响应鼠标事件，若为false，则组件不会emit鼠标相关事件	boolean	false
show	是否显示	boolean	true
source-color	源颜色	string / AnyFunc	black
target-color	目标颜色	string / AnyFunc	black
width	宽度	number / AnyNumberFunc	1

EVENTS

名称	描述	参数
created	初始化完成事件	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

名称	描述

METHODS

名称	描述	定义