leaflet实现动态地图风场效果
时间:2022-06-25
本文章向大家介绍leaflet实现动态地图风场效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
leaflet风场插件
首先,这里需要用到一款leaflet插件,它是一个js文件,插件地址:https://download.csdn.net/download/u012413551/11267433
有了它,一切都变得简单。
示例代码
// 初始化地图,返回一个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: 1
dy: 1
la1: -7.5
la2: -28.5
lo1: 143
lo2: 156
nx: 14
ny: 22
parameterCategory: 2
parameterNumber: 2
parameterNumberName: "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风场示例(https://download.csdn.net/download/u012413551/11267442)
- 算法模板——线性筛素数
- HDU 3480 Division
- 小白博客 Xiaobai___详细教你如何在Linux环境下安装mysql数据库
- 3856: Monster
- BZOJ4753: [Jsoi2016]最佳团体
- 3101: N皇后
- 算法模板——线性欧拉函数
- jdbc基础 (一) MySQL的简单使用
- 小白博客 爆破内网mysql数据库root密码脚本代码
- 2818: Gcd
- 1688: [Usaco2005 Open]Disease Manangement 疾病管理
- 通过MySQL自动同步刷新Redis
- 13.MySQL(一) 数据库简介mysql安装数据库操作Mysql数据类型存储引擎
- 3314: [Usaco2013 Nov]Crowded Cows
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法