使用Timeline元件呈現時序性資料

API使用範例:使用Timeline元件呈現時序資料

 

情境假設:

將時序資料依據時間軸順序呈現,可以透過TimelineJS開源工具來實現。

建置方式:

0. 加入TimelineJS開源工具庫。

<script type="text/javascript" src="/TGOS_MAP_API/Web/js/timeline_js/jquery.jqtimeline.js"></script>

1. 建置圖台

                                function InitWnd() {

                                        var pOMap = document.getElementById("OMap");

                                        pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3857);

                                }

2. 實作測試-疊加WMTS

                                function WMTS(ln) {

                                        if (WMTSLayer) {

                                                WMTSLayer.removeWmtsLayer();

                                                WMTSLayer = null;

                                        }

                                        var Bounds = pMap.getBounds();

                                        var src = "http://gis.sinica.edu.tw/tileserver/wmts";

                                        var info = {

                                                matrixSet: 'GoogleMapsCompatible',   //MatrixSet設定, 必要參數, 可進WMTSCapabilities去看所需圖層使用的MatrixSet

                                                layer: ln, //Layer Name, 必要參數

                                                format: "image/jpeg",

                                                style: "default"

                                        };

                                        var req = {

                                                wmtsVisible: true,

                                                opacity: 0.8

                                        };

                                        WMTSLayer = new TGOS.TGWmtsLayer(src, pMap, info, req);

                                }

3. WMTSTimelineJS結合呈現

                                        var ev = [{

                                                id : 1,

                                                name : "1989臺灣經建1版地形圖",

                                                layerName : "TM25K_1989",

                                                on : new Date("1989/1/1")

                                        },{

                                                id : 2,

                                                name : "1993臺灣經建2版地形圖",

                                                layerName : "TM25K_1993",

                                                on : new Date("1993/1/1")

                                        },{

                                                id : 3,

                                                name : "2001臺灣經建3版地形圖",

                                                layerName : "TM25K_2001",

                                                on : new Date("2001/1/1")

                                               

                                        },{

                                                id : 4,

                                                name : "2003臺灣經建4版地形圖",

                                                layerName : "TM25K_2003",

                                                on : new Date("2003/1/1")

                                        }]                                       

                                        $('#longTimeLine').jqtimeline({

                                                events : ev,

                                                numYears:15,

                                                gap : 5,

                                                startYear:1989,                                           

                                                click:function(e,event){

                                                        WMTS(event.layerName);

                                                } 

                                        });                                     

回到上方