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

2024-06-06 19:40| 来源: 网络整理| 查看: 265

啥都不说先看效果

在这里插入图片描述还有事件统计功能，以及本地天气预报功能。

这算是前端技术中的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

【本文地址】

公司简介

联系我们