风场可视化学习笔记：openlayers
最近在弄地图控件方面的东西，这里分享一个我找到的一个添加风场的教程和demo，需要对大家有所帮助（以下为转载内容）载于https://blog.csdn.net/u010065726/article/details/106338194/
windLayer api使用示例
这里主要为windlayer关于在openlayers3-4版本内使用的相关接口及参数说明
在加载时，主要读取的数据来源格式为json，而我们一般获取到的数据主要为netCDF或Grib等格式的数据，这里还涉及相关的数据转换操作
1.openlayers-wind 参数说明
TIP
对应于 openlayers 3-4 相关参数
图层参数
其他参数遵循 ol 基础图层参数。
windOptions
colorScale
关于颜色配置，在以往的配置中传入的是颜色数组会根据以下函数和格点数据的数据范围去计算匹配的颜色值，
const indexFor = function (m) { // map velocity speed to a style
return Math.max(0, Math.min((that.COLOR_SCALE.length - 1),
Math.round((m - min) / (max - min) * (that.COLOR_SCALE.length - 1))));
}
这样实现只能按照风速值范围等间隔渲染，无法做到精确匹配对应值的颜色。
在最新的版本中新增了此参数的类型，可以通过回调函数精确对应颜色值（但是会有一定的性能损失）
颜色配置支持三种方式：
String：固定颜色值
Function: 通过回调函数的风速值设定颜色（但是会有一定的性能损失）
String[]: 按照风速值范围等间隔渲染，无法做到精确匹配对应值的颜色。
2.数据来源
风场数据来源主要为气象的数据文件，可以详见另一篇文章 windy网站数据分析 。文章中提到的windy基本涵盖了大部分的气象数据来源，大家可以参考一下。
在使用wind-layer需要了解相关的数据转换，大家可以多下下功夫，有什么内容也可以分享出来，大家互相学习下。
3.图层初始化并格网分析数据源
调用相关的API接口，添加相应的图层对象
demo代码如下：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
风向demo
</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.css">
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js">
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.css">
<script src="https://cdn.jsdelivr.net/npm/openlayers-wind/dist/ol-wind.js">
</script>
<style type="text/css">
html, body { margin: 0; height: 100%; width: 100% }
.container { width: 100%; height: 100% }
</style>
<body>
<div id="map" class="container">
</div>
<script>
const map = new ol.Map({
target: 'map',
view: new ol.View({
center: [113.53450137499999, 34.44104525],
// center: ol.proj.fromLonLat([113.53450137499999, 34.44104525]),
zoom: 5,
projection: 'EPSG:4326',
}),
layers: [new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://{a-d}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
})
})],
}); let layer; // https://sakitam-fdd.github.io/wind-layer/data/wind.json
fetch('https://sakitam-fdd.github.io/wind-layer/data/wind.json').then(res => res.json()).then(res =>{
const windLayer = new OlWind.WindLayer(res, {
windOptions: {
colorScale: ["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)"],
velocityScale: 1 / 100,
paths: 1000,
},
map: map,
}); analysisWindyData(res);
console.log(map, windLayer); layer = windLayer; // layer.appendTo(map);
map.addLayer(windLayer);
map.on('singleclick', e =>{
var details = getWindyDetail(e.coordinate);
console.log(details);
alert(' 风向:' + details.direction + '\n 风级:' + details.level + '\n 风速:' + details.speed);
});
}); var allgrid = [];
function analysisWindyData(windydata) {
var p = 0;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]];
}
allgrid[j] = row;
}
}
function getWindyDetail(coord) {
var lng = coord[0];
var lat = coord[1];
// 与格网序列的数据转换
if (lng >= 0) {
lng = Math.floor(lng);
} else {
lng = 360 + Math.floor(lng)
}
lat = 90 - Math.floor(lat);
// 获取对应的格网序列
var xlength = lng;
var ylength = lat;
var xdata, ydata;
xdata = allgrid[Math.abs(ylength)][Math.abs(xlength)][0];
ydata = allgrid[Math.abs(ylength)][Math.abs(xlength)][1];
console.log(xdata);
console.log(ydata);
if (typeof xdata != "number" || typeof ydata != "number") {
console.error("暂无该区域风向数据！");
return;
}
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;
} }
</script>
</body>
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
风场可视化学习笔记：openlayers的更多相关文章
- R语言可视化学习笔记之添加p-value和显著性标记
R语言可视化学习笔记之添加p-value和显著性标记 http://www.jianshu.com/p/b7274afff14f?from=timeline 上篇文章中提了一下如何通过ggpubr ...
- R语言可视化学习笔记之添加p-value和显著性标记--转载
https://www.jianshu.com/p/b7274afff14f?from=timeline #先加载包 library(ggpubr) #加载数据集ToothGrowth data(&q ...
- R语言可视化学习笔记之ggpubr包—SCI文章图
转载:https://www.jianshu.com/p/678213d605a5?from=jiantop.com Hadley Wickham创建的可视化包ggplot2可以流畅地进行优美的可视化 ...
- R ggplot学习笔记1
R 可视化学习笔记 记参数挺费劲的,还是用的时候查官方文档吧,现在记个大概就行吧~ 1.ggplot2分层次绘图 1.1 核心理念 把绘图与数据分离,把数据相关的绘图与数据无关的绘图分离,按图层作图. ...
- GIS案例学习笔记-三维生成和可视化表达
GIS案例学习笔记-三维生成和可视化表达 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:针对栅格或者矢量数值型数据,进行三维可视化表达 操作时间:15分钟 案 ...
- ArcGIS案例学习笔记2_2_txtexcel空间可视化和空间插值
ArcGIS案例学习笔记2_2_txt/excel空间可视化和空间插值 计划时间:第二天下午 教程:pdf page=337 数据:chapter8/ex4 方法: 1.加载xy.txt和gdp.tx ...
- qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...
- Caffe学习笔记4图像特征进行可视化
Caffe学习笔记4图像特征进行可视化 本文为原创作品,未经本人同意,禁止转载,禁止用于商业用途!本人对博客使用拥有最终解释权 欢迎关注我的博客:http://blog.csdn.net/hit201 ...
- SpringCloud学习笔记(5)：Hystrix Dashboard可视化监控数据
简介 上篇文章中讲了使用Hystrix实现容错,除此之外,Hystrix还提供了近乎实时的监控.本文将介绍如何进行服务监控以及使用Hystrix Dashboard来让监控数据图形化. 项目介绍 sc ...
- OpenLayers 6 学习笔记
这个是真的学习笔记!不是教程 转载请声明:https://www.cnblogs.com/onsummer/p/12159366.html 基于openlayers 6.x api不太好查,就基于腾讯 ...
随机推荐
- 云计算 - 负载均衡SLB方案全解与实战
云计算 - 负载均衡SLB方案全解与实战,介绍SLB的核心技术.用户最佳实践.阿里云 SLB产品举例.应用场景. 关注[TechLeadCloud],分享互联网架构.云服务技术的全维度知识.作者拥有1 ...
- Python实现冒泡排序、选择排序、插入排序
排序与搜索 排序算法(英语:Sorting algorithm)是一种能将一串数据依照特定顺序进行排列的一种算法. 排序算法的稳定性 稳定性:稳定排序算法会让原本有相等键值的纪录维持相对次序.也就是如 ...
- DP的各种优化小结
动态规划算法(简称动规,DP),是IO中最为常见的,也是最为重要的算法之一.这也就意味着,在各种题目与比赛中它会有很多稀奇古怪的算法和优化,时不时地在你的面前出现一个TLE,MLE和RE来搞你的心态. ...
- sensitive-word 敏感词/脏词开源工具-v.0.10.0-脏词分类标签支持
sensitive-word sensitive-word 基于 DFA 算法实现的高性能敏感词工具. 创作目的 实现一款好用敏感词工具. 基于 DFA 算法实现,目前敏感词库内容收录 6W+(源文件 ...
- CSS隐藏元素的方法
CSS隐藏元素的方法 使用CSS隐藏元素的主要方式有diaplay: none;.opacity: 0;.visibility: hidden;.position: absolute; overflo ...
- od命令
od命令 od命令会读取所指定的文件的内容,并将其内容以八进制字节码呈现出来. 语法 od [OPTION]... [FILE]... od [-abcdfilosx]... [FILE] [[+]O ...
- image could not be accessed on a registry to record its digest
问题说明: 在管理节点执行docker stack xxx 方式运行服务,报如题错误. 问题原因: docker swarm运行需要一个镜像仓库才行,所有节点都去这个仓库统一镜像. 来看下官方的解释: ...
- Java并发编程实例--15.在同步代码块中使用条件
并发编程中有个经典问题: 生产消费者问题. 我们有一个数据缓冲区,一个或多个生产者往其中存入对象,另外一个或多个消费者从中取走. 因此,该数据缓冲区是一个共享数据结构,我们需要对其添加读取同步机制,但 ...
- Kotlin 协程五 —— 在Android 中使用 Kotlin 协程
目录 一.Android MVVM 结构 二.添加依赖 三.在后台线程中执行 3.1 协程解决了什么问题 3.2 保证主线程安全 3.3 withContext 的性能 四.结构化并发 4.1 追踪协 ...
- PicGo如何设置阿里云图床
打开阿里云官网.注册并且登录.然后产品下拉列表里面通过搜索或者直接找到存储.对象存储OSS 默认你已经激活了,然后进入到控制台里面. 注意事项 Bucket名称需要全英文,不能有大写字母 服务器选国内 ...