leaflet风场插件

首先，这里需要用到一款leaflet插件，插件来自github，插件地址：https://github.com/danwild/leaflet-velocity（感谢作者开源贡献）

其次，本文的意义主要在于记录对上面插件的使用方法的个人理解、以及对风场数据源结构的理解，本文最后会附有本文示例代码的下载链接，如果需要下载插件，请移步github

言归正传，有了上面的插件，实现风场效果一切都变得简单。

示例代码

// 初始化地图，返回一个map对象
function initMap(){var Esri_DarkGreyCanvas = L.tileLayer("http://{s}.sm.mapstack.stamen.com/" +"(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +"{z}/{x}/{y}.png",);map = L.map('map', {layers: [Esri_DarkGreyCanvas]});map.setView([33, 118], 11);return map;
}// 生成一个wind图层并返回
function windLayer(data){var velocityLayer = L.velocityLayer({displayValues: true,displayOptions: {velocityType: 'GBR Wind',displayPosition: 'bottomleft',displayEmptyString: 'No wind data'},data: data,minVelocity: 0, //Velocity：速率maxVelocity: 10,velocityScale: 0.005,particleMultiplier: 1 / 300,//粒子的数量lineWidth: 2,                     //粒子的粗细frameRate: 15,                      //定义每秒执行的次数colorScale: ["rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)"]});return velocityLayer;
}
// 立即执行
(function(){var map = initMap();var data = '/static/data/windydata.json';$.getJSON(data).done(function(data){var layer = windLayer(data);layer.addTo(map);})
})()

结果

插件使用方法

L.velocityLayer

如上述代码中windLayer函数中所示，L.velocityLayer来自插件中的一个方法，它New一个L.VelocityLayer(options)对象，options中包含如下参数：

     displayValues: true,displayOptions: {velocityType: 'GBR Wind',displayPosition: 'bottomleft',displayEmptyString: 'No wind data'},data: data,//数据源minVelocity: 0, //Velocity：速率maxVelocity: 10,velocityScale: 0.005,particleMultiplier: 1 / 300,//粒子的数量lineWidth: 2,                     //粒子的粗细frameRate: 15,                      //定义每秒执行的次数colorScale: ["rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)","rgb(255,255,255)"]

其中，

data：

（必要参数），为数据源，有一定的格式要求，后面会来分析

velocityScale：

改变该值会改变粒子的运动速度，值越大越快

particleMultiplier：

控制单位面积内的粒子数量，分母越大粒子越稀疏

lineWidth：

控制粒子的粗细，值越大越粗；

frameRate：

粒子刷新频率；

colorScale：

颜色数组，控制粒子的颜色，映射在粒子的向量值上。

数据源

数据结构

[{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:[.....]}]

数据源为json格式，内容可以看作是一个数组里包含了两个对象，每个对象分header和data两部分。
header用以定义网格，
其中：
dx、dy网格间距,
nx、ny网格数量，总网格数量= nx * ny = data.length;

data中记录了在正东方向的风速值，每个值对应网格上一个点。
第二部分header和第一个基本相同，只是代表风速方向的差异。
如此，数据中记录了每个网格点上的正北方向、正东方向的风速值，两个值进行向量加运算，即该点的风速向量。

完整示例代码下载（包含数据）:
leaflet风场示例

leaflet实现动态地图风场效果相关推荐

vue openlayer 添加风场效果
vue openlayer 添加风场效果一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址:https://w ...
【WebGIS】Openlayers流动线与风场效果
目录基础开发一.流动线二.风场源码基础开发一.流动线效果展示基础原理通过openlayers API,设置线段样式 ol/style/Stroke下的 lineDash 和 line ...
Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
LeaFlet学习之聚合效果
leaflet实现聚合效果是通过插件进行的,虽然leaflet是轻量级的但是,许多功能都是没有依赖插件来完成,关于这有缺点也有有点,通过这几天对leaflet感觉一直都在依靠插件完成,本身就两个主题类 ...
web前端利用leaflet生成粒子风场，类似windy
wind.js如下: $(function() {var dixing = L.tileLayer.chinaProvider('Google.Satellite.Map', {maxZoom: 18 ...
leaflet 实现左卷帘效果（代码示例045）
第045个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet中实现左卷帘效果,这里主要引用了leaflet-side-by-side这个插件,直接调用的话,CSS方面有些问题,需要 ...
如何在UE4游戏中实现植物风场效果？
导语:如何让游戏里的植物产生类似风吹过的效果?腾讯游戏学院专家Freddy将在本文中,尝试使用UE4引擎的PivotPainter2.0插件制作此效果,一起来看看吧. 静态的游戏场景氛围是十分生硬的, ...
leaflet实现风场动态粒子效果
文章目录前言一.部分代码摘录 (一)velocity插件代码.js (二)插件使用示例代码二.leaflet-velocity数据源格式三.总结前言效果实现需要用到一款开源插件:leafl ...
leaflet实现风场流动
概述:本文基于<Openlayer4中风场的实现>一文,使用leaflet实现流动风场的效果. 废话不多说,下面贴上代码: 1.wind算法及扩展: 1 /** 2 * @author 3 ...

leaflet实现动态地图风场效果