leaflet图斑历史时空播放(附源码下载)
前言
leaflet 入门开发系列环境知识点了解:
- leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
- leaflet 在线例子
- leaflet 插件,leaflet 的插件库,非常有用
内容概览
leaflet图斑历史时空播放
源代码 demo 下载
效果图如下:
本篇主要是 leaflet 通过调用 geoserver 发布的图斑地图服务 WMS,以 L.tileLayer.wms 图层加载形式叠加显示在地图,配合时间轴 timeline.js 插件来动态播放图斑变化效果,图斑随着时间轴的时间变化,核心是利用 L.tileLayer.wms 图层的属性过滤条件:cql_filter。
时间轴 timeline.js 插件的 github 地址:https://github.com/ilkeryilmaz/timelinejs
- 时间轴控件初始化:
- $('.js-timeline').Timeline({
- autoplay: false,//设置是否自动播放
- isreplay:true,//在timeline原有的源码基础上,自己添加的一个属性,用来设置是否循环播放
- autoplaySpeed:1500,//设置播放时间间隔
- pauseOnHover: false
- });
- 时间轴刻度条模拟数据,对应 geoserver 发布的图斑数据:
- timeSpotList = ['2019-08-27T16:00:00Z','2019-08-26T16:00:00Z','2019-08-25T16:00:00Z','2019-08-24T16:00:00Z','2019-08-23T16:00:00Z','2019-08-22T16:00:00Z','2019-08-21T16:00:00Z','2019-08-20T16:00:00Z','2019-08-19T16:00:00Z','2019-08-18T16:00:00Z'];
- 图斑图层初始化:
- //地图叠加历史扰动图斑
- spotWmsLayer = L.tileLayer.wms("http://localhost:8180/geoserver/gwc/service?", {
- layers: 'DGSYS:historySpot', //需要加载的图层
- format: "image/png", //返回的数据格式
- transparent: true,
- cql_filter: "atime = 2019-08-27T16:00:00Z"
- }).addTo(map);
- 在timeline.js 时间轴变化事件的基础上,新增动态刷新图斑数据效果代码:
完整demo源码见小专栏文章尾部:GIS之家leaflet小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
leaflet图斑历史时空播放(附源码下载)的更多相关文章
- leaflet视频监控播放(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet 结合 Echarts4 实现统计图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet 结合 Echarts4 实现散点图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet 结合 Echarts4 实现迁徙图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
随机推荐
- eclipse中springmvc框架出现404
出现404报错信息: 1.我出现的错误是配置没问题,找了一圈发现自己单词拼错了,导致运行不了,出现404 2.配置问题: jar包:首先导入spring 的jar包15个,log4j两个,junit两 ...
- oracle基础(基本介绍)
数据库 磁盘上存储的数据的集合 在物理上表现为数据文件.日志文件和控制文件等 在逻辑上以表空间形式存在 必须首先创建数据库,然后才能使用Oracle 数据库实例 每个启动的数据库都对应一个数据库实例, ...
- springboot配置springMVC
/** * @ClassName MvcConfigure * @Description SpringMVC配置 * @Author JAGNG * @Date 2019/10/28 10:23 ** ...
- C++中对C的扩展学习新增语法——const
Const Const在C语言和C++语言中连接属性不一样,C语言默认是外部连接,如果需要内部连接,需要显示写上static.而在C++中默认是内部连接,如果希望其编程外部变量,需要显示写上exte ...
- 力扣(LeetCode)颠倒二进制位 个人题解
颠倒给定的 32 位无符号整数的二进制位. 示例 1: 输入: 00000010100101000001111010011100 输出: 0011100101111000001010010100000 ...
- mysql5.7下载与安装
一.完全卸载旧版mysql 参考文章:https://blog.csdn.net/hui1setouxiang/article/details/89816176 二.win10中下载安装mysql5. ...
- Vue使用element上传
<el-upload action v-if="IsUpload" style="display:inline" list-type="pict ...
- android 活动监听是否点击某个view
前述(写给做过web前端的人) 在web H5,如果如果判断当前是否点击某个元素,一般会这样写. window.addEventListener("touchstart",func ...
- java多线程的wait、notify/notifyAll区别
1.wait().notify/notifyAll() 方法是Object的本地final方法,无法被重写. 2.wait()使当前线程阻塞,前提是 必须先获得锁,一般配合synchronized ...
- Intellij 生成exe可执行文件
生成jar包 编写源代码 此处我使用kotlin来编码,主函数实际功能就是输出一行文字. /** * 应用入口 * @author mazaiting */ object TestExe { @J ...