WebGL之模型阴影体分析

前言

最近有客户问到,WebGL能不能实现iDesktop那样的阴影体分析,WebGL是自带阴影效果的,可以开启阴影来实现, 但是效果不是特别理想,而且也没有相应的分析,和GIS需求相差甚远。
索性小编看了下iserver上的接口,是有阴影分析的,不仅能将阴影体展示出来,给它设置相应颜色风格等,而且能够得到阴影体的体积,表面积,于是便结合iserver完成了"阴影体分析"。
先看下效果:

一 数据准备流程及发布

1.需要用到模型数据集,这里小编是随便拉伸了3个模型数据集。
2.将模型数据集生成s3m缓存,加入到场景里面,保存工作空间。

3.把工作空间进行发布,发布三维服务以及空间分析服务

二 核心代码

//S3M实例化模型集合类
 var s3minstance = new Cesium.S3MInstanceCollection(scene._context);
 scene.primitives.add(s3minstance); 
//请求空间分析服务
//请求服务地址
var url ='http://localhost:8090/iserver/services/spatialAnalysis-test/restjsr/spatialanalyst/datasets/yinying%40yinying/shadowvolume.rjson?returnContent=true';
//构造请求参数
var param = {
		   "sourceDatasetFilter":{ "ids":[1]}, //id数组对应参与分析的对象smid集合 				
		   "shadowSetting":{"shadowLightType":"SUNLIGHT", 
		   "year":2020, "month":6, "day":7, "hour":0, "minute":0, "second":0}	
		   //分析的时间,不同于Webgl中的英国时间,这里是北京时间														
			}
var queryObjJSON = JSON.stringify(param);
$.ajax({
				type: "post",
				url: url,
				timeout : 3000,
				data: queryObjJSON,	
				success: function(result) {						
					var resultObj = JSON.parse(result);					
					var geometry = resultObj.geometries[0];						
					var buffer = new Uint8Array(geometry.model).buffer; 
					var position = geometry.position;	
					//添加阴影体模型		
					 s3minstance.add('yinying', {
						position: Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z),
						color: Cesium.Color.BLACK.withAlpha(0.5)
					}, buffer);						
					}
					//添加标签,用于显示时间
				    var	entity=viewer.entities.add({
						position:Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z+3000),
						label:{
							text:"北京时间:0点0分0秒",
							scale:2,
							fillColor:Cesium.Color.YELLOW
							}						
					});
				},
				error: function(msg) {
					console.log(msg);
				}
			})
 

以上便是实时展现阴影体的效果,当然光是展示还是不够的,我们还获取阴影体的体积,表面积等。代码如下

$.ajax({
            var para={
				"geometries":resultObj.geometries, //此处为上面post请求返回的geometries集合对象
				"lonlat":true
			};
			var queryObjJS = JSON.stringify(para);
				type: "post",
				url:'http://localhost:8090/iserver/services/spatialAnalysis-test/restjsr/spatialanalyst/geometry/3d/info.rjson',
				data:queryObjJS,
				success: function(result) {	
					    var resultyy = JSON.parse(result);					
						$.ajax({
							type: "get",
							url:resultyy.newResourceLocation+'.rjson',
							success:function(result) {	
								 var resulttj=	JSON.parse(result);
							     var entity=viewer.entities.add({
								 	position:Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z+3000),
								 	label:{
								 		text:"体积="+resulttj.infos[0].volume+" "+"表面积="+resulttj.infos[0].surfaceArea,
								 		scale:2,
								 		fillColor:Cesium.Color.YELLOW
								 		}						
								 });
								},
								error: function(msg) {
									console.log(msg);
								}
							});																		   
					},
					error: function(msg) {
						console.log(msg);
					}
				});

总结

以上便是实现单个模型(smid为1)的阴影体分析的思路。
通过以上思路你可以完成一些相应的功能，文章开始的那个功能便是小编结合js定时器实现的实时显示阴影体变化的功能,当然,你也可以进一步把体积等计算结果进行展示,根据你的系统进行修改吧。