前言
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小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波