Cesium.js（SuperMap iClient3D for Cesium）进行三维场景展示和图层动画

于 2024-10-10 14:29:02 发布
阅读量797 收藏 6
点赞数 11
分类专栏： WebGL cesium EarthSDK SuperMap 文章标签： 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51983847/article/details/142820388
版权

1）：参考API文档：SuperMap iClient3D for Cesium 开发指南

2）：官网示例：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#layer

3）：SuperMap iServer：欢迎使用 SuperMap iServer 11i(2022) (supermapol.com)

1.HTML部分

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>图层动画</title>
	<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
	<link href="./css/pretty.css" rel="stylesheet">
	<script src="./js/jquery.min.js"></script>
	<script src="./js/config.js"></script>
	<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
</head>
<body>
	<div id="cesiumContainer"></div>
	<div id='loadingbar' class="spinner">
		<div class="spinner-container container1">...</div>
		<div class="spinner-container container2">...</div>
		<div class="spinner-container container3">...</div>
	</div>
	<div id="toolbar" class="param-container tool-bar">
		<button type="button" id="start" class="button black">动画开始</button>
	</div>

  • link 标签: 引入了 Cesium 的样式表 (widgets.css) 和自定义的样式表 (pretty.css) 以美化界面。

  • script 标签: 通过 jQuery、项目配置文件 (config.js)、Cesium 库 (Cesium.js) 来加载 JavaScript 功能。 config.js 很可能包含 API 密钥和场景相关的配置。

  • cesiumContainer: 这是 Cesium 三维地球容器，Cesium.js 会将 3D 场景渲染到这个 div 中。

  • loadingbar: 页面加载时的旋转加载动画，用户等待场景加载时显示，加载完后会被移除。

  • toolbar: 工具栏，包含一个按钮 “动画开始”，用户点击后会启动图层动画。

2.JS部分

