mapbox-glowworm

适用于mapbox-gl的萤火虫打点效果

效果如下：

在线体验demo(请配置自己的mapbox token): open in codesandbox

example

1. 初始化一个GlowwormMap实例并且添加一个萤火虫发光图层

import GlowwormMap from 'mapbox-glowworm';

// ...
const map = new mapboxgl.Map({
  ...
});
// ...
map.on('load', () => {
  const mapData = [
    {
      gps: [114.184921, 22.350617],
      level: '', // 点类型 自定义，后序点的颜色根据这个字段匹配
    }
  ]
  const glowworm = new GlowwormMap(map); // 传入mapbox实例
  glowworm.addGlowwormLayer(mapData, {
    glowwormLayerName: 'glowwormLayerName',
  });
});

addGlowwormLayer方法配置项以及参数说明

1. params data

data: MapDotBack[]

2. params options

options: GlowwormMapOptions

GlowwormMapOptions	type	required	description
mapColorList	string[] or number[]	false	普通环形打点颜色列表
glowwormInnerColorList	string[] or number[]	false	萤火虫打点内环颜色列表
glowwormOutColorList	string[] or number[]	false	萤火虫打点外环颜色列表，内环比外环颜色应当更深一点
colorKey	string	false	匹配颜色的自定义字段，不传则默认为keyStr
dotSize	number[]	false	dotSize示例：[14.1, 3, 32, 9]，根据不同zoom匹配不同的大小，circleRadius和dotSize只能二选一，传入circleRadius后则dotSize失效
circleBlur	number or StyleFunction or Expression	false
circleColor	string or StyleFunction or Expression	false
circleRadius	number or StyleFunction or Expression	false
circleStrokeWidth	number or StyleFunction or Expression	false
circleStrokeColor	string or StyleFunction or Expression	false
circleOpacity	number	false

全局types

interface MapDotBack {
  gps: number[];
  level?: string;
}
interface MapOptions {
  mapColorList?: (number | string) []; // 普通打点颜色列表
  glowwormInnerColorList?: (number | string) []; // 萤火虫打点内环颜色
  glowwormOutColorList?: (number | string) []; // 萤火虫打点外环颜色
  colorKey?: string; // 匹配颜色的自定义字段
  dotSize?: number[];
  circleBlur?: number | StyleFunction | Expression;
  circleColor?: string | StyleFunction | Expression;
  circleRadius?: number | StyleFunction | Expression;
  circleStrokeWidth?: number | StyleFunction | Expression;
  circleStrokeColor?: string | StyleFunction | Expression;
  circleOpacity?: number;
}