SuperMap倾斜摄影数据前端自定义单体化

对于倾斜摄影数据单体化的解决方案，目前提供了在iDesktop桌面软件中先制作好单体化矢量面，然后在webgl中进行点击查询，获取到对应的数据并高亮显示。该方案的前提是需要提前制作好矢量面数据，今天小编为大家介绍一种通过前端绘制单体化面的方式，该方法的主要思路是前端绘制单体化面并录入信息，然后将数据存入数据集中，单体化时再查询得到结果并展示

一、数据准备

1.

在iDesktop桌面软件中新建二维面数据集用于存储数据，数据集坐标系选择wgs 1984地理坐标系

2.

对建好的二维面数据集右键-属性，在属性表栏中添加字段

3.

4.

二、在 SuperMap iClient3D for WebGL

目前打开场景点击倾斜摄影没有是没有任何反应的，接下来我们通过对数据的增删改查来实现倾斜摄影前端自定义单体化

1.

通过鼠标绘制，并录入属性信息，将绘制的面存入数据服务中的二维面数据集中

存入成功后，在iserver页面即可看到存入的对象，系统会为每个对象自动生成smid，下面修改、删除要素时，需要指定要素的smid，修改、删除后，iserver页面要素列表也会对应改变

2.

查询矢量化结果与之前查询方式相同，通过鼠标拾取位置，查询数据集中拾取位置的矢量面，拿到结果前端展示

                //查询
                function search_Region() {
                    var lon,lat,hei;
                    var bubble = new Bubble(scene, 'bubble');
                    var table = document.getElementById("tab");
                    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                    handler.setInputAction(function (e) {
                        // 首先移除之前添加标识实体
                        viewer.entities.removeAll();
                        //removeById('identify-area');
                        // 获取点击位置笛卡尔坐标
                        var position = scene.pickPosition(e.position);
                        // 从笛卡尔坐标获取经纬度
                        var cartographic = Cesium.Cartographic.fromCartesian(position);
                        lon = Cesium.Math.toDegrees(cartographic.longitude);
                        lat = Cesium.Math.toDegrees(cartographic.latitude);
                        hei = cartographic.height;
                        var queryPoint = { // 查询点对象
                            x: lon,
                            y: lat
                        };
                        queryByPoint(queryPoint);
                    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                    function queryByPoint(queryPoint) {
                        var queryObj = {
                            "getFeatureMode": "SPATIAL",
                            "spatialQueryMode": "INTERSECT",
                            "datasetNames": ['test_qx' + ":" + 'Region'],
                            "geometry": {
                                id: 0,
                                parts: [1],
                                points: [queryPoint],
                                type: "POINT"
                            }
                        };
                        let queryObjJSON = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参
                        $.ajax({
                            type: "post",
                            url: 'http://localhost:8090/iserver/services/data-test_qx/rest/data/featureResults.rjson?returnContent=true',
                            data: queryObjJSON,
                            success: function (result) {
                                var resultObj = JSON.parse(result);
                                if (resultObj.featureCount > 0) {

                                    for (let i = table.rows.length - 1; i > -1; i--) {
                                        table.deleteRow(i);
                                    }
                                    for (var index in resultObj.features[0].fieldNames) {
                                        var newRow = table.insertRow();
                                        var cell1 = newRow.insertCell();
                                        var cell2 = newRow.insertCell();
                                        cell1.style.backgroundColor = "black";
                                        cell2.style.backgroundColor = "rgba(84,84,84)";
                                        cell1.style.border = "0px";
                                        cell2.style.border = "0px";
                                        cell1.style.color = "white";
                                        cell2.style.color = "white";
                                        cell1.innerHTML = resultObj.features[0].fieldNames[index];
                                        cell2.innerHTML = resultObj.features[0].fieldValues[index];
                                    }
                                    var bubbleposition = new Cesium.Cartesian3.fromDegrees(lon, lat, hei);
                                    bubble.showAt(bubbleposition);

                                    addClapFeature(resultObj.features[0]);
                                } else {
                                    bubble.visibility(false);
                                }
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                        // 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。
                        function addClapFeature(feature) {
                            var lonLatArr = getLonLatArray(feature.geometry.points);
                            viewer.entities.add({
                                name: '单体化标识面',
                                polygon: {
                                    hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
                                    material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
                                },
                                clampToS3M: true // 贴在S3M模型表面
                            });
                        }
                        // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
                        function getLonLatArray(points) {
                            var point3D = [];
                            points.forEach(function (point) {
                                point3D.push(point.x);
                                point3D.push(point.y);
                            });
                            return point3D;
                        }
                    }
                }