mapbox 使用antv/l7添加下雨效果

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单、方便、专业可靠、无限可能的数据可视化最佳实践。AntV包括以下解决方案

• G2：可视化引擎
• G2Plot：图表库
• G6 : 图可视化引擎
• Graphin：基于G6的图分析组件
• F2 ：移动可视化方案
• ChartCube：AntV 图表在线制作
• L7：地理空间数据可视化

地图 Map | L7

这篇文章将展示mapbox借助L7添加下雨效果

一、下载、引入

使用npm下载

npm install @antv/l7

 引入到对应的模块

import { Mapbox } from '@antv/l7-maps';
import { Scene, GeometryLayer } from '@antv/l7';

二、初始化地图对象L7.Scence

1、Mapbox 地图实例化

使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用

import { Mapbox } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'dark',
    center: [103.83735604457024, 1.360253881403068],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
    rotation: 19.313180925794313,
    token: 'xxxx - token',
  }),
});

2、传入 Mapbox 地图实例

为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

mapboxgl.accessToken = 'xxxx - token';
const map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
  center: [120, 30], // starting position [lng, lat]
  zoom: 9, // starting zoom
});

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    mapInstance: map,
  }),
});

这里我推荐使用第二种方法，因为antv内部的mapbox实例版本更新未与官方版本更新同步，会出现很多不兼容的问题。

三、添加图层

SpriteGeometry 是 L7 提供的通用的粒子图层，可以用来绘制各种粒子效果。

scene.on('loaded', () => {
  const layer = new GeometryLayer()
    .shape('sprite')
    .size(10)
    .style({
      opacity: 0.3,
      mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain
      center: [ 120, 30 ],
      spriteCount: 120,
      spriteRadius: 10,
      spriteTop: 2500000,
      spriteUpdate: 20000,
      spriteScale: 0.6
    });
  scene.addLayer(layer);
});

参数说明

source

🌟 SpriteGeometry 不需要设置 source，我们在 style 中通过 center 赋予其位置信息。

style

SpriteGeometry 主要通过 style 方法设置位置、大小以及其他属性。

center: [lng: number, lat: number]

设置 SpriteGeometry 的位置，定位是 SpriteGeometry 的中心。

mapTexture: string

设置精灵的纹理贴图。

spriteRadius: number

粒子的作用半径，默认为 10。
🌟 单个粒子会在图层位置半径范围内随机分布。

spriteAnimate: string

粒子的运动、默认为 'down'，表示向下运动。可选值有 'down'/'up'。

spriteCount: number

图层生成的粒子数量，默认为 100。

spriteTop: number

粒子运动的高度范围，默认为 5000000.
🌟 需要注意的是，在不同的地图底图下，spriteTop/spriteUpdate 的参数值需要进行调整，才能得到较好的效果。默认值是在高德 1.0 的地图上调整的。

spriteUpdate: number

粒子运动刷新的步长，表现为运动速度、默认为 10000。
🌟 需要注意的是，在不同的地图底图下，spriteTop/spriteUpdate 的参数值需要进行调整，才能得到较好的效果。默认值是在高德 1.0 的地图上调整的。

spriteScale: number

粒子大小缩放、默认为 1。

如果对已添加图层进行隐藏或显示，推荐使用hide(), show(),  removeLayer()后如果再次添加会影响其性能，可能会出现页面卡顿的现象。

//显示
 layer.show() 
//隐藏
 layer.hide();

官网示例

几何体图层 | L7