Cesium引入wms服务，并实现不同图层的切换调用，及轮流播放
2016-09-18 17:17
393 查看
<!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="Add imagery from a Web Map Service (WMS) server.">
<meta name="cesium-sandcastle-labels"
content="Beginner">
<title>Cesium Demo</title>
<link rel="stylesheet"
href="test.css">
<script type="text/javascript"
src="../Sandcastle-header.js"></script>
<script type="text/javascript"
src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript"
src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<body class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer"
class="fullSize">
<button
onclick="changeScene1()" >二维</button> //点击按钮，三维地球切换二维地图
<button
onclick="changeScene2()" >三维</button>
<div
id="1"><img
src="img/play.png" onclick="playEarth()"
style="width:30px;
position:absolute; bottom:0px;
margin-left:160px;z-index:
1000; "></div>
<div
style="position:absolute;
bottom:0;
margin-left:200px;
z-index: 1000;">
<li
style="float:left;
list-style: none;">
<p>1996</p>
<div
style="position:relative;">
<div
id="container1996"><img
src="img/site.png"
style="z-index:
1100; width:10px;position:absolute;
bottom: -5px;left:40%;" ></div>
<img
src="img/first.png"
onclick="showEarth(1996)"
style="width:50px;height:10px;">
//onclick 给showEarth传值，获取不同图层
</div>
</li>
<li
style="float:left;list-style:none;">
<p>1997</p>
<div
style="position:relative;">
<div
id="container1997"></div>
<img
src="img/2.png"
onclick="showEarth(1997)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>1998</p>
<div
style="position:relative;">
<div
id="container1998"></div>
<img
src="img/3.png"
onclick="showEarth(1998)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>1999</p>
<div
style="position:relative;">
<div
id="container1999"></div>
<img
src="img/4.png"
onclick="showEarth(1999)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;height:10px;">
<p>2000</p>
<div
style="position:relative;">
<div
id="container2000"></div>
<img
src="img/5.png"
onclick="showEarth(2000)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2001</p>
<div
style="position:relative;">
<div
id="container2001"></div>
<img
src="img/1.png"
onclick="showEarth(2001)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2002</p>
<div
style="position:relative;">
<div
id="container2002"></div>
<img
src="img/2.png"
onclick="showEarth(2002)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none; ">
<p>2003</p>
<div
style="position:relative;">
<div
id="container2003"></div>
<img
src="img/3.png"
onclick="showEarth(2003)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2004</p>
<div
style="position:relative;">
<div
id="container2004"></div>
<img
src="img/4.png"
onclick="showEarth(2004)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2005</p>
<div
style="position:relative;">
<div
id="container2005"></div>
<img
src="img/5.png"
onclick="showEarth(2005)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2006</p>
<div
style="position:relative;">
<div
id="container2006"></div>
<img
src="img/1.png"
onclick="showEarth(2006)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2007</p>
<div
style="position:relative;">
<div
id="container2007"></div>
<img
src="img/2.png"
onclick="showEarth(2007)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2008</p>
<div
style="position:relative;">
<div
id="container2008"></div>
<img
src="img/3.png"
onclick="showEarth(2008)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2009</p>
<div
style="position:relative;">
<div
id="container2009"></div>
<img
src="img/4.png"
onclick="showEarth(2009)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2010</p>
<div
style="position:relative;">
<div
id="container2010"></div>
<img
src="img/5.png"
onclick="showEarth(2010)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2011</p>
<div
style="position:relative;">
<div
id="container2011"></div>
<img
src="img/1.png"
onclick="showEarth(2011)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2012</p>
<div
style="position:relative;">
<div
id="container2012"></div>
<img
src="img/2.png"
onclick="showEarth(2012)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2013</p>
<div
style="position:relative;">
<div
id="container2013"></div>
<img
src="img/3.png"
onclick="showEarth(2013)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2014</p>
<div
style="position:relative;">
<div
id="container2014"></div>
<img
src="img/4.png"
onclick="showEarth(2014)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2015</p>
<div
style="position:relative;">
<div
id="container2015"></div>
<img
src="img/6.png"
onclick="showEarth(2015)"
style="width:50px;height:10px;">
</div>
</li>
</ul> //列出1996年到2015年共二十年的轮播条
</div>
</div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
time = 1996;
function startup(Cesium) {
widget = new Cesium.CesiumWidget('cesiumContainer'); //定义一个地球容器
url='http://115.28.101.41:8088/geoserver/cite/wms';
//Geoserver URL //wms引用的地址，可以在wms服务打开的页面的源代码中找到
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
var blackMarble
= layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
//加载一个wms服务的图层覆盖到地球上
url : url,
layers: 'cite:'+time,// Here just give layer name //通过onclick＝“showEarth（year）”获取year的值传进来，从而得到不同年份的图层
version:'1.1.0' //wms服务版本号
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
// 定义地图显示的初始位置
});
//Sandcastle_End
Sandcastle.finishedLoading(); //加载地图
}
function changeScene1(){ //点击切换二维地图
function startup(Cesium) {
widget.destroy();
widget = new Cesium.CesiumWidget('cesiumContainer', {sceneMode:Cesium.SceneMode.SCENE2D }); //将sceneMode定义为二维地图
url='http://115.28.101.41:8088/geoserver/cite/wms';
//Geoserver URL
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
// alert(layer);
var blackMarble =
layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: 'cite:'+time,// Here just give layer name
version:'1.1.0'
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
}
}
function changeScene2(){
//点击按钮切换三维地球
function startup(Cesium) {
widget.destroy();
widget = new Cesium.CesiumWidget('cesiumContainer');
//默认为sceneMode为三维地球
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:'+time,// Here just give layer name
version:'1.1.0'
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
}
}
function showEarth(year){ //通过此函数，实现点击不同年份的轮播条，切换不同年份的图层显示出来
time = year;
//alert(year);
html = new
Array('','','','','','','','','','','','','','','','','','','','');
//定义一个数组，把指针图片写进去，实现指针图片在不同年份的轮播条上显示
html[year-1996]='<img src="img/site.png" style="z-index: 1100; width:10px;position:absolute;
bottom: -5px;left:40%;" >';
var layer
= 'cite:'+year;
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
layers.removeAll();
var blackMarble
= layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: layer,// Here just give layer name
version:'1.1.0'
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
});
//Sandcastle_End
Sandcastle.finishedLoading();}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
for(i=1996;i<=2015;i++){ //实现除了当前年份的轮播条上有指针外，其他轮播条上没有
var id='#container'+i;
$(id).html(html[i-1996]);
//alert(id); }
}
}
}
//var stop=0;
function playEarth(){ //实现自动轮播切换图层
stop=0;
html1='';
html1='<img src="img/stop.jpg" onclick="stopEarth()" style="width:30px; position:absolute; bottom:0px; margin-left:160px;z-index: 1000; ">';
$("#1").html(html1);
timename= new Array();
for(j=1;j<21;j++){
//a=year-1995;
a=j%20;
switch(a){
case
1:
timename[0]=setTimeout("if(!stop){showEarth(1996);}else{}",0);
//用setTimeout来实现轮播有时间间隔的加载
break;
case
2:
//showEarth(1997);
timename[1]=setTimeout("if(!stop){showEarth(1997);}",5000);
break;
case
3:
//showEarth(1998);
timename[2]=setTimeout("if(!stop){showEarth(1998);}",10000);
break;
case
4:
//showEarth(1999);
timename[3]=setTimeout("if(!stop){showEarth(1999);}",15000);
break;
case
5:
//showEarth(2000);
timename[4]=setTimeout("if(!stop){showEarth(2000);}",20000);
break;
case
6:
//showEarth(2001);
timename[5]=setTimeout("if(!stop){showEarth(2001);}",25000);
break;
case
7:
//showEarth(2002);
timename[6]=setTimeout("if(!stop){showEarth(2002);}",30000);
break;
case
8:
// showEarth(2003);
timename[7]=setTimeout("if(!stop){showEarth(2003);}",35000);
break;
case
9:
//showEarth(2004);
timename[8]=setTimeout("if(!stop){showEarth(2004);}",40000);
break;
case
10:
//showEarth(2005);
timename[9]=setTimeout("if(!stop){showEarth(2005);}",45000);
break;
case
11:
// showEarth(2006);
timename[10]=setTimeout("if(!stop){showEarth(2006);}",50000);
break;
case
12:
// showEarth(2007);
timename[11]=setTimeout("if(!stop){showEarth(2007);}",55000);
break;
case
13:
//showEarth(2008);
timename[12]=setTimeout("if(!stop){showEarth(2008);}",60000);
break;
case
14:
//showEarth(2009);
timename[13]=setTimeout("if(!stop){showEarth(2009);}",65000);
break;
case
15:
//showEarth(2010);
timename[14]=setTimeout("if(!stop){showEarth(2010);}",70000);
break;
case
16:
//showEarth(2011);
timename[15]=setTimeout("if(!stop){showEarth(2011);}",75000);
break;
case
17:
// showEarth(2012);
timename[16]=setTimeout("if(!stop){showEarth(2012);}",80000);
break;
case
18:
//showEarth(2013);
timename[17]=setTimeout("if(!stop){showEarth(2013);}",85000);
break;
case
19:
//showEarth(2014);
timename[18]=setTimeout("if(!stop){showEarth(2014);}",90000);
break;
case
0:
//showEarth(2015);
timename[19]=setTimeout("if(!stop){showEarth(2015);}",95000);
break;
default:
break;
}
}
//alert(j);
}
function stopEarth(){
html1='';
html1='<img src="img/play.png" onclick="playEarth()" style="width:30px; position:absolute; bottom:0px; margin-left:160px;z-index: 1000; ">';
$("#1").html(html1);
stop=1;
//clearTimeout(timename[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]);
clearTimeout(timename[0]); //当点停止时，清除所有的setTimeout
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]);
//return false;
}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</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="Add imagery from a Web Map Service (WMS) server.">
<meta name="cesium-sandcastle-labels"
content="Beginner">
<title>Cesium Demo</title>
<link rel="stylesheet"
href="test.css">
<script type="text/javascript"
src="../Sandcastle-header.js"></script>
<script type="text/javascript"
src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript"
src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<body class="sandcastle-loading"
data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer"
class="fullSize">
<button
onclick="changeScene1()" >二维</button> //点击按钮，三维地球切换二维地图
<button
onclick="changeScene2()" >三维</button>
<div
id="1"><img
src="img/play.png" onclick="playEarth()"
style="width:30px;
position:absolute; bottom:0px;
margin-left:160px;z-index:
1000; "></div>
<div
style="position:absolute;
bottom:0;
margin-left:200px;
z-index: 1000;">
<li
style="float:left;
list-style: none;">
<p>1996</p>
<div
style="position:relative;">
<div
id="container1996"><img
src="img/site.png"
style="z-index:
1100; width:10px;position:absolute;
bottom: -5px;left:40%;" ></div>
<img
src="img/first.png"
onclick="showEarth(1996)"
style="width:50px;height:10px;">
//onclick 给showEarth传值，获取不同图层
</div>
</li>
<li
style="float:left;list-style:none;">
<p>1997</p>
<div
style="position:relative;">
<div
id="container1997"></div>
<img
src="img/2.png"
onclick="showEarth(1997)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>1998</p>
<div
style="position:relative;">
<div
id="container1998"></div>
<img
src="img/3.png"
onclick="showEarth(1998)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>1999</p>
<div
style="position:relative;">
<div
id="container1999"></div>
<img
src="img/4.png"
onclick="showEarth(1999)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;height:10px;">
<p>2000</p>
<div
style="position:relative;">
<div
id="container2000"></div>
<img
src="img/5.png"
onclick="showEarth(2000)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2001</p>
<div
style="position:relative;">
<div
id="container2001"></div>
<img
src="img/1.png"
onclick="showEarth(2001)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2002</p>
<div
style="position:relative;">
<div
id="container2002"></div>
<img
src="img/2.png"
onclick="showEarth(2002)"
style="width:50px;
height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none; ">
<p>2003</p>
<div
style="position:relative;">
<div
id="container2003"></div>
<img
src="img/3.png"
onclick="showEarth(2003)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2004</p>
<div
style="position:relative;">
<div
id="container2004"></div>
<img
src="img/4.png"
onclick="showEarth(2004)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2005</p>
<div
style="position:relative;">
<div
id="container2005"></div>
<img
src="img/5.png"
onclick="showEarth(2005)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2006</p>
<div
style="position:relative;">
<div
id="container2006"></div>
<img
src="img/1.png"
onclick="showEarth(2006)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2007</p>
<div
style="position:relative;">
<div
id="container2007"></div>
<img
src="img/2.png"
onclick="showEarth(2007)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2008</p>
<div
style="position:relative;">
<div
id="container2008"></div>
<img
src="img/3.png"
onclick="showEarth(2008)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2009</p>
<div
style="position:relative;">
<div
id="container2009"></div>
<img
src="img/4.png"
onclick="showEarth(2009)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2010</p>
<div
style="position:relative;">
<div
id="container2010"></div>
<img
src="img/5.png"
onclick="showEarth(2010)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2011</p>
<div
style="position:relative;">
<div
id="container2011"></div>
<img
src="img/1.png"
onclick="showEarth(2011)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2012</p>
<div
style="position:relative;">
<div
id="container2012"></div>
<img
src="img/2.png"
onclick="showEarth(2012)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2013</p>
<div
style="position:relative;">
<div
id="container2013"></div>
<img
src="img/3.png"
onclick="showEarth(2013)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2014</p>
<div
style="position:relative;">
<div
id="container2014"></div>
<img
src="img/4.png"
onclick="showEarth(2014)"
style="width:50px;height:10px;">
</div>
</li>
<li
style="float:left;
list-style: none;">
<p>2015</p>
<div
style="position:relative;">
<div
id="container2015"></div>
<img
src="img/6.png"
onclick="showEarth(2015)"
style="width:50px;height:10px;">
</div>
</li>
</ul> //列出1996年到2015年共二十年的轮播条
</div>
</div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
time = 1996;
function startup(Cesium) {
widget = new Cesium.CesiumWidget('cesiumContainer'); //定义一个地球容器
url='http://115.28.101.41:8088/geoserver/cite/wms';
//Geoserver URL //wms引用的地址，可以在wms服务打开的页面的源代码中找到
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
var blackMarble
= layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
//加载一个wms服务的图层覆盖到地球上
url : url,
layers: 'cite:'+time,// Here just give layer name //通过onclick＝“showEarth（year）”获取year的值传进来，从而得到不同年份的图层
version:'1.1.0' //wms服务版本号
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
// 定义地图显示的初始位置
});
//Sandcastle_End
Sandcastle.finishedLoading(); //加载地图
}
function changeScene1(){ //点击切换二维地图
function startup(Cesium) {
widget.destroy();
widget = new Cesium.CesiumWidget('cesiumContainer', {sceneMode:Cesium.SceneMode.SCENE2D }); //将sceneMode定义为二维地图
url='http://115.28.101.41:8088/geoserver/cite/wms';
//Geoserver URL
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
// alert(layer);
var blackMarble =
layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: 'cite:'+time,// Here just give layer name
version:'1.1.0'
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
}
}
function changeScene2(){
//点击按钮切换三维地球
function startup(Cesium) {
widget.destroy();
widget = new Cesium.CesiumWidget('cesiumContainer');
//默认为sceneMode为三维地球
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:'+time,// Here just give layer name
version:'1.1.0'
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
}
}
function showEarth(year){ //通过此函数，实现点击不同年份的轮播条，切换不同年份的图层显示出来
time = year;
//alert(year);
html = new
Array('','','','','','','','','','','','','','','','','','','','');
//定义一个数组，把指针图片写进去，实现指针图片在不同年份的轮播条上显示
html[year-1996]='<img src="img/site.png" style="z-index: 1100; width:10px;position:absolute;
bottom: -5px;left:40%;" >';
var layer
= 'cite:'+year;
function startup(Cesium) {
'use strict';
//Sandcastle_Begin
layers.removeAll();
var blackMarble
= layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: layer,// Here just give layer name
version:'1.1.0'
}));
// Start off looking at Australia.
widget.camera.setView({
destination: Cesium.Rectangle.fromDegrees(-100,0,310,80)
});
//Sandcastle_End
Sandcastle.finishedLoading();}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
for(i=1996;i<=2015;i++){ //实现除了当前年份的轮播条上有指针外，其他轮播条上没有
var id='#container'+i;
$(id).html(html[i-1996]);
//alert(id); }
}
}
}
//var stop=0;
function playEarth(){ //实现自动轮播切换图层
stop=0;
html1='';
html1='<img src="img/stop.jpg" onclick="stopEarth()" style="width:30px; position:absolute; bottom:0px; margin-left:160px;z-index: 1000; ">';
$("#1").html(html1);
timename= new Array();
for(j=1;j<21;j++){
//a=year-1995;
a=j%20;
switch(a){
case
1:
timename[0]=setTimeout("if(!stop){showEarth(1996);}else{}",0);
//用setTimeout来实现轮播有时间间隔的加载
break;
case
2:
//showEarth(1997);
timename[1]=setTimeout("if(!stop){showEarth(1997);}",5000);
break;
case
3:
//showEarth(1998);
timename[2]=setTimeout("if(!stop){showEarth(1998);}",10000);
break;
case
4:
//showEarth(1999);
timename[3]=setTimeout("if(!stop){showEarth(1999);}",15000);
break;
case
5:
//showEarth(2000);
timename[4]=setTimeout("if(!stop){showEarth(2000);}",20000);
break;
case
6:
//showEarth(2001);
timename[5]=setTimeout("if(!stop){showEarth(2001);}",25000);
break;
case
7:
//showEarth(2002);
timename[6]=setTimeout("if(!stop){showEarth(2002);}",30000);
break;
case
8:
// showEarth(2003);
timename[7]=setTimeout("if(!stop){showEarth(2003);}",35000);
break;
case
9:
//showEarth(2004);
timename[8]=setTimeout("if(!stop){showEarth(2004);}",40000);
break;
case
10:
//showEarth(2005);
timename[9]=setTimeout("if(!stop){showEarth(2005);}",45000);
break;
case
11:
// showEarth(2006);
timename[10]=setTimeout("if(!stop){showEarth(2006);}",50000);
break;
case
12:
// showEarth(2007);
timename[11]=setTimeout("if(!stop){showEarth(2007);}",55000);
break;
case
13:
//showEarth(2008);
timename[12]=setTimeout("if(!stop){showEarth(2008);}",60000);
break;
case
14:
//showEarth(2009);
timename[13]=setTimeout("if(!stop){showEarth(2009);}",65000);
break;
case
15:
//showEarth(2010);
timename[14]=setTimeout("if(!stop){showEarth(2010);}",70000);
break;
case
16:
//showEarth(2011);
timename[15]=setTimeout("if(!stop){showEarth(2011);}",75000);
break;
case
17:
// showEarth(2012);
timename[16]=setTimeout("if(!stop){showEarth(2012);}",80000);
break;
case
18:
//showEarth(2013);
timename[17]=setTimeout("if(!stop){showEarth(2013);}",85000);
break;
case
19:
//showEarth(2014);
timename[18]=setTimeout("if(!stop){showEarth(2014);}",90000);
break;
case
0:
//showEarth(2015);
timename[19]=setTimeout("if(!stop){showEarth(2015);}",95000);
break;
default:
break;
}
}
//alert(j);
}
function stopEarth(){
html1='';
html1='<img src="img/play.png" onclick="playEarth()" style="width:30px; position:absolute; bottom:0px; margin-left:160px;z-index: 1000; ">';
$("#1").html(html1);
stop=1;
//clearTimeout(timename[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]);
clearTimeout(timename[0]); //当点停止时，清除所有的setTimeout
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]);
//return false;
}
if (typeof Cesium
!== "undefined") {
startup(Cesium);
} else if (typeof
require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>
效果图片：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【起航计划 037】2015 起航计划 Android APIDemo的魔鬼步伐 36 App->Service->Remote Service Binding AIDL实现不同进程间调用服务接口 kill 进程
- android 不同进程间的调用 AIDL 实现通讯服务
- android 不同进程间的调用 AIDL 实现通讯服务
- 【起航计划 037】2015 起航计划 Android APIDemo的魔鬼步伐 36 App-&gt;Service-&gt;Remote Service Binding AIDL实现不同进程间调用服务接口 kill 进程
- 简单音乐播放实例的实现,Android Service AIDL 远程调用服务
- 根据配置文件来切换不同服务的实现
- Cesium 调用Geoserver WMS服务及Geoserver服务发布
- AE实现不同图层的合并C#代码
- 《WF编程》系列之19 - 触发事件与调用方法:服务以及工作流的实现
- Spring事务配置笔记(实现不同Service间调用事务)
- ArcGIS学习（五）OpenLayers调用WMS服务
- 《WF编程》系列之19 - 触发事件与调用方法:服务以及工作流的实现 3.2.3.2服务的实现
- 利用微软WebService技术实现远程数据库存取 利用web服务在不同站点间共享同一数据库
- 用js实现多域名不同文件的调用方法
- 利用微软WebService技术实现远程数据库存取 利用web服务在不同站点间共享同一数据库
- 远程服务调用框架设计与实现
- 利用微软WebService技术实现远程数据库存取 利用web服务在不同站点间共享同一数据库
- WEB服务动态解析及调用技术的实现（基于WSDL4J及SAAJ）
- Ajax中，ModalPopup与UpdatePanel结合，实现局部刷新的登录效果 (调用cs服务)
- Ajax中，ModalPopup与UpdatePanel结合，实现局部刷新的登录效果 (调用cs服务)