一、天气展示方式

长期以来，气象数据可视化对饼状图、柱状图、表格图等传统图形图表的使用率是最高的。不可否认，此类图形图表是数据可视化的鼻祖，在很多时候也是最清晰有效的。但是，在可视化技术飞速发展的当下，传统图形图表一方面已经跟不上用户多样化的信息获取脚步；另一方面，相对单一的可视化表达方式也无法满足气象数据分析过程中越来越深入化、专业化的解读需要。

本文及后续文章将集中研究天气图的可视化引擎，实现气象数据的多样可视化表达与分析。实现散点图、色斑图、等值线面、流场图、流线图等多种可视化效果。查看相关示例：海洋气象，潮汐。

二、wind-layer插件介绍

wind-layer 设计之初是来源于 earth (opens new window)cambecc (opens new window)的一个气象数据的展示，他使用了流体场的方式去展示了全球的风速和风向富有很强的表现力, 这个插件的很多核心代码也是来源于此。

wind-layer可以和openlayers，leaflet等主流的地图插件配合使用，本文主要介绍如何在openlayers中加载风场图，其主要的API说明如下：

图层参数

参数	说明	类型	默认值
`windOptions`	风场参数，具体配置如下	`object`	`--`
`map`	地图对象，必须配置，不需要调用 `addLayer`，具体可以参考 `openlayer` 官方文档	`ol.Map`	`--`
`zIndex`	图层层级	`number`	`--`

其他参数遵循 ol 基础图层参数。

#windOptions

参数	说明	类型	默认值
`globalAlpha`	全局透明度，主要影响粒子路径拖尾效果	`number`	`0.9`
`lineWidth`	粒子路径宽度	`number\\|function`	`1`, 当为回调函数时，参数`function(m:对应点风速值) => number`
`colorScale`	粒子颜色配置	`string\\|function\\|string[]`	`#fff`，当为回调函数时，参数`function(m:对应点风速值) => string`
`velocityScale`	对于粒子路径步长的乘积基数	`number`	`1 / 25`
`maxAge \\| particleAge(不推荐使用)`	粒子路径能够生成的最大帧数	`number`	`90`
`paths`	生成的粒子路径数量	`number\\|function`	`800`, 当为回调函数时，参数`function(m:对应点风速值) => number`
`particleMultiplier`	粒子路径数量的系数，不推荐使用（视野宽度 * 高度 * 系数）	`number`	`1 / 300`
`frameRate`	帧率（ms）	`number`

三、使用实例