var viewer = "";
function onload(Cesium) {
	viewer = new Cesium.Viewer('cesiumContainer');

  • viewer: 全局变量，用来存储 Cesium 的 Viewer 实例，它是 Cesium 应用的核心，用于管理和渲染 3D 场景。

  • Cesium.Viewer: 通过创建 Viewer 实例，将 Cesium 场景附加到 cesiumContainer 上。

3.场景和视角设置

scene.camera.setView({
	destination: new Cesium.Cartesian3( -2179784.959673108, 4380066.04070574, 4092037.131416261),
	orientation: {
		heading: 3.1380738694592583,
		pitch: -0.2798725811830971,
		roll: 6.283185307179586
	}
});

4.图层加载

var promise = scene.open(URL_CONFIG.SCENE_ANIMATION);
var layerName = ["第一层", "第二层", "第三层", "设备", "第四层", "墙01@Model - 副本", "屋顶@Model - 副本"];
var layerIndex = [0, 1, 2, 3, 4, 5, 6];

  • 使用 scene.open 打开一个包含动画的场景文件，场景文件地址从 config.js 中读取。

  • layerName 是一个包含图层名称的数组，layerIndex 是图层的索引数组，用于后续的图层动画。

5.动画

$("#start").click(function () {
	viewer.camera.speedRatio = 0.25;
	var viewCenter = new Cesium.Cartesian3(-2179804.7971194154, 4380105.068829024, 4091940.5042720092);				
	setAnimation(sequenceLayers, index);
	viewer.camera.flyCircle(viewCenter);					
});

  • 点击 "动画开始" 按钮后，相机会围绕 viewCenter 坐标进行循环飞行，同时调用 setAnimation 函数启动图层动画。

  • speedRatio 用于调整相机的旋转速度。

6.图层动画函数

function setAnimation(layers, index) {
	layers[index].visible = true;
	return layers[index].setAnimation({
		keyframes: {
			'100%': {
				translation: Cesium.Cartesian3.fromDegrees(layers[index].lon, layers[index].lat, 0)
			},
			'0%': {
				translation: Cesium.Cartesian3.fromDegrees(layers[index].lon, layers[index].lat, 50)
			}
		},
		duration: 2.0
	}).then(function () {
		if ((index + 1) >= animationAllLayer.length) {
			return;
		}
		return setAnimation(animationAllLayer, index + 1);
	})
}

  • setAnimation 函数通过 setAnimation 方法为图层设置关键帧动画，图层在 2 秒内从 50 米高处下降到地面。

  • 动画完成后，递归调用 setAnimation，以顺序播放多个图层的动画。

7.代码展示

<body>
	<div id="cesiumContainer"></div>
	<div id='loadingbar' class="spinner">
		<div class="spinner-container container1">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		</div>
		<div class="spinner-container container2">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		</div>
		<div class="spinner-container container3">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
		</div>
	</div>
	<div id="toolbar" class="param-container tool-bar">
		<button type="button" id="start" class="button black">动画开始</button>
	</div>
	<script>
		var viewer = "";
		function onload(Cesium) {
			viewer = new Cesium.Viewer('cesiumContainer');
			viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
				url: 'https://dev.virtualearth.net',
				mapStyle: Cesium.BingMapsStyle.AERIAL,
				key: URL_CONFIG.BING_MAP_KEY
			}));

			var scene = viewer.scene;
			viewer.scene.globe.show = false;
			scene.debugShowFramesPerSecond = true;
			scene.hdrEnabled = false;
			scene.sun.show = true;
			viewer.scene.postProcessStages.mxaa = false;
			viewer.scene.postProcessStages.fxaa.enabled = true;
			scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
			var promise = scene.open(URL_CONFIG.SCENE_ANIMATION);
			var animationLayer = [];
			var sequenceLayers = [];
			var layerName = ["第一层", "第二层", "第三层", "设备", "第四层", "墙01@Model - 副本", "屋顶@Model - 副本"];
			var layerIndex = [0, 1, 2, 3, 4, 5, 6]; //索引数组
			var scratchWindowPosition = new Cesium.Cartesian2();
			Cesium.when(promise, function (layers) {
				//相机定位
				scene.camera.setView({
					destination: new Cesium.Cartesian3( -2179784.959673108, 4380066.04070574, 4092037.131416261),
					orientation: {
						heading: 3.1380738694592583,
						pitch: -0.2798725811830971,
						roll: 6.283185307179586
					}
				});
				for (var i = 0; i < layers.length; i++) {
					layers[i].visible = false;
				}

				for (var j = 0; j < layerName.length; j++) {
					var layer = scene.layers.find(layerName[j]);
					animationLayer.push(layer);
				}
				for (var i = 0; i < animationLayer.length; i++) {
					sequenceLayers[layerIndex[i]] = animationLayer[i];
				}


				var index = 0;
				$("#start").click(function () {
					// viewer.scene.camera.flyCircleLoop = true; //是否循环旋转
					viewer.camera.speedRatio = 0.25;
					//旋转点
					var viewCenter =  new Cesium.Cartesian3(-2179804.7971194154, 4380105.068829024, 4091940.5042720092);				
					setAnimation(sequenceLayers, index);
					viewer.camera.flyCircle(viewCenter);					
				});

				$('#loadingbar').remove();
			});

			var animationAllLayer;

			function setAnimation(layers, index) {
				animationAllLayer = layers;
				layers[index].visible = true;				
				return layers[index].setAnimation({				
					keyframes: {
						'100%': {
							translation: Cesium.Cartesian3.fromDegrees(layers[index].lon, layers[index].lat, 0)
						},
						'0%': {
							translation: Cesium.Cartesian3.fromDegrees(layers[index].lon, layers[index].lat, 50),
						}
					},
					duration: 2.0
				}).then(function () {
					if ((index + 1) >= animationAllLayer.length) {
						return;
					}
					return setAnimation(animationAllLayer, index + 1);
				})
			}
		}
		if (typeof Cesium !== 'undefined') {
			window.startupCalled = true;
			onload(Cesium);
		}
	</script>
