硬货：vue+openlayers实现一张降雨分布图

macheng0824

全国多地暴雨来袭，国家气象局发布了最新的降水量实况图，而小编作为一名前端人员，从开发的角度来让大家了解一下这种降雨实况图是怎么实现的，只要我们从气象局拿到数据，就可以实现一张降雨分布图。#降雨#
我们先来看一下中央气象台发布的降雨实况图：

降雨实况图（1）

再来看看我们自己制作的降雨实况图：

接下来我们详细说明一下，原理很简单：
气象局给我们没有地图底图的图片，类似这种透明图片，然后我们在地图上进行叠加，然后进行截图展示，最终形成类似气象台发布的降雨实况图。

把透明底图往地图上叠加

实现过程：

openlayers的具体使用可关注我，我会在之后的文章中详细教学或者自行百度哦！

一、vue+openlayers初始化地图
/**安装opellayers*地图对象在用时需要引用进来*/<template>        <div id="map" class="map"></div></template><script>        import "ol/ol.css";        import Map from "ol/Map";        import OSM from "ol/source/OSM";        import TileLayer from "ol/layer/Tile";        import View from "ol/View";        export default {                mounted() {                        this.initMap();                },                methods: {                        initMap() {                                new Map({                                        layers: [                                                new TileLayer({                                                        source: new OSM()                                                })                                        ],                                        target: "map",                                        view: new View({                                                center: [0, 0],                                                zoom: 2                                        })                                });                                console.log("init finished");                        }                }        };</script><style>        .map {                width: 100%;                height: 400px;        }</style>二、叠加图片
/**extent：图片的四角，即最大/最小经纬度*url：需要叠加的图片路径*/var extent = [89.3, 31.35, 103.05, 39.4]var url = '图片地址'this.imgLayers('降雨实况图', extent, url)imgLayers(title, extent, imgUrl, opacity = 1, zindex = 200) {  const self = this  self.rl = new ImageLayer({    zIndex: zindex,    title: title,    visible: true,    opacity: opacity  })  self.map.addLayer(self.rl)  var source = new Static({    url: imgUrl,    crossOrigin: null,    projection: "EPSG:4326",    imageExtent: extent  })  self.rl.setSource(source)},三、进行截图展示
截图我们采用的是html2canvas插件，我在用的时候就发现一个大坑，为避免大家踩坑，我重点说一下哈：
如果说你的DOM结构里放的是网络图片，不是本地图片，是截取不到任何内容的，也就是截取的图片一一片空白，这时候需要把网络图片地址转化成base64，然后进行截取。
当然base64的地址图片也是可以叠加到openlayers地图上的，在叠加之前我们转化一下，随后直接截取已经弄好的降雨分布图。
网络图片转化成base64：
/**img： 需要转化的图片路径：例如：http://110.110.1.1/2021/1.png*/imageUrlToBase64(img) {  var dataUrl = ''  var image = new Image()  image.crossOrigin = ''  image.src = img  image.onload = () => {    var url = this.getBase64Image(image)    var extent = [89.3, 31.35, 103.05, 39.4]    this.imgLayers('降雨实况图', extent, url)  }  return dataUrl},  getBase64Image(img) {    var canvas = document.createElement('canvas')    canvas.width = img.width    canvas.height = img.height    var ctx = canvas.getContext('2d')    ctx.drawImage(img, 0, 0, img.width, img.height)    var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()    var dataURL = canvas.toDataURL('image/' + ext)    return dataURL},进行截图：
/**dom: 需要截取内容的DOM结构*/html2canvas(document.getElementById('dom')).then(function(canvas) {  var myImage = canvas.toDataURL('image/png')  var a = document.createElement('a') // 可以直接下载到本地  a.download = name || '图片' // 设置图片地址  a.href = myImage  a.click()})总结

一句话，就是把拿到的透明底图往地图上叠加，然后生成一张图片供我们使用。
Vue 引入萤石云摄像头——vue-video-player
vue实现hls(m3u8)g格式流地址的视频直播流

追风少年

了解一下降雨实况图的实现啊