SuperMap iClient3D 11i (2023) SP1 for Cesium之倾斜摄影单体化对象全显

作者：nannan

目录

前言

一、实现思路

1.1 查询全部面对象

1.2 添加实体面对象

1.3 选中实体并显示属性

1.4 设置鼠标移动事件

二、运行效果

---

前言

       在支持工作中，小编遇到有客户想要对倾斜摄影做单体化，并使它全部显示渲染出来的问题。需求：

       （1）采用两种颜色间隔表示楼层，使之单体化效果更直观；

       （2）有贴对象的效果，更逼真。不想要矢量面拉伸成方块那种效果，比较假；

       （3）鼠标实时监听单体化面，可追踪当前鼠标在哪个单体化面区域；

       （4）有选中效果，并可以弹出属性框。

根据以上需求，小编在官网范例分层分户查询的基础上，进行二次开发，下面和小编一起来实战吧。

一、实现思路

1.1 查询全部面对象

       主要用到SQL语句（SMID>0），查询数据服务分层分户面中的所有面对象。

doSqlQuery('SMID>0');

       执行SQL查询语句，因本次实现的功能需要两种查询语句，一种是查询全部面对象，另一种是根据鼠标选择获取当前分层分户面对象，所以需在doSqlQuery(SQL)函数中根据SQL语句来判断执行后续事件。

function doSqlQuery(SQL) {
					var getFeatureParam, getFeatureBySQLService, getFeatureBySQLParams;
					getFeatureParam = new SuperMap.REST.FilterParameter({
						attributeFilter: SQL
					});
					getFeatureBySQLParams = new SuperMap.REST.GetFeaturesBySQLParameters({
						queryParameter: getFeatureParam,
						toIndex: -1,
						datasetNames: ["mian:" + "mian"] // 本例中“户型面”为数据源名称，“专题户型面2D”为楼层面相应的数据集名称
					});
					var url = URL_CONFIG.SCP_FCFH_DATA; // 数据服务地址
					if(SQL == 'SMID>0') {
						getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url, {
							eventListeners: {
								"processCompleted": onQueryComplete1, // 查询成功时的回调函数
								"processFailed": processFailed // 查询失败时的回调函数
							}
						});
					} else {
						getFeatureBySQLService = new SuperMap.REST.GetFeaturesBySQLService(url, {
							eventListeners: {
								"processCompleted": onQueryComplete, // 查询成功时的回调函数
								"processFailed": processFailed // 查询失败时的回调函数
							}
						});
					}
					getFeatureBySQLService.processAsync(getFeatureBySQLParams);
				}

   

1.2 添加实体面对象

       当SQL = 'SMID>0'时，执行onQueryComplete1的回调函数，获取底部高程bottomHeight和拉伸高度extrudeHeight，构建polygon实体面，并使用groundBottomAltitude和groundExtrudedHeight分别设置贴对象面的底部高程和拉伸高程。

       客户需求是采用两种颜色间隔表示楼层，使之单体化效果更直观。小编这里根据获取的底部高程值进行过滤，当底部高程为33和39时，面颜色为黄色，其它情况时显示绿色。

function onQueryComplete1(queryEventArgs) {
					// 首先移除之前添加标识实体

					let features = queryEventArgs.originResult.features;
					for(var i = 0; i < features.length; i++) {

						var bottomHeight = Number(features[i].fieldValues[features[i].fieldNames.indexOf('BOTTOM')]); // 底部高程
						var extrudeHeight = Number(features[i].fieldValues[features[i].fieldNames.indexOf('LSG')]); // 层高（拉伸高度）
						var points3D = []; // [经度, 纬度, 经度, 纬度, ...]的形式，存放楼层面上的点坐标
						for(var pt of features[i].geometry.points) {
							points3D.push(pt.x, pt.y);
						}
						console.log(bottomHeight);
						if(bottomHeight == 33 || bottomHeight == 39) {
							viewer.entities.add({
								polygon: {
									hierarchy: Cesium.Cartesian3.fromDegreesArray(points3D),
									material: Cesium.Color.YELLOW.withAlpha(0.4),
									classificationType: Cesium.ClassificationType.S3M_TILE, // 贴在S3M模型表面
									groundBottomAltitude: bottomHeight,
									groundExtrudedHeight: extrudeHeight
								},
							});
						}else{//bottomHeight == 42 || bottomHeight == 36||bottomHeight == 28
							viewer.entities.add({
								polygon: {
									hierarchy: Cesium.Cartesian3.fromDegreesArray(points3D),
									material: Cesium.Color.GREEN.withAlpha(0.4),
									classificationType: Cesium.ClassificationType.S3M_TILE, // 贴在S3M模型表面
									groundBottomAltitude: bottomHeight,
									groundExtrudedHeight: extrudeHeight
								},
							});
						}

					}

				}

​

1.3 选中实体并显示属性

       这部分内容官网倾斜分层分户范例里已有，这里不做赘述。小编这里只是将面的选中风格修改为了蓝色。

material:Cesium.Color.BLUE.withAlpha(0.8),

​

1.4 设置鼠标移动事件

        鼠标移动事件前需要提前创建一个临时存储选中对象高亮风格的参数；

let highlighted = {
	feature: undefined,
	originalColor: '',
	id: ''
};

鼠标在场景中移动需考虑以下4种情况：

（1）没有移动到实体面的范围内时，鼠标会获取不到pickedFeature，则跳出不执行后面的代码。

//没有定义，则跳出不执行后面的代码
if(!Cesium.defined(pickedFeature)) {
		return;
	}

（2）移动到实体面的范围内时，将pickedFeature颜色设置为红色。但是会发现选择另一个实体面时，前一个实体面的颜色不恢复原状，这里我们需要判断pickedFeature的底部高程值，如果是33和39，则highlighted.feature 的颜色设置为黄色，反之则设置为绿色。这样就可以移动后实体面恢复为原始色的效果。

let value = pickedFeature.id.polygon._groundBottomAltitude._value;
if(value == 33 || value == 39) {
		highlighted.feature ?.polygon.material.color.setValue(Cesium.Color.YELLOW.withAlpha(0.4));
} else {
	highlighted.feature ?.polygon.material.color.setValue(Cesium.Color.GREEN.withAlpha(0.4));
}
highlighted.id = pickedFeature.id.id;
highlighted.feature = pickedFeature.id;
pickedFeature.id.polygon.material.color.setValue(Cesium.Color.RED.withAlpha(0.5));

（3）先移动到实体面范围后再移出时，其实体着色恢复为初始状态。

如果highlighted.feature被定义了，也就是之前有触发到实体上，其实体着色恢复为初始状态
if(Cesium.defined(highlighted.feature)) {
if(highlighted.feature.polygon._groundBottomAltitude._value == 33 || highlighted.feature.polygon._groundBottomAltitude._value == 39) {
highlighted.feature.polygon.material.color.setValue(Cesium.Color.YELLOW.withAlpha(0.4))
	} else {
highlighted.feature.polygon.material.color.setValue(Cesium.Color.GREEN.withAlpha(0.4))
	}
highlighted.feature = undefined;
}

(4)当鼠标在选中对象上停留后移除时，选中对象的风格仍保持为蓝色

//当鼠标选中实体后实体的颜色保持为选中状态即蓝色
if(lastHouseEntity) {
	lastHouseEntity.polygon.material=Cesium.Color.BLUE.withAlpha(0.8);
}

​

全部代码请见https://download.csdn.net/download/nan620403/88625875

二、运行效果

倾斜摄影单体化全显