SuperMap iClient3D for WebGL之查询模型属性

在GIS中，数据可分为空间数据和属性数据；空间数据描述地物所在位置，属性数据是描述空间数据特征的定性或定量指标；所以属性数据也是GIS中不可或缺的数据。在三维场景中，模型数据在展示模型本身的同时，也会有展示其属性数据或使用属性数据做分析的需求，本文将描述在不同的情况下，SuperMap iClient3D for WebGL（以下简称WebGL)如何查询模型属性。

一、通过数据服务查询

数据准备：

①使用模型缓存/工作空间发布三维服务

②使用模型数据集的属性表另存为属性表数据集，发布数据服务

1、普通图层查询

普通图层：非多图层合并生成缓存

1.1 通过WebGL属性查询接口查询

查询步骤：

①置S3M图层属性查询参数：S3MTilesLayer.setQueryParameter(options)（S3MTilesLayer - Cesium Documentation

  layer.setQueryParameter({
                    url:"http://www.supermapol.com/realspace/services/data-BIMbuilding/rest/data",
                    dataSourceName : "BIMBuilding",
                    isMerge : true
                });

②通过viewer.pickEvent设置点击属性查询事件（Viewer - Cesium Documentation

  viewer.pickEvent.addEventListener(function(feature){
             $("#bubble").show();
			 console.log(feature)
             for (i = table.rows.length-1;i > -1;i--){
                table.deleteRow(i);
            }
            for(var key in feature ){
                var newRow = table.insertRow();
                var cell1 = newRow.insertCell();
                var cell2 = newRow.insertCell();
                cell1.innerHTML = key;
                cell2.innerHTML = feature[key];
            } 
        });

1.2、通过iserver数据服务查询接口进行查询(SuperMap iServer REST API

查询步骤（以id查询为例）：

①获取需要查询属性的对象ID

②使用步骤①获取到的id数组构建查询参数进行查询

  var queryObj = {
                "getFeatureMode": "ID",
                // "spatialQueryMode": "CONTAIN",
                "datasetNames": ["NewDatasource:NewDataset"],
                "ids":[id]
            };

  var queryData = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数

③向iserver发送查询请求

$.ajax({
                type: "post",
                url: dataUrl,
                data: queryData,
                success: function (result) {
                    var resultObj = JSON.parse(result);
                    // console.log(resultObj);
                    if (resultObj.featureCount > 0) {
                        processCompleted(resultObj.features);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                },
                // complete: function () {
                //     console.log("complete");
                // }
            })

 2、多图层合并生成缓存

查询步骤：

①获取图层数据集名称以及对应的Id范围(S3MTilesLayer - Cesium Documentation

var layer = scene.layers.find('BeijingDEM');
var data =  layer.datasetInfo();
Cesium.when(data,function(dataSet){
		var length = dataSet.length;
		console.log(dataSet);
				     
			});

查询结果如图：

②通过步骤①查询结果， 通过id设置查询参数进行查询（同1.2方式）

var queryObj = {
                "getFeatureMode": "ID",
                // "spatialQueryMode": "CONTAIN",
                "datasetNames": ["NewDatasource:NewDataset"],
                "ids":[id]
            };

  var queryData = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数

$.ajax({
                type: "post",
                url: dataUrl,
                data: queryData,
                success: function (result) {
                    var resultObj = JSON.parse(result);
                    // console.log(resultObj);
                    if (resultObj.featureCount > 0) {
                        processCompleted(resultObj.features);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                },
                // complete: function () {
                //     console.log("complete");
                // }
            })

二、通过模型缓存属性查询

生成缓存后，在idesktop中打开缓存，点击缓存对象，点击属性，可看到缓存中的属性信息

可见，在缓存数据中，已经保存了属性数据；所以在WebGL中，也可以使用相同的方式对数据的缓存属性进行查询；

查询步骤：

①设置图层保存属性S3MTilesLayer.indexedDBSetting .isAttributesSave =true

②使用对应的ID对图层进行查询

layer.getAttributesById(ids[i]).then(function(data) {
										console.log(data);
									});

 完整代码可参考：

var promise = scene.open("http://localhost:8090/iserver/services/3D-DaoDongShuJu/rest/realspace")
					Cesium.when.all(promise, function(layer) {
								layer = scene.layers.find('NewDataset@岛洞数据');
								// console.log(layer)
								layer.indexedDBSetting.isAttributesSave = true;
								// var a = layer.getAttributesById(17);
								// console.log(a);
							var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); //设置鼠标左键单击回调事件
							handler.setInputAction(function(e) {
								console.log("handler")
									var ids = layer.getSelection();
									console.log(ids);
									for (var i = 0; i < ids.length; i++) {
									layer.getAttributesById(ids[i]).then(function(data) {
										console.log(data);
									});
								}
							}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
						},
						function(e) {
							if (widget._showRenderLoopErrors) {
								var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
								widget.showErrorPanel(title, undefined, e);
							}
						});