硬货：vue+openlayers实现一张降雨分布图
全国多地暴雨来袭，国家气象局发布了最新的降水量实况图，而小编作为一名前端人员，从开发的角度来让大家了解一下这种降雨实况图是怎么实现的，只要我们从气象局拿到数据，就可以实现一张降雨分布图。#降雨#我们先来看一下中央气象台发布的降雨实况图：
降雨实况图（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: , zoom: 2 }) }); console.log("init finished"); } } };</script><style> .map { width: 100%; height: 400px; }</style>二、叠加图片
/**extent：图片的四角，即最大/最小经纬度*url：需要叠加的图片路径*/var extent = var url = '图片地址'this.imgLayers('降雨实况图', extent, url)imgLayers(title, extent, imgUrl, opacity = 1, zindex = 200) {const self = thisself.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 = imgimage.onload = () => { var url = this.getBase64Image(image) var extent = 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 = myImagea.click()})总结
一句话，就是把拿到的透明底图往地图上叠加，然后生成一张图片供我们使用。
Vue 引入萤石云摄像头——vue-video-player
vue实现hls(m3u8)g格式流地址的视频直播流 了解一下降雨实况图的实现啊
页:
[1]