Cesium引入wms服务，并实现不同图层的切换调用，及轮流播放
来源：互联网 发布：java邮件服务器搭建 编辑：程序博客网 时间：2024/05/08 23:13
<!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>
<divstyle="position:absolute;bottom:0;margin-left:200px;z-index: 1000;">
<listyle="float:left;list-style: none;">
<p>1996</p>
<divstyle="position:relative;">
<divid="container1996"><imgsrc="img/site.png" style="z-index:1100; width:10px;position:absolute;bottom: -5px;left:40%;" ></div>
<imgsrc="img/first.png" onclick="showEarth(1996)"style="width:50px;height:10px;">//onclick 给showEarth传值，获取不同图层
</div>
</li>
<listyle="float:left;list-style:none;">
<p>1997</p>
<divstyle="position:relative;">
<divid="container1997"></div>
<imgsrc="img/2.png" onclick="showEarth(1997)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>1998</p>
<divstyle="position:relative;">
<divid="container1998"></div>
<imgsrc="img/3.png" onclick="showEarth(1998)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>1999</p>
<divstyle="position:relative;">
<divid="container1999"></div>
<imgsrc="img/4.png" onclick="showEarth(1999)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;height:10px;">
<p>2000</p>
<divstyle="position:relative;">
<divid="container2000"></div>
<imgsrc="img/5.png" onclick="showEarth(2000)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2001</p>
<divstyle="position:relative;">
<divid="container2001"></div>
<imgsrc="img/1.png" onclick="showEarth(2001)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2002</p>
<divstyle="position:relative;">
<divid="container2002"></div>
<imgsrc="img/2.png" onclick="showEarth(2002)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none; ">
<p>2003</p>
<divstyle="position:relative;">
<divid="container2003"></div>
<imgsrc="img/3.png" onclick="showEarth(2003)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2004</p>
<divstyle="position:relative;">
<divid="container2004"></div>
<imgsrc="img/4.png" onclick="showEarth(2004)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2005</p>
<divstyle="position:relative;">
<divid="container2005"></div>
<imgsrc="img/5.png" onclick="showEarth(2005)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2006</p>
<divstyle="position:relative;">
<divid="container2006"></div>
<imgsrc="img/1.png" onclick="showEarth(2006)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2007</p>
<divstyle="position:relative;">
<divid="container2007"></div>
<imgsrc="img/2.png" onclick="showEarth(2007)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2008</p>
<divstyle="position:relative;">
<divid="container2008"></div>
<imgsrc="img/3.png" onclick="showEarth(2008)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2009</p>
<divstyle="position:relative;">
<divid="container2009"></div>
<imgsrc="img/4.png" onclick="showEarth(2009)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2010</p>
<divstyle="position:relative;">
<divid="container2010"></div>
<imgsrc="img/5.png" onclick="showEarth(2010)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2011</p>
<divstyle="position:relative;">
<divid="container2011"></div>
<imgsrc="img/1.png" onclick="showEarth(2011)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2012</p>
<divstyle="position:relative;">
<divid="container2012"></div>
<imgsrc="img/2.png" onclick="showEarth(2012)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2013</p>
<divstyle="position:relative;">
<divid="container2013"></div>
<imgsrc="img/3.png" onclick="showEarth(2013)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2014</p>
<divstyle="position:relative;">
<divid="container2014"></div>
<imgsrc="img/4.png" onclick="showEarth(2014)"style="width:50px;height:10px;">
</div>
</li>
<listyle="float:left;list-style: none;">
<p>2015</p>
<divstyle="position:relative;">
<divid="container2015"></div>
<imgsrc="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>
效果图片：
- Cesium引入wms服务，并实现不同图层的切换调用，及轮流播放
- 关于Cesium 加载wms服务
- 原生JS实现图片的轮流播放
- OpenLayers调用WMS服务
- cesium图层去除的方法
- OGC 的WCS WFS 及WMS 服务
- js实现轮流切换图片
- Js实现多张图片无规律的轮流切换
- Openlayers2切换supermap WMS服务底图，已解决
- OpenLayers+天地图+Geoserver+WMS图层服务
- cesium引用wms
- 根据配置文件来切换不同服务的实现
- Cesium (五) 栅格图层
- flash不同层的播放顺序
- 按钮上显示值的轮流切换
- android 不同进程间的调用 AIDL 实现通讯服务
- 用简单的C语言实现多任务轮流切换（模拟操作系统线程机制）
- ArcEngine调用GeoServer中的WMS地图服务
- 大整数加法
- 异常的深入研究与分析（2）
- Android开发中的日常积累
- python中对excel的操作
- MQTT 嵌入式 C语言 客户端libemqtt源码解析
- Cesium引入wms服务，并实现不同图层的切换调用，及轮流播放
- openstack安装部署2——基本环境安装
- weex&ReactNative对比
- CSS强制英文、中文换行与不换行 强制英文换行-样式在线生成-样式在线调试
- AndroidStudio配色方案和Sexy Editor插件
- 编辑距离及编辑距离算法
- 关于java／android 数据序列化后SerialVersionUID的获取
- gpedit.msc组策略异常:找不到资源。。。获取TrustedInstaller
- ImportError: No module named win32api
