渐变点（DelayedPointLayer）

示例

示例源码

<template>
  <div class="map-container">
    <mb-map :zoom="4" :center="[-96, 37]" background-color="black">
      <mb-delayed-point-layer
        :data="__RESOURCE_URL__ + 'json/americanLibraries.json'"
        :get-position="(d) => d.position"
        :get-fill-color="[49, 92, 114]"
        :get-radius="50"
        :radius-min-pixels="3"
        :get-delay-factor="
          (d) => {
            const result = Math.abs(d.position[0] + 71) / 50
            return result < 0 ? 0 : result > 1 ? 1 : result
          }
        "
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts"></script>

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
get-delay-factor	-	AnyFunc	-
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	{}
radius-units	-	string('meters','pixels')	meters
radius-scale	-	number	1
line-width-units	-	string	meter
line-width-scale	-	number	1
stroked	-	boolean	false
filled	-	boolean	true
radius-min-pixels	-	number	0
radius-max-pixels	-	number	Number.MAX_SAFE_INTEGER
line-width-min-pixels	-	number	0
line-width-max-pixels	-	number	Number.MAX_SAFE_INTEGER
get-position	-	AnyFunc	(d) => d.position
get-radius	-	number / AnyNumberFunc	1
get-fill-color	-	number[] / AnyFunc	[0, 0, 0, 255]
get-line-color	-	number[] / AnyFunc	[0, 0, 0, 255]
get-line-width	-	number / AnyNumberFunc	1

EVENTS

名称	描述	参数

SLOTS

名称	描述

METHODS

名称	描述	定义