cesium三维地图效果

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

less_cold
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
实现openlayers-Cesium二三维联动效果的功能脚本1
11-21
该脚本能够实现openlayers-Cesium二三维联动效果的功能
cesium-1.52 Map Pins.html
weixin_42193179的博客
04-01 1067
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=...
探秘3D地球：Cesium - 动态、实时的地理空间Web应用框架
最新发布
gitblog_00039的博客
03-31 291
探秘3D地球：Cesium - 动态、实时的地理空间Web应用框架 项目地址:https://gitcode.com/songliuchen/cesium Cesium 是一个强大的开源JavaScript库，用于构建动态、实时的3D地球和地理空间应用程序。它以其卓越的性能、丰富的特性集和广泛的社区支持赢得了开发者们的青睐。 项目简介 Cesium是一个基于WebGL的3D地球渲染引擎，旨在提供无...
cesium 新建模型_TerraExplorer Pro 7.2版本输出的3D Tiles模型如何在Cesium中使用？
weixin_31697021的博客
01-18 898
在TerraExplorer Pro 7.2版本中，增加了三维模型导出功能，能够将3DML模型导出成Cesium支持的3D Tiles和Esri支持的I3S格式，方便大家做三维模型(包括传统人工模型、BIM、倾斜实景三维模型等)的共享服务。随着这几年基于Cesium应用项目的增多，这个功能也更方便大家将以前3dml格式的成果数据转移到新的项目中来应用，同时也简化了模型的处理流程，更易于应...
cesium图层管理
qq_46166163的博客
03-09 3283
cesium图层管理
Cesium学习笔记（七）：Demo学习（自由控制飞行的飞机）
热门推荐
simple_soul的博客
07-10 1万+
这是官方的教程Demo，名字叫Use HeadingPitchRoll，顾名思义，就是教你用HeadingPitchRoll这个方法的，下面我们就来看一看这个Demo首先先说一下，这个Demo是沙盒里面的，所以如果你想在本地运行的话需要改一下html这里是html<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
Cesium边界流动线效果
09-01
Cesium边界流动线材质效果，预览http://dongnan185.com:8083/videos/boundLine.mp4
Cesium添加模型并设置各种属性
玖玖年的程序猿
12-21 3592
一、所需文件 css样式文件： Cesium-1.88\Apps\Sandcastle\templates\bucket.css js文件： Cesium-1.88\Build\Cesium\Cesium.js Cesium-1.88\Apps\Sandcastle\Sandcastle-header.js 二、HTML body <div id="cesiumContainer" class="fullSize"></div> 三、JavaScrip..
cesium实现二三维分屏地图同步效果
专注GIS开发
04-26 5939
cesium实现二三维分屏地图同步效果
在cesium地图中指定经纬度点绘制指定高度的柱子
yyyyyyyyyyy_9的博客
07-26 328
本文记录了在cesium地图中指定经纬度点绘制指定高度的柱子的代码。
Cesium+ECharts：柱状图图标
席木木的博客
11-25 1626
Cesium结合ECharts图表库,实现三维场景中添加柱状图图标。
Vue2创建项目并配置Cesium加载三维地图
03-05
1.基于Vue2 的Cesium三维地图框架; 2.已引入elementui组件 已完成对cesium的加载配置安装及测试; 3.可在该框架上开发、发布打包等; 4.该框架没有其它冗余依赖等，可以直接到项目使用，无版权控制。
三维可视化 数字城市 选用 cesium开源GIS库 加入 主流地图 WebGL效果 完全开源 配合后台 实现可视化编辑保存
06-05
前端 vue3.0 + typescript 三维可视化 数字城市 数字孪生 选用 cesium开源GIS库 加入 主流地图 WebGL效果 完全开源 配合后台 实现可视化编辑保存。
Cesium实现效果：1、切换底图资源；2、折叠菜单项；3、修改默认视点为北京天安门；4、开启关闭三维在线地形；5、加载离线本地
06-15
Cesium实现效果 1、切换底图资源 ...4、开启关闭三维在线地形 5、加载离线本地城市建筑素模(北京、上海或省会城市) 6、修改homeButton的默认返回位置 备注：离线素模数据可以私信获取，数量太大，无法发送
matlab天线辐射方向仿真,天线辐射方向图与matlab仿真.pdf
weixin_30676351的博客
03-26 2098
天线阵列辐射场的研究摘要随着现代通信技术的迅猛发展，无线通讯越来越广泛，越来越多的应用于国防建设，经济建设以及人民的生活等领域。在无线通信系统中，需要将来自发射机的导波能量转变为无线电波，用来辐射或接受无线电波的装置称为天线。在通信过程中，特别是点对点的通信，要求天线具有相当强的方向性，即希望天线能将绝大部分的能量集中向某一预定方向辐射。阵列天线就是近代天线研究的一种方向，其研究催生了包括相控阵天...
Cesium快速上手1-CesiumWidget-Scene结构
在人间负债^
08-06 997
Globe绘制的是全球地形，它需要两个东西，一个是地形高程信息，另外一个是影像图层，也就是地球的表皮。整个地形的绘制也是渐进式的，即视线看到的地方才会去调度相关的地形高程信息，找到对应位置的地形影像贴上。这个div好比一个舞台，CesiumWidget有了这个舞台，就开始创建一系列子div，还是canvas对象，据此搭建了整个三维场景。canvas则是在container上构建的Canvas类的对象，可以据此获取WebGL绘制的画笔。container则是构造函数的参数，也就是传入的div，这里记录一下。.
cesium 卷帘图
zhang_zan
09-04 148
cesium卷帘图
Cesium 加载全球所有国家边界线以及添加button
qq_26579715的博客
01-08 4463
静态资源文件如下： <script type="text/javascript" src="/emc/js/Cesium-1.64/Build/CesiumUnminified/Cesium.js"></script> <script type="text/javascript" src="/emc/js/Cesium-1.64/Apps/Sandcastl...
cesium 地下物体显隐
qq_34200979的博客
01-22 1192
1.先上效果 2.上代码引入bucket.css 下载地址 <!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-.
cesium三维系统
09-07
Cesium三维系统是一种基于Web的开源工具，用于构建和展示高度可交互的3D地球、地图和场景。它采用JavaScript编写，并使用开放式地理空间数据标准，如地理数据编码（Geographic Data Encoding，简称GeoJSON）和地理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值