function getwind(load) {if(load!=false){show("load");// 显示加载图标，一般是加载gif图片}$.ajax({type : "post",dataType : "json",xhrFields : {withCredentials : false},url : "Getwind",async : true,success : function(result) {closeid("load");//关闭加载动画if (result.msg == "ok") {                               // 判断是否已经加载了windlayer图层，如果已经加载，直接更新数据即可if(windlayer!=undefined){windlayer.setData(result.content);windlayer.setMap(map);windlayer.start();return;}                              // 初始化风场插件windlayer = new OlWind.WindLayer(result.content, {windOptions : {// colorScale: scale,velocityScale : 1 / 100, //粒子路径长度  paths : 3000, // 粒子数量frameRate : 100,// 刷新率，单位是毫秒// eslint-disable-next-line no-unused-varscolorScale : [ "rgb(36,104, 180)", "rgb(60,157, 194)","rgb(128,205,193 )", "rgb(151,218,168 )","rgb(198,231,181)", "rgb(238,247,217)","rgb(255,238,159)", "rgb(252,217,125)","rgb(255,182,100)", "rgb(252,150,75)","rgb(250,112,52)", "rgb(245,64,32)","rgb(237,45,28)", "rgb(220,24,32)","rgb(180,0,35)" ],lineWidth : 2,// colorScale: scale,generateParticleOption : false},map : map,// openlayers的map容器// projection: 'EPSG:4326'});}},error : function() {closeid("load");}})}

风场数据是风的u、v模式数据，数据格式请参见：天气API

海洋气象数据可视化，以流场的方式显示风场图，海洋气象API使用相关推荐

echart雷达图数据图形的填充颜色_数据可视化，职场数据分析都需要哪些常用的图表？...
数据可视化是为了使得数据更高效的反应数据情况,便于让读者更高效阅读,而不单是自己使用,通过数据可视化突出数据背后的规律,以此突出数据中的重要因素,并且,数据可视化可以将数据变得更加直观. 使用图表数据 ...
html实现数据分布,【数据可视化】项目分布地图设计之显示省份地图
实现效果项目分布地图效果鼠标悬停效果需求分析显示陕西省省份地图显示地市的名称根据项目数量,动态调整气球浮标的大小准备步骤下载echarts,官网下载下载echarts中的省份信息,可 ...
【数据可视化】项目分布地图设计之显示省份地图
实现效果项目分布地图效果鼠标悬停效果需求分析显示陕西省省份地图显示地市的名称根据项目数量,动态调整气球浮标的大小准备步骤下载echarts,官网下载下载echarts中的省份信息,可 ...
数据可视化（全彩）（大数据丛书，首次全面细致地梳理了可视化理论，方法、工具与应用案例。马匡六教授、石教英教授鼎力推荐，十二五国家重点图书出版规划项目）...
大数据丛书数据可视化(全彩)(大数据丛书,首次全面细致地梳理了可视化理论,方法.工具与应用案例.马匡六教授.石教英教授鼎力推荐,十二五国家重点图书出版规划项目) 陈为沈则潜等编著 ISBN 97 ...
大数据可视化技术的作用有哪些
在大数据时代,数据可视化技术在广泛应用的同时,也面临诸多新的挑战.大数据可视化是一个面向应用的研究领域,本文重点从应用实践的角度,讨论在大数据背景下大数据可视化内涵.研究进展.相关技术与产品以及所面临 ...
数字冰雹创始人邓潇专访：2017大数据可视化的关键技术及行业应用
大数据可视化的内涵与意义大数据可视化就是利用视觉的方式将那些巨大的.复杂的.枯燥的.潜逻辑的数据展现出来,无论通过地理空间.时间序列,还是逻辑关系等不同维度,最终使读者在短时间内理解数据背后的规律与 ...
数据可视化是怎样创造出来的
来源未知. 多次被炫目的数据可视化或信息可视化震惊,在我知道这些图片背后的数据来源和创造历程后,更是为之诧异不止.它涉足制图学.图形绘制设计.计算机视觉.数据采集.统计学.图解技术.数型结合以及动画 ...
python基于Echarts的城科就业数据可视化系统毕业设计源码150915
Python城科就业数据可视化系统摘要对于处理广泛的数据并整合到本地,Python爬虫有着自已强大的功能,面对城科就业数据可视化系统研究,我们考虑借助Python爬虫的功能对其实现相应的处理,本 ...
labview波形图两个游标,LabVIEW数据可视化：使用波形图表控件逐点显示曲线的方法...
LabVIEW平台中提供了强大的2D/3D数据的可视化控件,如波形图.波形图表.XY图.强度图.数字波形图.混合信号图.二维/三维图片及用于特殊用途的极坐标图.Smith图.雷达图控件等. 上篇文章: ...

海洋气象数据可视化，以流场的方式显示风场图，海洋气象API使用

一、天气展示方式

二、wind-layer插件介绍

图层参数

#windOptions

三、使用实例

海洋气象数据可视化，以流场的方式显示风场图，海洋气象API使用相关推荐

最新文章

热门文章

海洋气象数据可视化，以流场的方式显示风场图，海洋气象API使用

一、 天气展示方式

二、wind-layer插件介绍

图层参数

#windOptions

三、使用实例

海洋气象数据可视化，以流场的方式显示风场图，海洋气象API使用相关推荐

最新文章

热门文章

一、天气展示方式