openlayers 实现风场效果图

要求：在地图中展示风场效果，大致效果如下图

由于不会这方面的原理，只能搬砖，也没啥好说的，下面开始搬砖吧。
开发环境：openlayers5
参考：
https://github.com/Esri/wind-js
https://github.com/blissvisitor/wind-layer
https://github.com/sakitam-fdd/wind-layer
https://blog.csdn.net/u012413551/article/details/94298039
https://www.cnblogs.com/yanjinliang/p/7879312.html
思路：
利用别人封装的适用于openlayers的windy.js开发风场效果，风场数据采用项目中json文件夹下的current-wind.json做数据源
主体代码：

var projection = ol.proj.get('EPSG:4326');var projectionExtent = projection.getExtent();var size = ol.extent.getWidth(projectionExtent) / 256;var resolutions = new Array(19);var matrixIds = new Array(19);for (var z = 1; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);matrixIds[z] = z;}var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.WMTS({name: "天地图影像地图",url: "http://t{0-7}.tianditu.gov.cn/vec_c/wmts?tk=1b94e3699b4d7b567dfb6c82599ef519",layer: "vec",style: "default",matrixSet: "c",format: "tiles",wrapX: true,tileGrid: new ol.tilegrid.WMTS({origin: ol.extent.getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds})}),maxResolution: resolutions[0],minResolution: resolutions[18]})],view: new ol.View({projection: 'EPSG:4326',center: [113.53450137499999, 34.44104525],zoom: 5})});
function getWindyLayer(){$.ajax({url:"json/current-wind.json",type:"get",dataType:"json",success:function(result){if(result.returnCode == "0"){windydata = JSON.parse(result.DS.content);if(!!windyLayer){windyLayer.setData(windydata);}else{windyLayer = new WindLayer(windydata, {layerName: 'data',projection: 'EPSG:4326',ratio: 1,map: map});windyLayer.appendTo(map);}}else{alert("暂无风场数据！");}}})
}
function exitWindyLayer(){windyLayer.clearWind();
}

效果：
https://kaixin51.github.io/openlayers-windy/

最近有个需求是，通过这个风场的数据，要求点击地图上任意一个点，返回风有关的详情。一脸懵逼中，然后去查了一下数据对应的含义：得到以下信息:
风场数据结构大致为：

[{header: {dx: 1dy: 1la1: -7.5la2: -28.5lo1: 143lo2: 156nx: 14ny: 22parameterCategory: 2parameterNumber: 2parameterNumberName: "eastward_wind"parameterUnit: "m.s-1"refTime: "2017-02-01 23:00:00"},data:[num1,num2,....]},{header{结构同上},data:[.....]}]

其中：
dx、dy网格间距,
nx、ny网格数量，总网格数量= nx * ny = data.length;
parameterNumberName:表示风向
parameterUnit:风速单位
lo1:起点经度
la1:起点纬度
lo2:终点经度
la2:终点纬度

data中提供了正东方向和正北方向的风速，于是可以求得对应的风速和风向。