</body>

8.效果展示

SteveJi666
关注
专栏目录
【超图】SuperMap iClient3D 11i for Cesium三维场景中图例使用说明
冰美式当作酒
06-24 1050
11beta版本的iServer中将图例(legend)的已经单独做出来了一个窗口，可以通过请求直接获取到桌面配好的地图图例。那么既然能拿到图例了，如何在三维场景中使用呢？如何将地图的图例也展示在三维场景之中。本片文章将简单说明一下如何使用。......
SuperMap iClient3D 11i for Cesium三维场景中图例使用说明
SuperMap技术控
06-24 1237
11beta版本的iServer中将图例(legend)的已经单独做出来了一个窗口，可以通过请求直接获取到桌面配好的地图图例。那么既然能拿到图例了，如何在三维场景中使用呢？如何将地图的图例也展示在三维场景之中。本片文章将简单说明一下如何使用。...
记录超图SuperMap Iclient3D for Cesium初使用
weixin_48835514的博客
04-03 553
五、在页面中进行开发，首先需要创建地图容器，并在mounted（）调用初始化地图的方法。其中我使用的是天地图图层作为底图，需要去天地图官网申请token。二、从超图官网下载SuperMap iClient3D for Cesium离线包，我下载的是这个。三、将离线包里的Cesium文件夹放在项目的public文件夹下面。公司要做三维项目，以前没有接触过，记录一下自己学习的这几天。四、在index.html里引入cesium.js和css。
vue3+ts+supermap iclient3d for cesium功能集合
2301_77133858的博客
09-14 518
会把各项功能链接放在这。
SuperMap iClient3D for Cesium 几何对象匹配建筑物或者地形
SuperMap技术控
11-22 574
大家在做项目的过程中经常遇到需要将自动将点位匹配到建筑物或者地形表面的需求，小编针对大家的这一需求，对其中最常用的点、线、面三种类型的对象分别如何匹配到建筑或者地形来做一个详细介绍。
SuperMap iClient3D for Cesium 实现动态绘圆的几何查询
CX_Chan的博客
06-21 784
空间查询是较为常用的功能，一般的空间查询是利用iserver的接口构造多边形REGION进行查询。那如何动态绘制圆进行查询呢？接下来就让我们来看一下实现思路和效果。
SuperMap iClient3D for Cesium 实现图层下钻功能
m0_46880026的博客
12-28 1303
如果存在，则增加 levelCode 值，移除当前图层，加载对应的地图，并根据获取的 ADCODE 显示地图区域。如果 levelCode 等于 2，则直接加载对应的地图，不需要根据 ADCODE 进行筛选显示。通过使用 Cesium.SuperMapImageryProvider，可以方便地在 Cesium 中集成 SuperMap 的影像地图服务，并进行地图显示和交互操作。的值是否为1，如果是，则会移除当前图层，并加载上一层级的地图。减1，并移除当前图层，并加载上一层级的地图。中的最后一个元素移除。
SuperMap iClient3D for Cesium 常用方法
weixin_55749488的博客
05-29 821
【代码】SuperMap iClient3D for Cesium 常用方法。
vue3中使用supermap iclient3d for cesium
2301_77133858的博客
09-03 444
记录从头开始学习supermap icilent3d fro cesium。
SuperMap iClient3D 11i (2022) SP1 for Cesium-CH
08-24
SuperMap iClient3D：SuperMap iClient3D 是由SuperMap公司开发的一套用于构建三维...它基于Cesium开源框架，提供了丰富的功能和API，用于处理地理数据、创建并展示三维地图和场景，并支持丰富的地图操作和交互功能。
基于SuperMap iClient for JavaScript和SuperMap iClient for 3D的二三维一体化浏览
12-14
2. **SuperMap iClient for 3D**：这是SuperMap专门为三维GIS应用设计的组件，能够提供高性能的三维地图显示和分析功能。通过此组件，开发者可以构建出具有真实感、立体感的三维地理环境，进行三维空间分析、地形...
SuperMap_iClient3D_10i(2021)_for_WebGL_25863_supermap_cesium_
10-03
《SuperMap iClient3D 10i(2021) for WebGL 25863：基于SuperMap和Cesium的三维WebGIS开发详解》 SuperMap iClient3D 10i(2021)是SuperMap公司推出的一款强大的三维GIS开发框架，专为WebGL设计，它结合了SuperMap...
SuperMap iClient for 3D 飞行站点定位
12-13
SuperMap iClient for 3D是一款强大的三维GIS开发工具，它为用户提供了一流的三维地图浏览、数据分析和应用开发能力。在众多功能中，“飞行站点定位”是一项尤为实用的技术，它允许用户快速、精准地定位到特定的飞行...
台湾高雄三维倾斜摄影模型3DTiles样例数据介绍
cyber_room的博客
10-07 1053
台湾高雄三维倾斜摄影数据，3DTiles格式，能在Cesium上无缝加载
PCL Harris3D关键点提取
纵马踏花向自由
10-09 358
Harris3D关键点检测是一种经典的角点检测算法，被广泛应用于图像处理和点云处理。该算法通过计算每个点的响应值，提取局部几何结构显著的关键点。相较于其他特征点检测算法，Harris3D具有更好的鲁棒性和准确性，尤其适用于三维点云数据的关键点检测。
【2022工业3D异常检测文献】AST: 基于归一化流的双射性产生不对称学生-教师异常检测方法
qq_1532145264的博客
10-03 1341
Asymmetric Student-Teacher Networks for Industrial Anomaly Detection
基于深度学习的3D人体姿态预测
weixin_42605076的博客
10-06 960
基于深度学习的3D人体姿态预测是指利用深度学习模型，从图像或视频中自动估计人体的三维骨架结构或关节点位置。此任务在增强现实、动作捕捉、人体行为识别、虚拟现实等多个领域中有广泛应用。3D人体姿态预测面临的挑战包括姿态变化多样、遮挡、光照条件复杂以及不同视角下的深度信息恢复等问题。
ECCV`24 | 新加坡国立&华为提出Vista3D: 实现快速且多视角一致的3D生成
最新发布
AIGCer的博客
10-10 734
解决的问题解决单张图像生成3D对象时多视图不一致的问题。平衡3D生成中的一致性与多样性。提出的方案Vista3D框架采用两阶段方法：粗略阶段通过高斯投影生成初始几何，精细阶段优化符号距离函数（SDF）。使用角度组合方法进行扩散先验，通过约束梯度幅度实现多样性。应用的技术高斯投影和可微等值面方法。解耦纹理技术。使用两个独立隐函数捕捉物体的可见和隐藏方面。达到的效果在短短5分钟内实现快速且一致的3D生成。提升生成质量，维持3D物体一致性和多样性之间的平衡。
supermap iclient3d for cesium 和cesium 的差别
12-21
根据提供的引用内容，supermap iclient3d for cesium 是一个用于Cesium的插件，它提供了一些额外的功能和工具，以增强Cesium的能力。以下是supermap iclient3d for cesium 和Cesium的一些差别： 1. 缓存设置：supermap iclient3d for cesium 在初始化Cesium时需要将椭球改为椭球，以避免3.0缓存中的坐标偏移问题。 2. 地形开挖：supermap iclient3d for cesium 提供了地形开挖功能，可以通过指定障碍点进行地形开挖。 总的来说，supermap iclient3d for cesium 是一个为Cesium提供额外功能和工具的插件，可以增强Cesium的功能和表现力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SteveJi666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值