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

川长思鸟来 2022-03-30 04:08 611阅读 0赞

ps：之前有需求在二维地图上使用时间轴 效果要和cesium的一样。当时就想到把这个插件直接提取出来使用

html

css：

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

js：

核心代码：

//添加时间轴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;
    			//地图交互
    			
    		};