【Canvas】记录一次从0到1绘制风场空间分布图的过程

news2024/11/13 9:11:57

前言

 📫 大家好,我是南木元元,热衷分享有趣实用的文章,希望大家多多支持,一起进步!

 🍅 个人主页:南木元元


目录

背景

前置知识

风场数据

绘制风场

准备工作

生成二维网格

获取格点风矢位置

风力等级

计算风矢坐标位置

旋转角度

绘制格点风矢

结语


背景

项目里遇到个需求,要求绘制出风场的空间分布图,一开始的想法是:这有什么难的,直接用echarts不就可以了。但当我看完设计图后,不得不感叹一句,好家伙,这还真有点复杂。最终要实现的效果如下图所示:

由于自定义的程度比较高,echarts肯定是不行的,思来想去,于是决定用canvas来从0到1自己实现,同时也可以顺带把canvas的知识巩固一下(温馨提示:全文可能有点长)。

前置知识

首先解释一下什么是风场空间分布图。

风场空间分布图:一种用于展示区域内风速和风向随空间位置变化的图表,这种图表通常以箭头或风矢的形式来表示风的方向和强度。这使我们可以直观地看到风速、风向的变化规律,它常常在气象学、风能工程等领域中被广泛使用。

本文采用风矢的形式来进行风场的可视化。在气象学中,风矢是用于表示风向和风速的符号图标。风矢由2部分组成,分别为风向杆与风羽。

  • 风向杆:表示风的方向
  • 风羽:分别用长划线和短划线或者与风三角组合的方式表示风速的大小。

了解了上面的概念后,我们下面就将使用Canvas来展示如何绘制风场的空间分布图。

风场数据

数据来源于用户自建的气象观测产品库,原始数据一般是netcdf或grib2的格式,需要后端将其解析成json格式的数据,解析后的数据格式大致如下:

{
    "yaxis": [10, 20, ...],
    "xaxis": [[39.4, 107.16], [37.286667, 107.72223], ...]
    "elementDataList": [
        {
            "name": "windS",
            "subData": [
                {
                    "level": "10",
                    "data": [
                        8.9,
                        10.3,
                        ...
                    ]
                },
                {
                    "level": "20",
                    "data": [
                        4.6,
                        8.1,
                        ...
                    ]
                },
                ...
        },
        {
            "name": "windD",
            "subData": [
                {
                    "level": "10",
                    "data": [
                        59.8,
                        65.0,
                        ...
                    ]
                },
                {
                    "level": "20",
                    "data": [
                        60.1,
                        58.5,
                        ...
                    ]
                },
                ...
            ]
        }
    ]
}

纵轴yaxis代表不同的高度层,横轴xaxis代表不同的经纬度坐标,要素列表elementDataList中目前只有一个风场要素(还有其它的气象要素如温度、降水量等,这里不展开),由于风场是矢量要素,同时具有大小和方向,所以这里将风的数据拆分成了windS风速列表和windD风向列表,列表中的值分别为每个高度层所对应的数据。

绘制风场

准备工作

定义一个绘制的类,做一些初始化的操作:属性设置,获取canvas的2d渲染上下文。

class drawWind {
    constructor(data){ 
        //网格属性
        this.property = {
          OFFSET_X: 42, //x轴间隔
          OFFSET_Y: 20, //y轴间隔
        };
        //获取2d渲染上下文
        this.canvas2d = document.getElementById('canvas');
        this.ctx2d = this.canvas2d.getContext("2d");
        //后端返回数据
        this.data = data;
        this.xaxis = data.xaxis;
        this.yaxis = data.yaxis;
        //处理后的数据
        this.wind10S = [];
        this.wind10D = [];
    }
    //初始化数据
    init() {
        //处理一下返回的风速和风向数据,这里不详细展开,最终处理成网格点数据即可
        this.wind10S = this.handleData("wind10S");
        this.wind10D = this.handleData("wind10D");
    }
  }
}

还需要处理一下后端返回的数据,变成二维网格点数据,如下:

  • 风速数据

  •  风向数据

最终需要的数据就是网格点数据,即每个网格点都对应其风速和风向数据。

生成二维网格

生成风场需要构造二维网格,canvas绘制二维网格的思路很简单,先使用strokeRect设置一个矩形的边框,然后分别遍历横坐标和纵坐标列表,进行虚线的绘制。

