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小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波