Cesium项目版本1

最新推荐文章于 2024-07-12 14:20:55 发布
最新推荐文章于 2024-07-12 14:20:55 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： cesium
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/less_cold/article/details/52593219
版权 
<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>

less_cold
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cesium+HTML5+3D地图展示
08-27
cesium+HTML5+3D地图展示
cesium三维地图效果
less_cold的博客
09-14 4064
Cesium Demo require.config({ baseUrl : '../../../Source' }); @import url(../templates/bucket.css); 1996 19
Cesium入门基础（一） 项目搭建
最新发布
m0_61460635的博客
07-12 449
1. 在public目录下，创建static/cesiumAssets文件夹。2. 找到以下文件复制到 static/cesiumAssets 文件夹中。官网上有介绍，这是需要托管的静态资源，如果缺少这一步会导致页面无法正常显示，执行命令，配置vue项目，这里我选择使用vue3+vite+ts。页面中自带了许多cesium的组件，可以通过配置来控制是否显示。复制控制台链接，粘贴到浏览器，显示这个页面即为创建成功。注：如果有版本要求，可以在npm上找自己需要的版本，清除Vue模板自带的页面、样式。
Cesium 查看版本
Y13349887034的博客
11-30 1411
Cesium 版本号
Cesium安装和版本简介
nmj2008的博客
02-05 3913
Cesium一般是指CesiumJS https://cesium.com/index.html
Cesium三维地球-点击图标放大显示特效
weixin_42520034的博客
04-10 463
Cesium三维地球动画实现
cesium 最新版本8月1
08-25
在"cesium 最新版本8月1"中，我们可以关注以下几个关键知识点： 1. **版本更新**：最新版本8月1可能包含了对旧版的改进和优化，比如性能提升、新功能添加或已知问题的修复。通常，开发者会在`CHANGES.md`文件中记录...
cesium 1.94版本
06-07
总结来说，Cesium 1.94版本包含了一个完整的开发环境配置，从构建系统（Gulp）、本地服务器、项目入口文件，到静态资源管理和代码质量控制工具（Eslint）。开发者可以通过这个压缩包快速地搭建起一个基于Cesium的3D...
三维js版本的开源gis的引擎Cesium1.106版本
07-21
Cesium 1.106是该库的一个特定版本，可能包含了性能优化、新特性以及对先前版本的bug修复。 在提供的文件列表中，我们可以看到以下几个关键文件： 1. **index.cjs**：这是主入口文件，通常包含应用的启动代码，...
cesium1.107版本
07-27
在Cesium项目中，这个配置文件可能帮助优化静态资源的处理和部署。 `.eslintignore`文件是ESLint的配置文件，用于指定在代码质量检查时忽略的文件或目录。这有助于确保只对必要的源代码进行检查，提高开发效率。 `...
vite+vue+cesium项目搭建
03-13
【vite+vue+cesium项目搭建】是一个关于使用现代前端构建工具Vite，结合Vue.js框架，并集成3D地球渲染库Cesium的教程。Vite是由Vue.js作者尤雨溪开发的新型前端构建工具，它提供了更快的热模块替换（HMR）和更快的...
Cesium边界流动线效果
09-01
Cesium边界流动线材质效果，预览http://dongnan185.com:8083/videos/boundLine.mp4
Cesium地图中加载的建筑模型3D model 模型 gltf格式建筑模型
04-24
从谷歌地球下载的深圳市福田区的几个建筑模型， 自行转换为gltf格式了。 直接在cesium代码中就能加载调用。。。一共6个模型， 深圳图书馆， 深圳市民中心 深圳音乐厅 深圳证券交易所 。。。
threejs(19)-Cesium生成3D地图
woyebuzhidao321的博客
01-18 2002
国内的地图数据获取，天地图:// 是否显示信息窗口// 是否显示查询按钮// 不显示home按钮// 控制查看器的显示模式// 是否显示图层选择// 是否显示帮助按钮// 是否播放动画// 是否显示时间轴// 是否显示全屏按钮// 设置天空盒sources: {},}),// 天地图矢量路径图// }),// 天地图影像服务// }),// OSM地图,// }),// 高德矢量地图,}),});// 是否显示信息窗口// 设置地形// }),}),})
查看 3dtiles 内嵌的 gltf 模型版本号 cesium 版本
baofangbei的博客
08-20 419
在线检测地址 作者QQ 826343539
cesium地图
南栀@的博客
05-24 488
使用camera.setView()初始化view,使用Cartesian3和HeadingPitchRoll指定相机的位置和方向。：第一个参数是监听的属性方法， 用户行为类型：ScreenSpaceEventType 监听方法+用户行为类型。注： 在创建Cesium Viewer的时候，将access Token填为自己的access token即可。cesium Ion提供瓦片图和3D地理空间数据的平台，支持将数据添加到自己的应用中。
cesium 地图
josiecici的博客
10-11 187
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Include the CesiumJS JavaScript and CSS files --> <script src="https://cesium.com/downloads/cesiumjs/releases/1.86/Build/Cesium/Cesium.js"></sc
CesiumJS内置三维数字地球，你都不知道效果有多炫酷。
2401_82881178的博客
04-10 1165
CesiumJS是一个开源的JavaScript库，用于在Web浏览器中创建高性能的3D地球和地理空间应用程序。它提供了强大的工具和API，使开发者能够构建具有交互性、可视化和地理空间分析功能的应用。其中，longitude、latitude 和 height 分别表示地球的经度、纬度和高度，heading、pitch 和 roll 分别表示地球的偏航角、俯仰角和翻滚角。在这个例子中，我们使用 OpenStreetMap 的地图瓦片作为背景图层，使用 Cesium 的全球地形数据作为地形图层。
在vue上使用cesium开发三维地图
wangyingying12的博客
04-18 5185
沙盒是一种安全特性，将潜在风险的代码（例如第三方脚本）与系统的其余部分隔离开来，防止脚本对浏览器的恶意操作。'allow-scripts'是一个权限选项，允许在沙箱环境中运行脚本。如果未设置此权限，浏览器将阻止脚本在沙箱中运行并显示此错误消息。这个错误信息通常出现在脚本尝试在沙盒框架中运行，但是'allow-scripts'权限没有被设置。这只是一个简单的示例，您可以通过查看 Cesium 的文档和示例来学习如何使用更高级的功能。接下来，在 Vue 项目中引入 Cesium，可以使用以下几种方式。
Cesium项目搭建
04-12
1. 下载Cesium：首先，你需要从Cesium的官方网站（https://cesium.com/）下载Cesium的最新版本。 2. 创建项目：在你的项目目录中创建一个新的文件夹，并将下载的Cesium文件解压到该文件夹中。 3. 引入Cesium：在你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值