draw2dMesh() {
    //生成矩形边框
    this.ctx2d.strokeRect(0, 0, this.canvas2d.width, this.canvas2d.height);
    //设置虚线样式
    this.ctx2d.lineWidth = 0.6;
    this.ctx2d.strokeStyle = "rgb(192, 192, 192)";
    this.ctx2d.beginPath();
    //遍历绘制纵向虚线
    for (let i = 1; i <= this.xaxis.length; i++) {
      this.ctx2d.setLineDash([5, 3]);
      this.ctx2d.moveTo(this.property.OFFSET_X * i, 0);
      this.ctx2d.lineTo(this.property.OFFSET_X * i, this.canvas2d.height);
    }
    //遍历绘制横向虚线
    for (let i = 1; i <= this.yaxis.length; i++) {
      this.ctx2d.setLineDash([5, 3]);
      this.ctx2d.moveTo(0, this.property.OFFSET_Y * i);
      this.ctx2d.lineTo(this.canvas2d.width, this.property.OFFSET_Y * i);
    }
    this.ctx2d.stroke();
}

绘制的网格如下:

获取格点风矢位置

每个网格点上的风矢形状是下面这样的。

所以在正式绘制前,我们还需要先计算每个风矢中的风杆和风羽数,得到每个点的位置。

风力等级

风力等级的计算公式:

可以参考这两篇文章:风力的级别换算和风力、等级、风速对照表和计算公式。

这里我们采用的是32个等级,可以预先定义好每个等级对应的风杆、长短划线以及风三角的数量。

this.Level = {
    "TRIANGLE": 20,
    "LONG": 4,
    "SHORT": 2,
},
this.Count = {
    "TRIANGLE": 10,
    "LONG": 2,
    "SHORT": 1,
},
//32个风力等级,每个数组中的四个值依次代表风杆数量、短划线数量、长划线数量、风三角数量
this.windLevel = [
    [0, 1, 0, 0],
    [1, 1, 0, 0],
    [1, 0, 1, 0],
    [1, 1, 1, 0],
    [1, 0, 2, 0],
    [1, 1, 2, 0],
    [1, 0, 3, 0],
    [1, 1, 3, 0],
    [1, 0, 4, 0],
    [1, 1, 4, 0],
    [1, 0, 0, 1],
    [1, 1, 0, 1],
    [1, 0, 1, 1],
    [1, 1, 1, 1],
    [1, 0, 2, 1],
    [1, 1, 2, 1],
    [1, 0, 3, 1],
    [1, 1, 3, 1],
    [1, 0, 4, 1],
    [1, 1, 4, 1],
    [1, 0, 0, 2],
    [1, 1, 0, 2],
    [1, 0, 1, 2],
    [1, 1, 1, 2],
    [1, 0, 2, 2],
    [1, 1, 2, 2],
    [1, 0, 3, 2],
    [1, 1, 3, 2],
    [1, 0, 4, 2],
    [1, 1, 4, 2],
],
//风矢属性:风杆长,长划线长,短划线长,划线间隔,风三角边长
this.featherProperty = {
    poleLength: 10,
    longLine: 10,
    shortLine: 5,
    lineSpace: 1,
    triangle: 2,
};

定义计算风力等级的方法。

// 根据风速计算风力等级,公式:v = 0.836 * b^(3/2) v:风速 b:风级
calWindLevel(speed) {
    let triangle = Math.floor(speed / this.Level.TRIANGLE);
    let long = Math.floor((speed - this.Level.TRIANGLE * triangle) / this.Level.LONG);
    let short = Math.floor((speed - this.Level.TRIANGLE * triangle - this.Level.LONG * long) / this.Level.SHORT);
    let idx = triangle * this.Count.TRIANGLE + long * this.Count.LONG + short * this.Count.SHORT;
    if (idx > 30) {
        idx = 30;
    }

    return idx;
}

计算风矢坐标位置

接下来需要计算得到每个网格点上的风矢中每个点的位置,这部分是整个流程中最为复杂的。

来说说我的思路:定义一个数组,用于存放当前格点的风矢位置,然后获取计算得到的风杆、长短划线等数量,从风杆顶部开始,依次放入风杆、风三角、长划线、短划线的位置。

