Leaflet 可视化--风场、海浪、洋流、气压、温度等

已于 2023-08-31 11:25:40 修改
阅读量1.2w 收藏 82
点赞数 19
分类专栏： Gis Leaflet 气象数据 文章标签： 可视化 前端
于 2020-09-10 10:14:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chysxslt/article/details/108508426
版权
Gis 同时被 3 个专栏收录
3 篇文章 2 订阅
订阅专栏
Leaflet
1 篇文章 0 订阅
订阅专栏
气象数据
1 篇文章 1 订阅
订阅专栏

Leaflet 可视化--风场、海浪、洋流、气压、温度等

实现效果

Leaflet 可视化气象数据

概述

基于leaflet.js实现的矢量、标量数据可视化Demo。
包含风场、海浪、洋流、气压、温度等矢量或标量气象数据的可视化展示。

Demo 视频

Leaflet动态显示–风场、海浪、洋流、气压、温度等矢量、标量数据

参考项目

Demo概述

leaflet-vector-scalar.js 是Demo的核心文件。是基于leaflet-velocity（矢量部分） 同时参考 earth（标量部分） 项目来完成的。
代码还不是很完善。如有需要可自行修改leaflet-vector-scalar.js 文件里，载图中的库类。
L.velocityLayer 和 Wind 是矢量相关类，L.ScalarLayer 和 Scalar 是标量相关类。

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

关于气象数据

请自行参考earth项目中 getting weather data 章节中，关于如何获取实时及历史数据的内容。

源码地址

github.com/chysxslt/leaflet-vector-scalar-js
gitee.com/chysxslt/leaflet-vector-scalar-js

