前言

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图斑历史时空播放(附源码下载)的更多相关文章

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

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

  2. leaflet 结合 Echarts4 实现统计图(附源码下载)

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

  3. leaflet 结合 Echarts4 实现散点图(附源码下载)

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

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

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

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

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

  6. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

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

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

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

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

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

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

随机推荐

  1. php 开启微信公众号开发者模式

    php 开启微信公众号开发者模式<pre><?php/** * wechat php test */header('Content-type:text');//define your ...

  2. hdu 1385 Minimum Transport Cost (Floyd)

    Minimum Transport CostTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  3. nyoj 596-谁是最好的Coder (greater, less)

    596-谁是最好的Coder 内存限制:64MB 时间限制:1000ms 特判: No 通过数:15 提交数:28 难度:0 题目描述: 计科班有很多Coder,帅帅想知道自己是不是综合实力最强的co ...

  4. 交叉编译sqlcipher

    1. 小心预编译宏SQLITE_HAS_CODEC 2. openssl在不同License下,导出的符号不对等.(错了,1.1.0后api发生变化,小心选用openssl版本) 3, ac使用了li ...

  5. 看淡生死,不服就干(C语言指针)

    看淡生死,不服就干 emmmmm 其实今天蛮烦的 高等数学考的一塌糊涂 会的不会的都没写 真心没有高中轻松了啊 也不知道自己立的flag还能不能实现 既然选择了就一定坚持下去啊 下面还是放一段之前写的 ...

  6. 【Linux系列】Centos 7安装 PHP(四)

    目的 为了下面的Laravel部署,本篇开始安装PHP. 设置PHP源 查看Centos源是否有PHP. yum list php* 进一步查看PHP的版本. yum info php.x86_64 ...

  7. PostGIS 存储过程返回类型

    Postgresql存储过程返回值的方式有很多,在此先只记录一下自己用到过的,慢慢拓展 1.type型,这里geometry可以是任何postgresql支持的类型(integer/text/char ...

  8. WPF 修改屏幕DPI,会触发控件重新加载Unload/Load

    修改屏幕DPI,会触发控件的Unloaded/Loaded 现象/重现案例 对Unloaded/Loaded的印象: FrameworkElement, 第一次加载显示时,会触发Loaded.元素被释 ...

  9. Python拼接字符串的七种方式

    忘了在哪看到一位编程大牛调侃,他说程序员每天就做两件事,其中之一就是处理字符串.相信不少同学会有同感. 几乎任何一种编程语言,都把字符串列为最基础和不可或缺的数据类型.而拼接字符串是必备的一种技能.今 ...

  10. python3快速入门教程错误和异常

    Python 中(至少)有两种错误:语法错误(syntax errors)和异常(exceptions). 语法错误 语法错误又称作解析错误: >>> while True prin ...