//用于存放所有网格点风矢的位置
let position = [];
// 计算坐标位置:Num为当前网格点对应的风力等级,包含各种数量
getPointPosition(Num) {
    //用于存放当前格点风矢的位置
    let position = [];  
    let pole = Num[0]; //风杆数量
    let short = Num[1]; //短划线数量
    let long = Num[2]; //长划线数量
    let triangle = Num[3]; //风三角数量
    //当前顶点纵坐标位置从风杆顶部开始,这里为负是由于canvas坐标系y轴向下为正
    let yOffset = -this.featherProperty.poleLength;
    if (pole == 0) { //风杆数为0
        position.push(
            0, 0,
            this.featherProperty.shortLine, 0,
            this.featherProperty.shortLine, 0  //为了和风三角的三个一组一致,多加了一个点
        );
        //把当前格点的风羽位置放入数组
        position.push(position);
        return;
    }

    //放入风杆位置
    position.push(
        0, 0,
        0, -this.featherProperty.poleLength,    //向上为负
        0, -this.featherProperty.poleLength
    );

    //判断风三角是否为0,不为0向其中添加顶点
    if (triangle != 0) {
        for (let i = 0; i < triangle; ++i) {
            position.push(
                0, yOffset,
                0, yOffset + this.featherProperty.triangle,  //triangle为三角形边长
                this.featherProperty.longLine, yOffset + (this.featherProperty.triangle / 2)
            );
            //每画完一个三角形,当前y坐标就要下移,由于canvas向下为正,所以即为加上三角形边长再加划线和三角形的间距
            yOffset = yOffset + this.featherProperty.triangle + this.featherProperty.lineSpace;
        }
    }

    //判断长划线是否为0,不为0向其中添加顶点
    if (long != 0) {
        for (let i = 0; i < long; ++i) {
            position.push(
                0, yOffset,
                this.featherProperty.longLine, yOffset,
                this.featherProperty.longLine, yOffset
            );
            yOffset = yOffset + this.featherProperty.lineSpace;
        }
    }

    //判断短划线是否为0,不为0向其中添加顶点
    if (short != 0) {
        for (let i = 0; i < short; ++i) {
            position.push(
                0, yOffset,
                this.featherProperty.shortLine, yOffset,
                this.featherProperty.shortLine, yOffset
            );
            yOffset = yOffset + this.featherProperty.lineSpace;
        }
    }
    //把当前格点的风羽位置放入数组
    position.push(position);
}

得到的风矢各个点的坐标数组大致如下:

旋转角度

风向决定了每个风矢在格点的旋转角度,由于旋转的时候以每个格点坐标为中心,所以记录一下每个格点的坐标位置。

// 获取旋转角度
getRotateData() {
    // 保存旋转中心点,即网格点坐标
    let center = [];
    // 保存风向
    let angle = [];
    for (let y = 0; y < this.yaxis.length; y++) {
      for (let x = 0; x < this.xaxis.length; x++) {
        // 获取风向
        let angle_point = this.angle[x + y * this.xaxis.length];
        // 计算网格点坐标
        let center = [(x + 1) * this.offsetX, (y + 1) * this.offsetY];
        center.push(center); 
        angle.push([angle_point]);
      }
    }
    return {
        angle: angle,
        center: center,
    };
}

绘制格点风矢

做完上述操作后,终于可以开始绘制啦。绘制的思路:由于之前在计算位置的时候就统一3个坐标为一组(即画线只需两个坐标点,但我们也多加了一个重复的点,为了和画三角形统一),所以现在只需遍历顶点数组,来绘制每个格点的风矢就可以了。

// 绘制
drawFeather(data, color, size) {
    // 设置样式
    this.ctx.lineWidth = size;   
    this.ctx.strokeStyle = color;    
    this.ctx.fillStyle = color;
    // 让虚线变成实线条
    this.ctx.setLineDash([]);
    let position = data.position;
    let center = data.center;
    let angle = data.angle;
    // 遍历顶点数组,绘制每个格点的风矢
    for(let i = 0; i < center.length; i++) {
        for(let j = 0; j < position[i].length; j += 6) {
            // 保存画布 (canvas) 的所有状态
            this.ctx.save(); 
            // 移动canvas原点到此处,使得当前格点为坐标为原点(0,0)
            this.ctx.translate(center[i][0],center[i][1]);   
            this.ctx.rotate(angle[i][0] * Math.PI/180);
            this.ctx.beginPath();
            // 之前处理后的数据都是三个为一组(包括线条),直接画线即可
            this.ctx.moveTo(position[i][j], position[i][j+1]);
            this.ctx.lineTo(position[i][j+2], position[i][j+3]);
            this.ctx.lineTo(position[i][j+4], position[i][j+5]);
            this.ctx.fill(); 
            this.ctx.stroke();   
            // 恢复 canvas 状态
            this.ctx.restore();  
        }
    }
}

