antv-l7/packages/site/docs/tutorial/point/wave.zh.md

title	order
水波图	3

平面点图层在开启动画模式的情况下，是一种特殊的图层类型：水波点。图层由一圈圈向外扩散的圆环构成。

实现

根据下面的代码可以实现一个简单的水波点案例。

• 你可以在 L7 官网上找到在线案例。

• 具体的使用可以查看详细文档。

import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'light',
    center: [ 112, 23.69 ],
    zoom: 2.5
  })
});
fetch('https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv')
  .then(res => res.text())
  .then(data => {
    const pointLayer = new PointLayer({})
      .source(data, {
        parser: {
          type: 'csv',
          x: 'Longitude',
          y: 'Latitude'
        }
      })
      .shape('circle')
      .animate(true)
      .size(40)
      .color('#ffa842')
    scene.addLayer(pointLayer);
  });

shape

为了实现水波点，点图层的 shape 参数只要是 circle、triangle、square 等平面图形即可。

animate

• boolean ｜ animateOption

.animate(true)

.animate({
  enable: true
})

水波配置项

• speed 水波速度
• rings 水波环数

size

在水波点图层中，由于边缘透明的原因，点的大小看上去要比相同 size 的非水波点要小一些。