cesium三维地图效果
2016-09-14 15:45
281 查看
<!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>
<div id="cesiumContainer" class="fullSize">
<div style="position:fixed;bottom:0;left:120px;z-index: 1010">
<img src="../../../timeline/play.png" onclick='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 onclick="showEarth(1996)"><img src="../../../timeline/open.png" style="width:50px; height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container1996">
<img src="../../../timeline/at.png" style="width: 10px">
</div>
</div>
</li>
<li style="float: left;list-style: none;">
<div style="position: relative">
<p style="color:red">1997</p>
<a onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="showEarth(2007)"><img src="../../../timeline/second.p
c27c
ng" 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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="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 onclick="showEarth(2015)"><img src="../../../timeline/last.png" style="width:50px ;height:10px"></a>
<div style="position:absolute;bottom:3px;" id="container2015"></div>
</div>
</li>
</ul>
</div></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
widget = new Cesium.CesiumWidget('cesiumContainer');
url='http://10.2.10.59:8088/geoserver/cite/wms'; //Geoserver URL
layers = widget.scene.globe.imageryLayers;
layers.removeAll();
var blackMarble=layers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({
url : url,
layers: 'cite:1997',// Here just give layer name
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);
}
function showEarth(year){
//var url='http://10.2.10.59:8088/geoserver/cite/wms'; //Geoserver URL
//var layers = widget.scene.globe.imageryLayers;
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'
}));
//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);
for(i=1996;i<2016;i++){
var id='#container'+i;
$(id).html(html[i-1996]);
}
}
}
function playEarth(){
//alert('test');
for(i=1;i<20;i++){
a=i%20;
switch(a){
case 1: showEarth(1996);break;
case 2: showEarth(1997);alert('test2');break;
case 3: showEarth(1998);alert('test2');break;
case 4: showEarth(1999);break;
case 5: showEarth(2000);break;
case 6: showEarth(2001);break;
case 7: showEarth(2002);break;
case 8: showEarth(2003);break;
case 9: showEarth(2004);break;
case 10: showEarth(2005);break;
case 11: showEarth(2006);break;
case 12: showEarth(2007);break;
case 13: showEarth(2008);break;
case 14: showEarth(2009);break;
case 15: showEarth(2010);break;
case 16: showEarth(2011);break;
case 17: showEarth(2012);break;
case 18: showEarth(2013);break;
case 19: showEarth(2014);break;
case 20: showEarth(2015);break;
default: break;
}
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- poj 1321
- AlertDialog的几种用法
- 使用Alluxio优化Spark RDD
- Stanford CoreNLP 3.6.0 使用入门
- mapreduce-实现多表关联
- OS 学习笔记导航
- 网站备份脚本
- Oracle学习笔记之第八节sql语句(开发课学生指南051)
- Configuring the Avatar
- centos7 yum安装 mysql 5.6
- 数据库安全 Oracle审计Audit
- LeetCOde------3.Longest Substring Without Repeating Characters
- Android 雷达扫描效果、动画SweepGradient
- opencv安装教程
- CCF 201409-2 我100
- 抽象类
- MAC 读写NTFS硬盘
- Oracle学习笔记之第七节手动数据库链介绍
- Spring之AOP（二）
- 序列化与反序列化