mapbox-glowworm v1.2.4

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

全局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;
}