前言

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实现风场图(附源码下载)的更多相关文章

  1. leaflet 结合 Echarts4 实现迁徙图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  2. leaflet视频监控播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  4. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  6. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  7. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  8. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  9. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

随机推荐

  1. luogu P4170 [CQOI2007]涂色

    题目描述 假设你有一条长度为5的木版,初始时没有涂过任何颜色.你希望把它的5个单位长度分别涂上红.绿.蓝.绿.红色,用一个长度为5的字符串表示这个目标:RGBGR. 每次你可以把一段连续的木版涂成一个 ...

  2. Vue - 组件通信之$attrs、$listeners

    前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...

  3. ASP.NET Core 选项模式源码学习Options IOptionsMonitor（三）

    前言 IOptionsMonitor 是一种单一示例服务,可随时检索当前选项值,这在单一实例依赖项中尤其有用.IOptionsMonitor用于检索选项并管理TOption实例的选项通知, IOpti ...

  4. Python3 函数小练习

    函数小练习 第一题 现有文件info.txt, 其内容如下: alpha male 18 1000 bravo male 28 2000 charlie female 38 3000 delta fe ...

  5. 【JS】313- 复习 回流和重绘

    点击上方"前端自习课"关注,学习起来~ 原文地址:我不是陈纪庚 segmentfault.com/a/1190000017329980 回流和重绘可以说是每一个web开发者都经常听 ...

  6. 每周一练 之 数据结构与算法（LinkedList）

    这是第三周的练习题,原本应该先发第二周的,因为周末的时候,我的母亲大人来看望她的宝贝儿子,哈哈,我得带她看看厦门这座美丽的城市呀. 这两天我抓紧整理下第二周的题目和答案,下面我把之前的也列出来: 1. ...

  7. Java中通过代码得到int类型数值的二进制形式

    一.完整代码 public class BigInteger { int sing; byte[] val; public BigInteger(int val){ // 将传递的初始值,按位取值,存 ...

  8. Mechanical Design Optimization with Abaqus and Isight

    一.项目背景 本项目为"ME327机械优化设计方法"课程项目. 如何合理利用更轻更强的材料,是机器人结构设计值得深究的问题.在驱动的功率一定的情况下,更轻的机械结构意味着电机承受更 ...

  9. 阿里巴巴的26款Java开源项目

    阿里巴巴的26款Java开源项目 开源展示了人类共同协作,成果分享的魅力.没有任何一家网络公司可以不使用开源技术,仅靠自身技术发展起来.“取之于开源,用之于开源,才能促进开源的良性发展”,阿里巴巴各个 ...

  10. 松软科技Web课堂:重要->JavaScript 调试

    错误总会发生,每当您写一些新的计算机代码时. JavaScript 调试 在没有调试器的情况下写 JavaScript 是有难度的. 您的代码中也许包含了语法错误,或者逻辑错误,这些都难以诊断. 通常 ...