openlayers、baidumap实现动态风场展示

功能说明

1.  气象网上下载的风场数据包括最基本的温度、U、V等
2. 普通展示一般为静态展示，echarts实现了动态展示使用webgl，但是效率很差
3. 接下来介绍的是一款开源的openlayers、baidu map,速度很快，通过h5 canvas，animate实现

github项目

https://github.com/blissvisitor/wind-layer

特点

1. 提供了源码及使用方式
2. 数据下载地址及批量下载接口
3. example中提供了实例及测试数据

简单介绍下openlayers实现方式

//初始化地图ol
var Maps = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        layerName: 'baseLayer',
        preload: 4,
        source: new ol.source.OSM({
          url: "http://{a-c}.sm.mapstack.stamen.com/" +
          "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
          "{z}/{x}/{y}.png"
        })
      })
    ],
    loadTilesWhileAnimating: true,
    view: new ol.View({
      projection: 'EPSG:3857',
      center: [113.53450137499999, 34.44104525],
      zoom: 5
    })
  });
//请求json数据，可以改成jquery http请求方式
  axios.get('https://sakitam-fdd.github.io/wind-layer/examples/out.json').then(function (res) {
    if (res.data) {
      var wind = new WindLayer(res.data, {//初始化风场图层
        layerName: '',
        minResolution: undefined,
        maxResolution: undefined,
        zIndex: 0,
        projection: 'EPSG:3857',
        ratio: 1
      })
      wind.appendTo(Maps)
    }
  })

注

数据包括三部分，分别是T,U,V；header中有具体说明。

如果报错，看一下文件中构造函数，里面包括了openlayers、baidumap等方式

阿里云服务器礼包领取https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=osn3nsml

本站提供网站搭建环境配置服务。