使用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設定, 必要參數, 可進WMTS的Capabilities去看所需圖層使用的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. 將WMTS與TimelineJS結合呈現
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);
}
});
