[cesium] | 提取时间轴和罗盘单独与地图交互

  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;
			//地图交互
			
		};