ps：之前有需求在二維地圖上使用時間軸 效果要和cesium的一樣。當時就想到把這個外掛直接提取出來使用

html

<div id="map" style="height: 100%;width:100%;position: relative;padding:20px;"></div>

 css：

  @import url(../Build/Cesium/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        };
 

js：

<script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
//用的是openlayes
var map = new ol.Map({
			layers: list,
			target: document.getElementById('map'),
			view: new ol.View({
				center: [13328108, 2920366],
				maxZoom: 15,
				zoom: 5
			})
		});	

 核心程式碼：

//新增時間軸div
		var viewerContainer = document.getElementsByName("viewer")[0];
		//追加儀表盤
		var animationContainer = document.createElement('div');
		animationContainer.className = 'cesium-viewer-animationContainer';
		viewerContainer.appendChild(animationContainer);
		//追加時間
		var timelineContainer = document.createElement('div');
		timelineContainer.className = 'cesium-viewer-timelineContainer';
		viewerContainer.appendChild(timelineContainer);
		//建立時間軸
		var clock,animation,timeline;
		var createTime = function(start,stop){
			try{
				clock = new Cesium.Clock({
				startTime: Cesium.JulianDate.fromIso8601(start),
				currentTime: Cesium.JulianDate.fromIso8601(stop),
				stopTime: Cesium.JulianDate.fromIso8601(stop),
				clockRange: Cesium.ClockRange.LOOP_STOP,
				clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER
				});
				//時間軸預設開始
				clock.shouldAnimate = true;
				//建立ViewModel
				var clockViewModel = new Cesium.ClockViewModel(clock);
				animation = new Cesium.Animation(animationContainer, new Cesium.AnimationViewModel(clockViewModel));
				timeline = new Cesium.Timeline(timelineContainer, clock);
				timeline.addEventListener('settime', onTimelineScrubfunction, false);
				timeline.zoomTo(clock.startTime, clock.stopTime);
				addEvents();
	
			}catch(e){
				console.log(e);
				alert("建立時間軸異常！");
			}
		};
		//新增事件
		var addEvents = function(){
			var eventHelper = new Cesium.EventHelper();
			eventHelper.add(clock.onTick, _onTick);
			setInterval(function () {clock.tick();}, 2000);
		}
		
		//時間軸點選移動時間
		var onTimelineScrubfunction = function (e) {
			var clock = e.clock;
			clock.currentTime = e.timeJulian;
			clock.shouldAnimate = false;
		}

        //時間轉換
		var getIsoTime = function (time){
			var time2 = (new Date(Cesium.JulianDate.toDate(time))).getTime();
			var time3=Math.floor(time2/1000/60)*60;
			return time3;
		}
		
		
		//建立時間
		var oldTimes;
		var _onTick = function (clock) {
			var time = clock.currentTime;
			//地圖互動
			
		};