前言
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小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2309.html
標籤：GIS