手把手教你用vue+JavaScript+openlayers+iview制作实时天气预报图

啥都不说先看效果

还有事件统计功能，以及本地天气预报功能。

这算是前端技术中的webgis相关的知识，这些实现都是用的纯前端加上中国天气网api和高德地图的地理编码的api请求数据。因为这个小demo涉及的数据传递较多，所以我选择使用vue框架，另外为了地图的展示，openlayers作为开源的webgis库，是很值得被选择，本项目涉及较多的就是openlayers添加地图，以及在地图上添加overlayers

以下代码为map以及overlayers的添加

setMap:function () {this.map = new Map({layers: [new TileLayer({source: new OSM()})],target: 'map',view: new View({center: this.center,zoom: this.zoom,projection: 'EPSG:4326',// projection:'EPSG：3785',rotation: this.rotation,minZoom: 5,maxZoom: 15})
})},setOverlayer:function(){this.overlay = new Overlay({element: document.getElementById('popup'),autoPan: true,autoPanAnimation: {duration: 250}})this.map.addOverlay(this.overlay);
},

另外一个难点就是，异步请求api数据，由于本人的js水平有限，就采用了es6中比较简单的async与await结合的方法写的，还有其他解决方案，比如generator函数，还有promise等，迭代书写异步的方式，

async getWeatherData(){
let self = this
for(let i=0;i<10;i++){
await axios(
{
method:'get',
url:'https://www.tianqiapi.com/api/',
params: {
appid:'',
appsecret:'',
version:'v6',
city:citys[i]
}
}
).then(function (response) {
// console.log(response);
// self.cityweatherData[i] = []
// self.cityweatherData[i].push(citys[i] )
self.cityweatherData[i].push(response['data']['tem'])
self.cityweatherData[i].push(response['data']['wea'])
self.cityweatherData[i].push(response['data']['wea_img'])
// self.cityweatherData[i].push(response['data']['HeWeather6']['0']['now']['tmp'])
})
.catch(function (error) {
console.log(error);
})
await axios(
{
method:'get',
url:'https://restapi.amap.com/v3/geocode/geo?parameters',
params: {
key:'',
address: citys[i],
city: citys[i],
// dataType:'JSONP',
output:'json'
}
}
).then(function (response) {
// console.log(response)
// console.log(response['data']['geocodes']['0']['location'])
self.cityweatherData[i].push(citys[i])
self.cityweatherData[i].push(response['data']['geocodes']['0']['location'])
})
.catch(function (error) {
console.log(error);
})

本项目大量涉及到向dom中添加新的div，和img等，这就涉及到html元素在浏览器加载的过程细节以及一些动态添加新的dom元素以及新的样式等，看上去简单，实则不然，比如下面的代码

addPics(){
for(let i = 0;i<10;i++){
let all = document.getElementById('all');
let sElement = document.createElement("div");
let img = document.createElement('div')
let text = document.createElement('div')
sElement.id = "overlay" + i;
sElement.classList.add("picout")
text.classList.add("temtext")
text.innerHTML = this.cityweatherData[i][0] + '℃'
all.appendChild(sElement)
switch(this.cityweatherData[i][2]){
case"yun":
img.classList.add("yun");break;
case"qing":
img.classList.add("qing");break;
case"yin":
img.classList.add("yin");break;
case"yu":
img.classList.add("yu");break;
case"shachen":
img.classList.add("shachen");break;
case"xue":
img.classList.add("xue");break;
case"lei":
img.classList.add("lei");break;
case"wu":
img.classList.add("wu");break;
case"bingbao":
img.classList.add("bingbao");break;
}
let box = document.getElementById(sElement.id)
box.appendChild(img)
box.appendChild(text)
let oly = new Overlay({
element: box,
// autoPan: true,
// positioning: 'center-center'
})
console.log(this.cityweatherData[i][4])
let lon = Number((this.cityweatherData[i][4].split(','))[0])
let lat = Number((this.cityweatherData[i][4].split(','))[1])
console.log(lon,lat)
this.map.addOverlay(oly)
oly.setPosition([lon,lat])
}
},
changeZoom(){
let _this = this
let picouts = document.getElementsByClassName('picout')
let temtexts = document.getElementsByClassName('temtext')
this.map.on("moveend",function(e){
let zoom = _this.map.getView().getZoom() //获取当前地图的缩放级别
if (zoom<9) {
for(let i=0;i<picouts.length;i++){
console.log(temtexts[i].style.fontSize)
picouts[i].style.height = 100*Math.pow(2,(zoom-8)) + 'px'
picouts[i].style.width = 100*Math.pow(2,(zoom-8)) + 'px'
temtexts[i].style.fontSize = 18*Math.pow(2,(zoom-8)) + 'px'
}}})}
}

另外其中的表格，使用的是vue的一个iview组件库，可以即拿即用，很方便

这就是主要的实现过程了，对于中间不太懂得js库大家可以百度他的用法，还有需要源码的同学可以添加公众号“前端从入门到SP”获取，回复“天气预报”回复的文章中就有源码哦

点关注，不迷路哦，每天更新大量前端资料

手把手教你用vue+JavaScript+openlayers+iview制作实时天气预报图相关推荐

用python画皇冠_手把手教你用 Python 绘制酷炫的桑基图！
原标题:手把手教你用 Python 绘制酷炫的桑基图! 作者 | 周志鹏责编 | 郭芮最近,不止一次收到小伙伴的截图追问: "这个图叫什么???" "这个图真好看! ...
手把手教你solidworks重力下落物体动画制作
手把手教你solidworks重力下落物体动画制作 1.首先建立装配体,导入圆柱和圆弧面. 2.对它们进行装配,配合方式为相切,配合的面为圆柱的圆弧面和绿色零件的弧面.然后再用宽度配合,宽度选择为圆柱 ...
六、手把手教你搭建SpringCloudAlibaba之Sentinel实现流量实时监控
SpringCloud Alibaba全集文章目录: 零.手把手教你搭建SpringCloudAlibaba项目一.手把手教你搭建SpringCloud Alibaba之生产者与消费者二.手把手教 ...
python做出来的小程序、可以在win10上面运行_超详细，手把手教你用20行Python代码制作飞花令小程序！...
原标题:超详细,手把手教你用20行Python代码制作飞花令小程序! 来源:早起Python 作者:陈熹飞花令是古时候人们经常玩一种"行酒令"的游戏,是中国古代酒令之一,属雅令. ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
???作者:bug菌博客:CSDN.掘金等 ??公众号:猿圈奇妙屋 ??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合. ??版权声明:文章里可能部分文字或者图片来源于互联网或者百度 ...
cli3暴露api地址 vue_手把手教你开发 Vue 组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
pls-00302: 必须声明组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
vue 手机端答题页面_从0开始，手把手教你用Vue开发一个答题App
项目演示项目源码配套讲解视频教程说明本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把手一步 ...

手把手教你用vue+JavaScript+openlayers+iview制作实时天气预报图

手把手教你用vue+JavaScript+openlayers+iview制作实时天气预报图相关推荐

最新文章

热门文章