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 idstyle: 'mapbox://styles/mapbox/streets-v11', // stylesheet locationcenter: [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', // raincenter: [ 120, 30 ],spriteCount: 120,spriteRadius: 10,spriteTop: 2500000,spriteUpdate: 20000,spriteScale: 0.6});scene.addLayer(layer);
});参数说明
source
mapbox 使用antv/l7添加下雨效果相关推荐
- astar插件下载 就行_PS模拟下雨插件下载 一键为照片添加下雨效果 小伙伴们收货啦...
今天整理文件,找出来一个挺好玩的PS扩展插件,BBtools出品的模拟下雨插件,可以为照片添加下雨效果,其实就是一些动作的整合,不过偶尔用用还是挺有意思的,插件可以手动控制下雨的角度.密度.风速.雨量 ...
- 在vue项目中使用AntV L7地图下钻，异步调用不重复生成
AntV L7 地图下钻的踩坑生成 实现地图下钻.样式.数据异步调用生成,以及细节. ==注释后有'@#@#*'为重要== ==如有不对请指出== 1.安装AntV L7以及相关的组件引用 2.在da ...
- 【数据可视化】Antv L7给地图添加图例Legend
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例.比例尺 L7 目前支持 Control Zoom 放大缩小 Scale 比例尺 Layers 图层列表 组件介绍: impo ...
- @antv/l7绘制地图，添加图例，修改地图上颜色，是否允许地图拖拽，是否滚动缩放等
html <div class="charts-box"><div style="min-height: 300px; justify-content: ...
- html Antv L7 + mapbox 实现3D地图 3D中国地图 不限于中国地图
echarts的3D地图实在太丑了,还一堆bug 使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examp ...
- antv L7地图报错：context lost at Funciton
某天疯狂渲染地图组件,大概17次来回切换,屏幕重新渲染地图,最终它还是没能扛下所有,不幸崩塌. 分析可能的原因: 1.由于L7地图画布一直累加在页面上,old context 无法回溯更新," ...
- antV/L7@1.3.20-」实现北京地图+散点图
现在是2020年07月04日 17:57,刚整理好了antV/L7@2.2.19版本的世界地图+散点图,有兴趣可移步链接,文章最后同样有源码获取方式.加油呀~ ------------------- ...
- Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
- html背景只向x轴扩散,有趣的css—简单的下雨效果2.0版
有趣的css-简单的下雨效果2.0版 推荐 原创 Fatman_2021-05-18 13:37:36©著作权 文章标签 css 阅读数 1119 ©著作权归作者所有:来自51CTO博客作者Fatma ...
最新文章
- 【linux】Valgrind工具集详解（九）：Memcheck检查的内容和方法
- 《数字逻辑设计与计算机组成》一3.3 加法器
- PHP内核探索之变量（2）-理解引用
- ASP.NET身份验证机制membership入门——配置篇(1){转}
- php if a 3 b 5,$a=0; $b=0; if($a=3 || $b=3){ $a++; $b++;} echo $a.”,”.$b;为什么结果是1，1啊...
- Python序列循环移位的3种方法
- shell脚本导出oracle数据库,Shell脚本备份恢复Oracle数据库简单示例
- linux美元符号切换为井号,struts2 (# % $)井号，百分号,美元符号的含义和使用方法举例...
- 「AR裸眼插画」零基础入门级教程来啦
- VMware Workstation 16 Pro发行说明
- 最新小程序反编译详细教程，亲测可用
- 我的sulley安装过程
- c语言写的数据挖掘的层次聚类算法(新手版)
- gms签名不一致_云浮【签名墙】攻略
- Android实现AppCompatActivity全屏半透明
- 友情链接交易网站源码
- 容器混合云时代已来，KubeSphere的差异化竞争力在哪？
- 匠客传媒：论文降重的必备技巧
- aardio - 文件尾部追加图片
- RPCA 稳健主成分分析/鲁棒主成分分析
热门文章