注意:在绘制每个格点风矢的时候,都需要save保存一下将当前canvas的状态入栈,绘制完后restore弹出恢复状态,为的是绘制下一个格点的风矢时都可以重新从canvas的坐标原点(0,0)开始平移到网格中心点,然后进行旋转操作。

最终的效果:

现在主要的部分我们都已经完成了,剩下的其实就是绘制横坐标和纵坐标,由于这部分比较简单,其实就是利用canvas绘制文字,这里就不再详细展开了。

结语

本文主要记录了一次自己使用canvas从0到1绘制风场空间分布图的经历,整个过程还是蛮复杂的,不过也刚好巩固了一下自己的canvas知识,将其运用到了实践中,同时也发现自己对知识的理解其实还存在许多的不足,需要继续努力!

🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏✍️评论支持一下博主~ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1304924.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ppt转换成pdf文件

最近用到了&#xff0c;记一下&#xff1b; ppt转pdf分为两种情况: 小于2007版本的 .ppt格式&#xff08;2003&#xff09; 与大于2007版本的 .pptx格式&#xff08;2007&#xff09; .ppt格式为 二进制文件 .pptx格式为xml格式&#xff0c;在java中有不同的jar包需要使用 引入…

MacOS 12 开放指定端口 指定ip访问

MacOS 12 开放指定端口 指定ip访问 在 macOS 上开放一个端口&#xff0c;并指定只能特定的 IP 访问&#xff0c;你可以使用 macOS 内置的 pfctl&#xff08;Packet Filter&#xff09;工具来实现。 以下是一些基本的步骤&#xff1a; 1、 编辑 pf 配置文件&#xff1a; 打开 /…

Dockerfile创建镜像--LNMP+wordpress

实验准备&#xff1a; nginx&#xff1a;172.111.0.10 docker-nginx mysql&#xff1a;172.111.0.20 docker-mysql php&#xff1a;172.111.0.30 docker-php 自定义网段&#xff1a;172.111.0.0/16mkdir nginx mysql php mv nginx-1.22.0.tar.gz wordpress-6.4.2-zh_CN.ta…

数据结构之选择排序

目录 直接选择排序 选择排序的时间复杂度 堆排序 向上调整算法 向下调整算法 向上调整算法建立堆 向下调整算法建立堆 堆排序整体代码 堆排序的时间复杂度 直接选择排序 在之前讲插入排序时&#xff0c;我们讲了这样的一个应用场景&#xff0c;我们在斗地主摸牌时&…

PyInstaller 打包 Python 脚本为 .exe 可执行文件闪退、No Model named XXX问题

文章目录 前言.exe 可执行文件闪退No Model named XXXPython 环境问题查看当前python路径查看当前python环境使用的site-package路径 个人简介 前言 在上一篇文章中&#xff0c;我们介绍了如何将 Python 脚本打包为 .exe 可执行文件&#xff0c;但有时候打包生成的 .exe 文件会…

慢SQL诊断

最近经常遇到技术开发跑来问我慢SQL优化相关工作&#xff0c;所以干脆出几篇SQL相关优化技术月报&#xff0c;我这里就以公司mysql一致的5.7版本来说明下。 在企业中慢SQL问题进场会遇到&#xff0c;尤其像我们这种ERP行业。 成熟的公司企业都会有晚上的慢SQL监控和预警机制。…

阿里云cdn设置相同的域名路径访问不同的oss目录

1.设置回源配置&#xff0c;添加回源URL改写 2.设置跨域&#xff0c;cdn的跨域优先oss 3.回源设置

前端 三种解决跨域问题 jsonp 、CORS、代理服务器 解决跨域全家桶

我的报错情况是 后端接口是3000 前端本地接口是8080&#xff0c;最后出现跨域 1.什么是跨域&#xff1f; 首先跨域是一种安全机制&#xff0c;是在开发上线前考虑到的安全问题并且需要采取合适的手段去避免这个问题带来的程序错误,接口跨域可以后端处理,也可以前端处理&#x…

Docker的安装与简单操作命令