chysxslt
关注
专栏目录
leaflet-wind.7z
07-01
动态风场特效Demo，包含完整代码和示例数据，下载直接运行可查看效果
结合leaflet粒子效果wind-js-leaflet-master.zip
08-04
结合leaflet粒子效果，用于展示时间相关数据，进行一种动态模拟，wind-js-leaflet-master.zip
使用Leaflet进行船舶航行警告区域绘制实战
夜郎King的博客
08-02 2746
本文即以Leaflet为例，重点讲解如何将上述的空间信息转换为可以在地图上浏览的位置信息。首先使用Java语言将上面的涉及的空间坐标（度分秒）调整为常见的经纬度坐标。然后根据不同的点连接成多个面，最后将这些Polygon面数据叠加到Leaflet中，从而实现航行警告中的相关区域和地图的融合。通过本文可以掌握怎么使用Java把度分秒坐标转为标准格式，还可以掌握在Leaflet当中如何把这些Polygon进行空间叠加。
leaflet克里金温度云图展示
12-30
leaflet 克里金 kriging算法展示demo
气象-风场效果leaflet插件.7z
09-01
leaflet风场流线型前端插件 天气风场效果，下载直接可以运行看到效果，html+js+leaflet的demo版，风场效果
探索气象数据之美：leaflet-vector-scalar-js 开源项目推荐
最新发布
gitblog_00380的博客
09-14 505
探索气象数据之美：leaflet-vector-scalar-js 开源项目推荐 leaflet-vector-scalar-js 基于leaflet.js实现的矢量、标量数据可视化Demo 项目地址: https://gitco...
leaflet-vector-scalar-js:基于leaflet.js实现的矢量、标量数据可视化Demo
05-28
leaflet-vector-scalar-js 基于leaflet.js实现的矢量、标量数据可视化Demo。 包含风场、海浪、洋流、气压、温度等矢量或标量气象数据的可视化展示。 Demo 视频 依赖安装 npm install 本地开发调试 npm run serve 参考项目 Demo核心 leaflet-vector-scalar.js 是Demo的核心文件。是基于leaflet-velocity（矢量部分） 同时参考 earth（标量部分） 项目来完成的。 代码还不是很完善，近期可能没有太多时间去修改。 License MIT License (MIT)
气象NC扇形经纬网格转换成前端要求的等经纬网格
03-08 1378
气象NC扇形经纬网格转换成前端leaflet-vector-scalar.js要求的等经纬网格 背景：最近从气象局拿到文件格式为NC的气象文件(包括温度、湿度、风、气压、雨量等)，需要读取其中的温度数据并在前端展示。用专业软件打开一看，图是扇形的，经纬度间隔也不相等。 问题：需要读文件格式为NC的气象文件中的温度数据，并转换为leaflet-vector-scalar.js要求的等经纬网格JSON数据。 解决：通过JAVA调用netcdf包读取NC文件，将NC扇形经纬网格转换成等经纬网格，转.
基于react+leaflet+百度地图实现天气数据可视化-风场地图大数据展示
u010537398的博客
02-28 6783
一：leaflet 一个对移动端优化的交互地图且开源的Javascript库 对于我的实际感受而言，leaflet 是一个十分轻量级的 WebGIS 库。结合其周边资源，对于分析功能需求不那么复杂的 Web GIS 来说足以覆盖到绝大多数功能。 基于leaflet，我们很容易嵌入百度地图，高德地图，谷歌地图等，基于上述地图，可以实现一些大数据可视化操作。 如下是一些例子： 二...
【GIS开发】Leaflet入门学习（Javascript库）
爱看书的小沐
03-20 8603
文章目录1、简介2、快速入门3、功能3.1 标记( Markers)3.2 矢量图层( Vector Layers)3.3 事件处理( Event Handling)后记 JavaScript library for mobile-friendly interactive maps 1、简介 https://github.com/Leaflet/Leaflet https://leafletjs.com/SlavaUkraini/index.html Leaflet.js是一个开源库，使用它我们可以部
136：vue+leaflet：个性化配置，利用Leaflet-Geoman绘制多种图形
大剑师兰特的GIS世界
11-10 721
第136个本示例的目的是介绍演示如何在vue+leaflet中个性化配置，利用Leaflet-Geoman绘制多种图形。灵活地配置Leaflet-Geoman的属性，可以产生各种美妙的绘图效果。
leaflet-virtual-grid:用于Leaflet的轻量级，无DOM的平铺图层，可用于查询具有边界框或中心半径的API，而无需加载平铺
05-08
传单虚拟网格 您可以使用new VirtualGrid生成可用于查询API的L.LatLngBounds对象的简单，可缓存的网格。 这使您可以查询API以获得较小的单位和空间，而永远不会在同一区域中两次调用数据。 事件的用法 var vg = new VirtualGrid ( ) ; // listen for when new cells come into the view for the first time vg . on ( "cellcreate" , function ( e ) { console . log ( e . type , e ) ; } ) ; // listen for when cells reenter the view vg . on ( "cellenter" , function ( e ) { console . log ( e .
leaflet入门demo
02-02
leaflet开源gis，有加载天地图、热力图、聚类图、坐标显示工具、加载图片等gis功能，练手理解leaflet的实现方式
leaflet-solr-heatmap:Solr热图的小叶层
05-03
传单Solr热图 该库包含一个渲染Solr热图的层。 用法 该库可以通过Bower安装： % bower install leaflet-solr-heatmap 安装heatmap.js后，只需在传单脚本之后包含heatmap.js即可： [removed][removed] [removed][removed] 最后将其添加到地图中。 L.SolrHeatmapLayer('http://localhost:8983/solr/<core>', { field: 'geo' }).addTo(map); 请参阅工作。 配置 SolrHeatmapLayer具有许多配
leaflet-velocity，leaflet风场流线插件
09-18
leaflet-velocity，leaflet风场流线插件 个人总结的使用方式，希望对你有用 https://blog.csdn.net/qq_35131811/article/details/82761238
netcdf-vis:使用Leaflet-velocity可视化网络地图上的netCDF风和温度数据
05-05
netcdf-vis是一个Web应用程序，可提取netCDF数据并将其可视化在网络地图上。 现场演示： : 使用应用程式 该应用程序为用户提供了带有温度和风数据叠加层的交互式传单网络地图。 可以从右上角的控制面板切换叠加...
leaflet-windy，leaflet插件集成高德地图，风场粒子动画
06-21
总的来说，通过`leaflet-windy`和Leaflet，我们可以创建一个展示风场粒子动画的地图应用，结合高德地图提供多样化的底图选择，并采用极夜黑主题提升用户体验。Vue.js作为前端框架，使项目结构清晰，易于维护。理解并...
Leaflet.Canvas-Markers-0.2.0
04-22
在Web开发中，地图已经成为一种常见的数据可视化工具，而Leaflet作为一款轻量级的JavaScript库，因其易于使用和强大的功能深受开发者喜爱。本文将深入探讨Leaflet.Canvas-Markers-0.2.0，一个专门为Leaflet设计的...
leaflet 可视化--风场、海浪、洋流、气压、温度等
11-17
leaflet 可视化是一种使用leaflet库来呈现风场、海浪、洋流、气压、温度等地球现象的可视化技术。该技术通过将地球上的各种地理数据转化为易于理解的图形表示，帮助人们更好地理解气候变化、海洋运动以及大气状况。 通过leaflet 可视化，我们可以以地图的形式展示风场数据。风场是指地球上蕴含的气流运动，它对于天气透明和天气变化的预测起着重要作用。通过以箭头或线段的形式表示，leaflet 可视化可以直观地向我们展示不同地区的风向和风速。 海浪是海洋中的波浪运动，也是一种重要的海洋现象。使用leaflet 可视化可以将海浪数据以色块或曲线图的形式呈现，让我们了解不同地区的海浪高度、频率、周期等信息。 洋流是海洋中的水流运动，它对于全球气候和海洋生态系统具有重要影响。leaflet 可视化可以通过可变宽度的线段或箭头展示洋流的流向和流速，帮助我们更好地理解海洋运动的复杂性。 气压是大气中空气分布产生的压强差异，是气象学中的重要参数。使用leaflet 可视化可以将气压数据以等值线或色块的形式展示在地图上，让我们更加直观地了解不同地区的气压分布情况。 温度是地球大气和海洋中的一个重要气候因子。通过leaflet 可视化，我们可以将温度数据以色块或色带的形式展示，将地球的温度分布以直观的方式呈现给用户，帮助我们了解全球的温度变化和季节变化。 总之，leaflet 可视化技术为我们提供了一种直观、易于理解的方式来呈现风场、海浪、洋流、气压和温度等地球现象，帮助我们更好地理解和研究地球系统的复杂性。
评论 37
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值