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

最新推荐文章于 2024-04-09 14:51:26 发布

supermapsupport

最新推荐文章于 2024-04-09 14:51:26 发布

阅读量4k

点赞数 5

分类专栏：三维GIS 文章标签： webgl

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/105097157

版权

三维GIS 专栏收录该内容

417 篇文章 223 订阅

订阅专栏

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

前言

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

一、数据准备

1.新建二维面数据集

在iDesktop桌面软件中新建二维面数据集用于存储数据，数据集坐标系选择wgs 1984地理坐标系
在这里插入图片描述

2.添加字段用于存储属性信息

对建好的二维面数据集右键-属性，在属性表栏中添加字段
在这里插入图片描述

3.将处理好的倾斜摄影数据添加到场景中，保存场景，保存工作空间

4.将工作空间发布为数据服务与三维服务，数据服务勾选可编辑

二、在 SuperMap iClient3D for WebGL 上加打开场景

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

1.添加单体化面

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

                var array_1 = [];
                array_1.push(document.getElementById('numb').value);
                array_1.push(document.getElementById('name').value);
                array_1.push(document.getElementById('des').value);
                add_Region(array_1);
                //添加
                function add_Region(array_1) {
                    var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 1);
                    handlerPolygon.drawEvt.addEventListener(function (result) {
                        handlerPolygon.polyline.show = false;
                        result.object._show = false;
                        var geometry = CesiumToSuperMap.convertPolygon(Cesium, SuperMap, result.object);
                        var feature = new SuperMap.Feature.Vector();
                        feature.geometry = geometry;
                        geometry.id = "100000";
                        var editFeatureParameter, editFeatureService;
                        var features = {
                            fieldNames: ['name', 'des', 'numb'],
                            fieldValues: array_1,
                            geometry: geometry
                        };
                        editFeatureParameter = new SuperMap.REST.EditFeaturesParameters({
                            features: [features],
                            editType: SuperMap.REST.EditType.ADD,
                            returnContent: false
                        });
                        editFeatureService = new SuperMap.REST.EditFeaturesService('http://localhost:8090/iserver/services/data-test_qx/rest/data/datasources/test_qx/datasets/Region', {
                            eventListeners: {
                                "processCompleted": addFeaturesProcessCompleted,
                                "processFailed": processFailed
                            }
                        });
                        editFeatureService.processAsync(editFeatureParameter);
                        function addFeaturesProcessCompleted(editFeaturesEventArgs) {
                            var addResultIds = editFeaturesEventArgs.result.IDs,
                                resourceInfo = editFeaturesEventArgs.result.resourceInfo;
                            if (addResultIds === null && resourceInfo === null) return;
                        }
                        function processFailed(e) {
                            widget.alert.showAlert(e.error.errorMsg, false);
                        }
                    });
                    handlerPolygon.activate();
                }

存入成功后，在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;
                        }
                    }
                }

3.修改属性信息

修改属性信息必须指定修改对象的smid

                var id_2 = document.getElementById('id_u').value;
                var num_2 = document.getElementById('numb_u').value;
                var name_2 = document.getElementById('name_u').value;
                var des_2 = document.getElementById('des_u').value;
                change_Region(id_2,num_2,name_2,des_2);
                //修改
                function change_Region(id,numb,name,des) {
                    var query = [{
                        "ID": id,
                        "fieldNames": [
                            "NAME",
                            "DES",
                            "NUMB"
                        ],
                        "fieldValues": [
                            name,
                            des,
                            numb,
                        ]
                    }];
                    var queryObjJSON = JSON.stringify(query);
                    $.ajax({
                        type: 'POST',
                        url: "http://localhost:8090/iserver/services/data-test_qx/rest/data/datasources/test_qx/datasets/Region/features.json?_method=PUT",
                        data: queryObjJSON,
                        success: function (data) {
                            alert("修改成功！")
                        }
                    });
                }

4.删除

通过要素smid进行删除

                var id_d = $('#numb_d').val();
                delete_Region(id_d)
                //删除
                function delete_Region(id) {
                    var query = [id];
                    var queryObjJSON = JSON.stringify(query);
                    
                    $.ajax({
                        type: 'POST',
                        url: "http://localhost:8090/iserver/services/data-test_qx/rest/data/datasources/test_qx/datasets/Region/features.json?_method=DELETE",
                        data: queryObjJSON,
                        success: function (data) {
                            alert("删除成功！")
                        }
                    });
                }

以下为效果展示

在这里插入图片描述

supermapsupport

关注

5
点赞
踩
25

收藏

觉得还不错? 一键收藏
7
评论
SuperMap倾斜摄影数据前端自定义单体化

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

扫一扫