前言

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. MySQL必知必会(汇总数据, 聚集函数)

    SELECT AVG(prod_price) AS avg_price FROM products; #AVG只能用于单个列求平均值,如想计算多个列,必须用多个AVG() SELECT AVG(pro ...

  2. DOM中操作结点的属性_操作元素结点的样式

    有俩种方式操作结点的属性. 首先我们需要先获取所要操作的结点元素: var uname=document.getElementById("uname"); var gan=unam ...

  3. 移动开发在路上-- IOS移动开发系列 网络交互四（2）

    接着上次的讲,这次我们讲 网络请求的封装  打开创建的项目,让我们一起来继续完成他, 首先我们来创建一个NSobject 的文件 圈住出来的轻一点要注意.千万不要搞错了 创建好之后,开始编写代码, 我 ...

  4. BZOJ 1051: [HAOI2006]受欢迎的牛（SCC）

    1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 8172  Solved: 4470[Submit][Sta ...

  5. Python3 函数基础1

    目录 定义函数 定义函数的三种形式 空函数 有参函数 无参函数 函数的调用 函数的返回值 函数的参数 形参 (parameter) 实参(argument) 位置形参与位置实参 默认形参 关键字实参 ...

  6. postman接口测试工具的常规使用

    目录 postman接口测试工具简介与安装 postman发送get请求 JSON数据详解 postman发送post请求 postman中post请求传参说明 postman设置请求的header ...

  7. 【CentOS7】开发环境配置

    [CentOS7]开发环境配置 目录 ===================================================================== 1.安装openjdk ...

  8. 5个点彻底搞清楚SpringBoot注解

    作者:张伯毅 一.注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan.@Configuration和@EnableAutoConfig ...

  9. pipelinedb 常用sql语句

    -- 创建普通表create table simple_user (name varchar(80), age int , phone varchar(30), birthday date ); -- ...

  10. 《Java基础知识》Java多态和动态绑定

    在Java中,父类的变量可以引用父类的实例,也可以引用子类的实例. 请读者先看一段代码: public class Demo { public static void main(String[] ar ...