前言

leaflet 入门开发系列环境知识点了解：

leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等

leaflet 在线例子

leaflet 插件，leaflet 的插件库，非常有用

内容概览

leaflet 实现风场图，实现效果来自此参考文献：https://github.com/danwild/wind-js-leaflet

实现效果图如下：

html 页面引用资源

<!doctype html>
<html>
<head>
<title>Leaflet风场图</title>
<meta charset="utf-8">
</head>
<body>
<div id="map"></div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<!--wind-js-leaflet-->
<link rel="stylesheet" href="wind-js-leaflet.css" />
<script src="wind-js-leaflet.js"></script>
<!--demo-->
<link rel="stylesheet" href="demo.css" />
<script src="demo.js"></script>
</body>
</html>

地图加载代码

//地图初始化
function initDemoMap(){
var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, ' +
'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
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",
{
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, ' +
'NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
}
);
//底图切换设置
var baseLayers = {
"Satellite": Esri_WorldImagery,
"Grey Canvas": Esri_DarkGreyCanvas
};
var map = L.map('map', {
layers: [ Esri_WorldImagery ]
});
var layerControl = L.control.layers(baseLayers);
layerControl.addTo(map);
//设置地图初始化中心点和级别
map.setView([50.00, 14.44], 3);return {
map: map,
layerControl: layerControl
};
}

风场初始化加载

//风场图初始化加载
WindJSLeaflet.init({
localMode: true,//true，则加载本地风场数据源
map: map,//地图对象
layerControl: layerControl,//地图底图切换控件
useNearest: false,
timeISO: null,
nearestDaysLimit: 7,
displayValues: true,
displayOptions: {……

核心 js 文件，wind-js-leaflet.js，见github：https://github.com/danwild/wind-js-leaflet

更多的leaflet文章见leaflet小专栏：GIS之家leaflet小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

leaflet实现风场图相关推荐

海洋气象数据可视化，以流场的方式显示风场图，海洋气象API使用
一. 天气展示方式长期以来,气象数据可视化对饼状图.柱状图.表格图等传统图形图表的使用率是最高的.不可否认,此类图形图表是数据可视化的鼻祖,在很多时候也是最清晰有效的.但是,在可视化技术飞速发展的当 ...
OpenLayers风场图
用到的插件是ol-wind,作者除了Openlayers风场插件外还有其他平台的,详见wind-layer 获取数据 git里有如何获取数据的介绍,这里记一下我的实践过程. 数据来源是nomads,见 ...
openlayers4 入门开发系列之风场图篇
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
基于矢量瓦片技术的Web电子海图优化方法
范梦琪, 宋伟东, 郑人维, 何欢. 2021. 基于矢量瓦片技术的Web电子海图优化方法[J]. 海洋科学, 45(2): 68-75. FAN Meng-qi, SONG Wei-dong, ZH ...
2014Esri中国用户大会：ArcGIS平台六大亮点能力
ArcGIS是一个完整的平台,为GIS从业者.开发者及各组织机构的业务人员提供了全面的支撑.本次用户大会分享了ArcGIS平台的六大关键能力,分别是时空分析能力.实时数据支持能力.三维能力.影像能力. ...
2014Esri中国用户大会亮点系列之——ArcGIS平台能力
ArcGIS是一个完整的平台,为GIS从业者.开发者及各组织机构的业务人员提供了全面的支撑.本次用户大会分享了ArcGIS平台的六大关键能力,分别是时空分析能力.实时数据支持能力.三维能力.影像能力. ...
python图片分析中央气象台降水_Python气象绘图教程（十）
这几天一直在躺尸,只能找一些陈年材料和汇总了本节提要:matplotlib绘图时,一些实用的解决办法.包括降水量等值线的色号.风矢杆显示不正确的问题.台风符号.散点图表示数值的两种办法.关于colo ...
python气象科研学习路线和常用技巧
python气象科研学习路线和重点知识前言经过一个学期的气象相关编程,觉得气象常用的一些库在这里总结一下,学习路线是我根据自己经验总结的,有大佬觉得哪里需要补充的可以私我.我也在不断学习,之后有新 ...
matlab 汽车流场,matlab画流场图
基于 Matlab 分布式工具箱的流场计算及其可视化蔡群;周美莲;段杰峰;李青... 基于 MATLAB 和 CFD 数据库的流场可视化的实现 [J], 晏畅 5.基于 VB 与 MATLAB 混合 ...

leaflet实现风场图

前言

内容概览

leaflet实现风场图相关推荐

最新文章

热门文章