在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);
}
});