var allgrid = [];
function analysisWindyData(windydata){var p = 0;var east,north;if(windydata[0].header.parameterNumberName == "eastward_wind"){east = windydata[0];north = windydata[1];}else{east = windydata[1];north = windydata[0];}for (var j = 0; j < north.header.ny; j++) {var row = [];for (var i = 0; i < north.header.nx; i++, p++) {row[i] = [east.data[p],north.data[p]];}grid[j] = row;}
}function getWindyDetail(coord){var lng = coord[0];var lat = coord[1];if(lng < 70 || lng > 140 || lat < 0 || lat > 60){layer.alert("暂无该区域风向数据！");return;}var xlength = Math.floor((lng-70)/0.5);var ylength = Math.floor((60-lat)/0.5);var xdata,ydata;xdata = allgrid[ylength][xlength][0];ydata = allgrid[ylength][xlength][1];console.log(xdata);console.log(ydata);var v = Math.sqrt(Math.pow(xdata,2)+Math.pow(ydata,2));var angle = getWindyAngle(xdata,ydata);var result = {"direction":getWindyDirection(angle),"level":getWindyLevel(v),"speed":v.toFixed(2)};return result;
}function getWindyDirection(angle){if((angle >=0 && angle <= 22.5) || (angle <=360 && angle >337.5)){return "北风";}if(angle <=337.5 && angle >292.5){return "西北风";}if(angle <=292.5 && angle > 247.5){return "西风";}if(angle <=247.5 && angle > 202.5){return "西南风";}if(angle <= 202.5 && angle >157.5){return "南风";}if(angle <=157.5 && angle > 112.5){return "东南风";}if(angle <= 112.5 && angle >67.5){return "东风";}if(angle <= 67.5 && angle >22.5){return "东北风";}
}function getWindyAngle(u,v) {var fx = 0;if (u > 0 & v > 0) {fx = 270 - Math.atan(v / u) * 180 / Math.PI;}else if (u < 0 & v > 0) {fx = 90 - Math.atan(v / u) * 180 / Math.PI;}else if (u < 0 & v < 0) {fx = 90 - Math.atan(v / u) * 180 / Math.PI;}else if (u > 0 & v < 0) {fx = 270 - Math.atan(v / u) * 180 / Math.PI;}else if (u == 0 & v > 0) {fx = 180;}else if (u == 0 & v < 0) {fx = 0;}else if (u > 0 & v == 0) {fx = 270;}else if (u < 0 & v == 0) {fx = 90;}else if (u == 0 & v == 0) {fx = 999.9;}return fx;
}function getWindyLevel(v){if(v<0.3){return 0;}if(v>=0.3 && v<1.6){return 1;}if(v>=1.6 && v<3.4){return 2;}if(v>=3.4 && v<5.5){return 3;}if(v>=5.5 && v<8.0){return 4;}if(v>=8.0 && v<10.8){return 5;}if(v>=10.8 && v<13.9){return 6;}if(v>=13.9 && v<17.2){return 7;}if(v>=17.2 && v<20.8){return 8;}if(v>=20.8 && v<24.5){return 9;}if(v>=24.5 && v<28.5){return 10;}if(v>=28.5 && v<32.7){return 11;}if(v>=32.7 && v<37.0){return 12;}if(v>=37.0 && v<41.5){return 13;}if(v>=41.5 && v<46.2){return 14;}if(v>=46.2 && v<51.0){return 15;}if(v>=51.0 && v<56.1){return 16;}if(v>=56.1 && v<61.2){return 17;}if(v>=61.2){return 18;}}

openlayers 实现风场效果图相关推荐

vue + 高德地图 + wind-layer实现风场
vue + 高德地图 + wind-layer实现风场效果图: 第一步:引入 wind-layer插件或者 npm install ol-wind npm install amap-wind ht ...
基于cesium+canvas构建小区内部风场图
1.应用说明去年项目中用到了风场显示,最近回顾了一下,重拾了一下记忆,也记录一下.当时需求就是比如在某城市一个小区的真实动态风场进行模拟显示,主要模拟小区内不同季节.不同高度下的主导风的走向,和不同 ...
openlayers扩展：风场可视化（wind-layer）
windLayer api使用示例这里主要为windlayer关于在openlayers3-4版本内使用的相关接口及参数说明在加载时,主要读取的数据来源格式为json,而我们一般获取到的数据主要为 ...
【WebGIS】Openlayers流动线与风场效果
目录基础开发一.流动线二.风场源码基础开发一.流动线效果展示基础原理通过openlayers API,设置线段样式 ol/style/Stroke下的 lineDash 和 line ...
基于OpenLayers+rbush实现高德轨迹样式
一前言近期翻阅博客,看到社区大神一休哥的一篇<canvas 奇巧淫技(二)绘制箭头路径效果>文章,同样,该大神还展示过一个使用rbush库如何在前端快速从海量数据进行空间检索的案例 ...
openlayers入门开发系列之地图属性查询篇
本篇的重点内容是利用openlayers实现地图属性查询功能,效果图如下: 实现思路: 模糊查询点击事件 //模糊查询 $("#swatchQuery").bind("c ...
openlayers入门开发系列之图层控制
本篇的重点内容是利用openlayers实现地图图层控制功能,效果图如下: 部分核心代码如下: 页面引用ztree插件图层管理器界面布局图层管理器初始化js LayerSwitcher类定义详细 ...
openlayers入门开发系列之热力图篇
本篇的重点内容是利用openlayers实现热力图功能,效果图如下: 实现思路热力图界面设计 //热力图 "<div style='height:25px;background:#3 ...
开源GIS（九）——openlayers中简单要素的添加与geojson数据修改添加
目录一.引言二.简单要素点线面的添加 1.创建feature 2.创建style,添加source.style到layer 3.添加layer到map 三.WFS获取geojson数据并修改四. ...

openlayers 实现风场效果图

openlayers 实现风场效果图相关推荐

最新文章

热门文章