目录 前言 docker的安装 基础docker操作 容器管理 镜像管理 容器镜像封装与加载 前言 前文简单说明了容器技术出现的背景&#xff0c;与对docker做了结构上的介绍Container容器技术简介-CSDN博客https://blog.csdn.net/qq_72569959/article/details/134814887 讲到dock…

Day07 Liunx高级系统设计8-线程

概述 进程与线程 进程 : 系统分配资源的基本单位 , 可以简单理解为一个正在进行的程序 线程 : 操作系统调度的最小单位 , 就是一段代码的执行顺序 注意&#xff1a; 1, 一个进程必须要有一个线程 , 该线程被称为主线程 2, 一个进程可以有多个线程 , 除主线程外的其他线程都是…

玻色量子袁为出席中国移动第四届科技周量子计算算法与应用分论坛

9月12日&#xff0c;中国移动第四届科技周“量子计算算法与应用”分论坛在北京成功举办&#xff0c;中国移动研究院院长黄宇红发表致辞&#xff0c;中国移动未来研究院院长崔春风全程主持。玻色量子作为光量子计算领域真机测试与场景应用的标杆企业应邀出席&#xff0c;玻色量子…

散点图,何须图,折线图混放在一个echarts

散点图&#xff0c;何须图&#xff0c;折线图混放在一个echarts option {tooltip: {trigger: axis,axisPointer: {type: cross,crossStyle: {color: #999}}},legend: {data:[盒须图1,盒须图2,折线图,散点图]},xAxis: [{type: category,data: [周一,周二,周三,周四,周五,周六…

智能优化算法应用:基于花授粉算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于花授粉算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于花授粉算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.花授粉算法4.实验参数设定5.算法结果6.参考文…

vue3 + ts 防抖指令,节流指令,复制指令

vue3 ts 自定义指令 防抖指令&#xff0c;节流指令&#xff0c;复制指令 本文使用了 element-ui , element-plus 官网 源文件 https://admin.spicyboy.cn/#/directives/debounceDirect 新建 copy.ts 文件 &#xff08;复制指令&#xff09; import type { Directive, Di…

重新思考U-Net在医学超声图像分割中的应用(NU-net)

Rethinking the Unpretentious U-net for Medical Ultrasound Image Segmentation 摘要&#xff1a; 乳腺肿瘤分割是帮助我们描述和定位肿瘤区域的关键步骤之一。然而&#xff0c;乳腺肿瘤形态多变、边界模糊、强度分布相似&#xff0c;给乳腺肿瘤的准确分割带来了挑战。近年…

java系列-LinkedHashMap

1.插入新节点时&#xff0c;会将该节点加到链表尾部 public class LinkedHashMap<K,V> extends HashMap<K,V> implements Map<K,V>{/*** The head (eldest) of the doubly linked list.*/transient LinkedHashMapEntry<K,V> head;/*** The tail (young…

C语言数据结构-栈和队列

文章目录 1 栈的表示与实践1.1 栈的概念及结构1.2 定义数据结构1.3 初始化与销毁1.4 入栈1.5 出栈1.6 栈顶的数据1.7 栈的个数1.8 栈是否是空1.9 打印栈 2 队列的表示与实现2.1 队列的概念与结构2.2 队列的数据结构定义2.3 队列的初始化与销毁2.4 入队2.5 出队2.6 取队头数据2.…

enumerate()函数讲解+同时获取索引和对应的元素值+实例

enumerate()函数是Python内置函数&#xff0c;用于在遍历可迭代对象&#xff08;如列表、字符串、元组等&#xff09;时&#xff0c;同时获取索引和对应的元素值。 它的主要作用是在循环过程中方便地获取索引和元素。 下面以两个例子来进行介绍理解。 目录 一、例子1 二、例…

打造‘产业大数据综合服务平台’,助力智慧园区建设!

随着大数据、人工智能、云计算、物联网等新一代信息技术的发展与应用&#xff0c;我国各类型园区正在向“智慧园区”转型升级&#xff0c;逐步开启数字化、智能化的运营管理模式。智慧园区的建设不仅需要基础设施的智慧化&#xff0c;更要实现园区规划、运营、管理、服务的智慧…

plf::list原理分析

plf::list是一个比std::list性能要好的另外一种实现&#xff0c;根据作者的性能测试&#xff1a; 293% faster insertion 57% faster erasure 17% faster iteration 77% faster sorting 70% faster reversal 91% faster remove/remove_if 63% faster unique 811% faster clear …