<span style="font-family: Arial, Helvetica, sans-serif;"><!--made by</span>
time:2016.9.19
email:@qq.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="../jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source'
});
</script>
</head>
<body>
<style>
@import url(../templates/bucket.css);
</style>
<!--下面这一行用来添加2d。3d转换按钮-->
<div id="cesiumContainer" class="fullSize">
<div style="position:fixed;top:20px;left:120px;z-index:1000" id="twoandthree">
<button οnclick="twodEarth(1996)">平面地图</button>
<button οnclick="threedEarth(1996)">立体地图</button>
</div>
<div style="position:fixed;top:20px;left:520px;z-index:1000;opacity:0.8;background:#f0f0f0;color:blue;font-size:large;float: left">
<span>清华大学</span><span style="color:red"><b id="title">2015年</b></span><span>SCI发文情况可视化展示</span>
</div>
<img src="../../../timeline/legend.jpg" style="width:115px;position:fixed;bottom:2px;left:2px;z-index: 1000;border:2px solid black">
<div style="position:fixed;bottom:0;left:120px;z-index: 1010" id="playcontainer">
<img src="../../../timeline/play.png" οnclick='playEarth()' style="width:30px">
</div>
<div style="position:fixed;bottom:0;left:120px;z-index: 1000">
<ul>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">1996</p>
<a οnclick="showEarth(1996)"><img src="../../../timeline/open.png" style="width:50px; height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container1996">
</div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">1997</p>
<a οnclick="showEarth(1997)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container1997"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">1998</p>
<a οnclick="showEarth(1998)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container1998"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">1999</p>
<a οnclick="showEarth(1999)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container1999"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2000</p>
<a οnclick="showEarth(2000)"><img src="../../../timeline/fifth.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2000"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2001</p>
<a οnclick="showEarth(2001)"><img src="../../../timeline/first.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2001"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2002</p>
<a οnclick="showEarth(2002)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2002"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2003</p>
<a οnclick="showEarth(2003)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2003"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2004</p>
<a οnclick="showEarth(2004)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2004"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2005</p>
<a οnclick="showEarth(2005)"><img src="../../../timeline/fifth.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2005"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2006</p>
<a οnclick="showEarth(2006)"><img src="../../../timeline/first.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2006"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2007</p>
<a οnclick="showEarth(2007)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2007"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2008</p>
<a οnclick="showEarth(2008)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2008"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2009</p>
<a οnclick="showEarth(2009)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2009"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2010</p>
<a οnclick="showEarth(2010)"><img src="../../../timeline/fifth.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2010"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2011</p>
<a οnclick="showEarth(2011)"><img src="../../../timeline/first.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2011"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2012</p>
<a οnclick="showEarth(2012)"><img src="../../../timeline/second.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2012"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2013</p>
<a οnclick="showEarth(2013)"><img src="../../../timeline/third.png" style="width:50px; height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2013"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2014</p>
<a οnclick="showEarth(2014)"><img src="../../../timeline/forth.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2014"></div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">2015</p>
<a οnclick="showEarth(2015)"><img src="../../../timeline/last.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2015"><img src="../../../timeline/at.png" style="width: 10px"></div>
</div>
</li>
</ul>
</div></div>
<script id="cesium_sandcastle_script">
years=2015;
d=3;
function startup(Cesium) {
widget = new Cesium.CesiumWidget('cesiumContainer');
url='http://115.28.101.41:8088/geoserver/cite/wms'; //Geoserver URL
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
var blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: 'cite:2015',// Here just give layer n
version:'1.1.0'
}));
//blackMarble.alpha = 0.5;//给一个透明度
//blackMarble.brightness = 1.0;
titlehtml="";
titlehtml="2015年";
$("#title").html(titlehtml);
// Start off looking at china.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100, -20, 310, 90)
});//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
function showEarth(year){
years=year;
html= new Array('','','','','','','','','','','','','','','','','','','','');
html[year-1996]='<img src="../../../timeline/at.png" style="width: 10px">';
//alert(layer);
var layer='cite:'+year;
function startup(Cesium) {
//layers.removeAll();
var blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: layer,// Here just give layer name
version:'1.1.0'
}));
titlehtml="";
titlehtml=year+"年";
$("#title").html(titlehtml);
// Start off looking at china.
if(d==3){
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100, -20, 310, 90)
});//Sandcastle_End
}
if(d==2){
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-30, -90, 340, 90)
});//Sandcastle_End
}
Sandcastle.finishedLoading();}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
for(i=1996;i<2016;i++){
var id='#container'+i;
$(id).html(html[i-1996]);
}
}
}
b=0;
function playEarth(){
html1="";
html1='<img src="../../../timeline/stop.png" οnclick="stopEarth()" style="width:30px">';
$("#playcontainer").html(html1);
intervaltime=5000;//他们之间的间隔时间
stop=0;
timename=new Array();
num=1;//间隔时间的一个控制
for(j=1;j<21;j++){
if(j<b){j=b+1;num=num-b;}//b是一个标记,记录运行到了哪个年份
a=j%20;
switch(a){
case 1:
timename[0]=setTimeout("if(!stop){showEarth(1996);b=1;}",0);
break;
case 2:
timename[1]=setTimeout("if(!stop){showEarth(1997);b=2;}",num*intervaltime);
break;
case 3:
timename[2]=setTimeout("if(!stop){showEarth(1998);b=3;}",(num+1)*intervaltime);
break;
case 4:
timename[3]=setTimeout("if(!stop){showEarth(1999);b=4;}",(num+2)*intervaltime);
break;
case 5:
timename[4]=setTimeout("if(!stop){showEarth(2000);b=5;}",(num+3)*intervaltime);
break;
case 6:
timename[5]=setTimeout("if(!stop){showEarth(2001);b=6;}",(num+4)*intervaltime);
break;
case 7:
timename[6]=setTimeout("if(!stop){showEarth(2002);b=7;}",(num+5)*intervaltime);
break;
case 8:
timename[7]=setTimeout("if(!stop){showEarth(2003);b=8;}",(num+6)*intervaltime);
break;
case 9:
timename[8]=setTimeout("if(!stop){showEarth(2004);b=9;}",(num+7)*intervaltime);
break;
case 10:
timename[9]=setTimeout("if(!stop){showEarth(2005);b=10;}",(num+8)*intervaltime);
break;
case 11:
timename[10]=setTimeout("if(!stop){showEarth(2006);b=11;}",(num+9)*intervaltime);
break;
case 12:
timename[11]=setTimeout("if(!stop){showEarth(2007);b=12;}",(num+10)*intervaltime);
break;
case 13:
timename[12]=setTimeout("if(!stop){showEarth(2008);b=13;}",(num+11)*intervaltime);
break;
case 14:
timename[13]=setTimeout("if(!stop){showEarth(2009);b=14;}",(num+12)*intervaltime);
break;
case 15:
timename[14]=setTimeout("if(!stop){showEarth(2010);b=15;}",(num+13)*intervaltime);
break;
case 16:
timename[15]=setTimeout("if(!stop){showEarth(2011);b=16;}",(num+14)*intervaltime);
break;
case 17:
timename[16]=setTimeout("if(!stop){showEarth(2012);b=17;}",(num+15)*intervaltime);
break;
case 18:
timename[17]=setTimeout("if(!stop){showEarth(2013);b=18;}",(num+16)*intervaltime);
break;
case 19:
timename[18]=setTimeout("if(!stop){showEarth(2014);b=19;}",(num+17)*intervaltime);
break;
case 0:
html3="<img src='../../../timeline/play.png' οnclick='playEarth()' style='width:30px'>";
timename[19]=setTimeout('if(!stop){showEarth(2015);b=20;$("#playcontainer").html(html3);}',(num+18)*intervaltime);
break;
default: break;
}
}
}
function stopEarth(){
html2="";
html2='<img src="../../../timeline/play.png" οnclick="playEarth()" style="width:30px">';
$("#playcontainer").html(html2);
stop=1;
clearTimeout(timename[0]);
clearTimeout(timename[1]);
clearTimeout(timename[2]);
clearTimeout(timename[3]);
clearTimeout(timename[4]);
clearTimeout(timename[5]);
clearTimeout(timename[6]);
clearTimeout(timename[7]);
clearTimeout(timename[8]);
clearTimeout(timename[9]);
clearTimeout(timename[10]);
clearTimeout(timename[11]);
clearTimeout(timename[12]);
clearTimeout(timename[13]);
clearTimeout(timename[14]);
clearTimeout(timename[15]);
clearTimeout(timename[16]);
clearTimeout(timename[17]);
clearTimeout(timename[18]);
clearTimeout(timename[19]);
}
function twodEarth(){
d=2;
function startup(Cesium) {
widget.destroy();
widget = new Cesium.CesiumWidget('cesiumContainer',{sceneMode:Cesium.SceneMode.SCENE2D});
url='http://115.28.101.41:8088/geoserver/cite/wms'; //Geoserver URL
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
var blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: 'cite:'+years,// Here just give layer n
version:'1.1.0'
}));
//blackMarble.alpha = 0.5;//给一个透明度
//blackMarble.brightness = 1.0;
// Start off looking at china.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-30, -90, 340, 90)
});//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
}
function threedEarth(){
d=3;
function startup(Cesium) {
widget.destroy();
widget = new Cesium.CesiumWidget('cesiumContainer',{sceneMode:Cesium.SceneMode.SCENE3D});
url='http://115.28.101.41:8088/geoserver/cite/wms'; //Geoserver URL
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
var blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: 'cite:'+years,// Here just give layer n
version:'1.1.0'
}));
//blackMarble.alpha = 0.5;//给一个透明度
//blackMarble.brightness = 1.0;
// Start off looking at china.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100, -20, 310, 90)
});//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
}
</script>
</body>
</html>