![6e20b0dd0609eaaf1df7f61d541397f4.gif](https://i-blog.csdnimg.cn/blog_migrate/29ef8e6126c6f3edb84908832c18d9e0.gif)
前言
leaflet 入门开发系列环境知识点了解:
leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
leaflet 在线例子
leaflet 插件,leaflet 的插件库,非常有用
内容概览
leaflet图斑历史时空播放
源代码 demo 下载
效果图如下:
![7ff44e860d89e71077559cc1bec76beb.gif](https://i-blog.csdnimg.cn/blog_migrate/0787355e0bf3c08a011eb32dcad2f2fb.gif)
本篇主要是 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'];
- 图斑图层初始化:
更多详情以及源码见下面链接:
leaflet图斑历史时空播放(附源码下载) - 小专栏xiaozhuanlan.com![189bd35a9b20f79e91f0ddbfb30e5e73.png](https://i-blog.csdnimg.cn/blog_migrate/228ba604301a7395fd8bb1db0dddf0d8.jpeg)
对本专栏感兴趣的话,可以订阅一波
GIS之家店铺:GIS之家
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询