手把手教你用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另外其中的表格，使用的是vue的一个iview组件库，可以即拿即用，很方便
这就是主要的实现过程了，对于中间不太懂得js库大家可以百度他的用法，还有需要源码的同学可以添加公众号“前端从入门到SP”获取，回复“天气预报”回复的文章中就有源码哦
点关注，不迷路哦，每天更新大量前端资料