leaflet实现风场图(附源码下载)
前言
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 © Esri — 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 © Esri — 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实现风场图(附源码下载)的更多相关文章
- leaflet 结合 Echarts4 实现迁徙图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet视频监控播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- cesium 实现风场图效果(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- Android中Canvas绘图基础详解（附源码下载） (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
随机推荐
- Flink入门（三）——环境与部署
flink是一款开源的大数据流式处理框架,他可以同时批处理和流处理,具有容错性.高吞吐.低延迟等优势,本文简述flink在windows和linux中安装步骤,和示例程序的运行,包括本地调试环境,集群 ...
- luogu P1358 扑克牌
题目描述 组合数学是数学的重要组成部分,是一门研究离散对象的科学,它主要研究满足一定条件的组态(也称组合模型)的存在.计数以及构造等方面的问题.组合数学的主要内容有组合计数.组合设计.组合矩阵.组合优 ...
- numpy的基本API（一）——创建
numpy的基本创建API iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 1.np.empty([a, b]) empty方法可以在无需初始化的情况下创建认 ...
- io流函数略解(java_input流)[二]
背景 在写这篇随笔之前,已经写了io流函数略解(java_File)(一),主要是总结了File的一些操作,以及一些源码介绍. 在Io实际应用中,实际上运用在如果会操作File,实际上很难写出一点能实 ...
- 【前端知乎系列】ArrayBuffer 和 Blob 对象
本文首发在 个人博客 更多丰富的前端学习资料,可以查看我的 Github: <Leo-JavaScript>,内容涵盖数据结构与算法.HTTP.Hybrid.面试题.React.Angul ...
- eclipse右下角一直在loading jar文件，如何关闭？
通常导入项目的时候,右下角会显示download一些jar包或者其它内容,速度非常慢,如果你长得很帅很美可能更拖网速,最后可能会超时报错. 大招来了!!! 首先,打开windows->pre ...
- Hexo+Github个人博客搭建 | 实战经验分享
概述 第一次尝试搭建属于自己的博客,并且成功了,非常开心. 很久之前就想搭建一个博客,可是也一直没有行动,最近在逛B站的时候发现一个up主(CodeSheep)的一个视频 <手把手教你从0开始搭 ...
- PostgreSQL 、springboot 、spring data jpa 集成
项目地址:https://gitee.com/zhxs_code/PostgreSQL_springboot_jpa_demo.git 增删查改都已经实现. 重点部分: 1.定义自己的方言. pack ...
- ASP.NET Core开发者指南（）
你可以在下面找到一张图,该图展示了你可以选取的路径及你想学习的库,从而成为一名 ASP.NET Core 开发者.“作为 ASP.NET Core 开发者,我接下来应该学习什么?”,我把这张图作为建议 ...
- SQLHelper.cs类 微软C#版
using System; using System.Data; using System.Xml; using System.Data.SqlClient; using System.Collect ...