暴雨袭击全国多地，国家气象局发布最新降水地图。作为前端工作人员，边肖从发展的角度让大家了解这个雨量图是如何实现的，只要我们从气象局得到数据，就可以实现一个雨量分布图。#降雨量#我们先来看看中央气象台发布的实际降雨量图：
雨量实况图(1)
让我们来看看我们自己的雨量图：
接下来，我们来详细解释一下。原理很简单：气象局给我们一张没有地图底图的图，类似于这张透明图，然后我们叠加在地图上，再截图展示，最终形成类似于气象台发布的真实雨量图。
在地图上覆盖透明底图
实现过程：openlayers的具体使用方法请关注我，我会在后面的文章中或者自己百度详细讲授！
I. vue openlayers初始化地图
/* *安装opellayers*使用时需要引用地图对象*/
第二，叠加图片
/**extent:图片的四个角，即最大/最小经纬度*url:要叠加的图片路径*/var extent=[89.3，31.35，103.05，39.4] var URL='图片地址' this.imgLayers('降雨实景图'Extent，URL) img Layers extent，imgUrl，opacity=1，zIndex=200){ const self=this self . rl=new ImageLayer({ zIndex:zIndex，title第三，截图展示截图。我们使用html2canvas插件。
当我用它的时候，我发现了一个大洞。为了避免人踩坑，我重点说一下：如果你把网络图片放在你的DOM结构中，而不是本地图片，那么你就无法截取任何内容，也就是截取的图片是空白的。这时候你需要把网络图片地址转换成base64，截取它们。
当然，base64的地址图也可以叠加在openlayers地图上。叠加之前我们会进行转换，然后直接截取完成的雨量分布图。图像转换为base64:
/**img:要转换的图像的路径：例如：http://110 . 110 . 1 . 1/2023/1 . png */imageurldatabase 64(img){ var data URL=' ' var image=new image()image . cross origin=' ' image . src=img image . onload=()={ var URL=this . getbase 64 image(image)var extent=[89.3，31.35，103.05，39.4) 1).to lower case()vardataurl=canvas . toda taurl(' image/' ext)return dataurl }，并截图：
/**dom:需要截取内容的dom结构*/html 2 can vas(document . getelementbyid(' DOM '))。然后(function(canvas){ Var my image=canvas . toda taurl(' image/png ')Var=document . createelement(' a ')//可以直接下载到本地a . download=name | | ' picture '//Set图片地址a.href=myImage a.click()})。总结一下，就是把透明的底图叠加在地图上，然后生成一张图片给我们使用。E Vue引入萤石云摄像机——vue-video-playervue实现hls(m3u8)g格式流地址的视频流直播。
