SuperMap iClient3D for WebGL 调用GPA服务实现地质体模型裁剪封边

最新推荐文章于 2025-12-20 22:49:02 发布

原创最新推荐文章于 2025-12-20 22:49:02 发布 · 1.1k 阅读

9 ·

CC 4.0 BY-SA版权

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

文章标签：

#3d #webgl

kele

前言

当展示大数据量地质体数据并进行裁剪封边业务时，常遇性能及显示效果问题。如何高效加载海量地质体数据并实现各类分析业务？一起来看看吧！

在这里插入图片描述

一、实现思路

1.1、加载地质体数据的两种方式：

① 数据服务方式（仅小数据量情况下建议使用，支持数据裁剪封边）
② 三维瓦片服务方式（大数据量情况下建议使用，支持裁剪，不支持封边）

1.2、加载大数据量地质体模型并要实现裁剪封边，需结合SuperMap iServer GPA工具实现

① 三维瓦片服务方式加载数据
② 调用iServer GPA模型裁剪地质体，实现封边

二、操作步骤

2.1、新建三维面数据集，将地质体数据集、三维面数据集存入数据库型数据源中

操作目的：封边模型需要通过数据服务进行展示，需占用数据源，GPA模型也需要占用数据源，使用数据库型数据源避免数据源被独占
在这里插入图片描述

2.2、将地质体模型生成三维瓦片，并保存到工作空间中。将工作空间发布为数据服务、三维服务。数据服务开启可编辑状态

在这里插入图片描述

2.3、使用 iClient3D for WebGL 加载三维服务，使用鼠标绘制方法，将自定义绘制结果存入数据服务中

鼠标绘制自定义裁剪面：

var tooltip = createTooltip(document.body);
var handlerPolygon = new SuperMap3D.DrawHandler(viewer, SuperMap3D.DrawMode.Polygon, 0);
handlerPolygon.activeEvt.addEventListener(function(isActive){
    if(isActive == true){
        viewer.enableCursorStyle = false;
        viewer._element.style.cursor = '';
        $('body').removeClass('drawCur').addClass('drawCur');
    }else{
        viewer.enableCursorStyle = true;
        $('body').removeClass('drawCur');
    }
});
handlerPolygon.movingEvt.addEventListener(function(windowPosition){
    if(handlerPolygon.isDrawing){
        tooltip.showAt(windowPosition,'<p>点击确定多边形顶点</p><p>右键单击结束绘制</p>');
    } else{
        tooltip.showAt(windowPosition,'<p>点击绘制第一个点</p>');
    }
});
handlerPolygon.drawEvt.addEventListener(function(result){
    tooltip.setVisible(false);
    handlerPolygon.polygon.show = false;
    handlerPolygon.polyline.show = false;
    positions = [];
    for(var pt of result.object.positions){
        var cartographic = SuperMap3D.Cartographic.fromCartesian(pt);
        var longitude = SuperMap3D.Math.toDegrees(cartographic.longitude);
        var latitude = SuperMap3D.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height;
        positions.push(longitude, latitude, height);
    }
    regions = [];
    regions.push(positions);
    for(var layer of layers){
        layer.setModifyRegions(regions, clipMode);
    }
    //鼠标绘制事件结束后执行
    addRegion(regions[0]);  //将绘制面添加到数据服务中
    //fengbian()              //调用iServer GPA服务，实现地质体裁剪封边
});

将自定义裁剪面添加到三维面数据服务中：

function addRegion(regions) {
    var delUrl = "http://localhost:8091/iserver/services/data-dztcj/rest/data/datasources/DataSource_Clip/datasets/NewRegion3D/features.rjson?_method=DELETE&deleteMode=IDS";
    var ids = [];
    for(let i=0;i<100;i++){
    	ids.push(i)
    };
    var delids = JSON.stringify(ids);
    //执行post请求，删除三维面数据集中的所有要素
    $.ajax({
        type: "post",
        url: delUrl,
        data: delids,
        success: function (result) {
            console.log(result);
        },
        error: function (msg) {
            console.log(msg);
        },
    });
    //执行post请求，向三维面数据集中添加绘制范围结果
    var length = regions.length/3;
    var points = [];
    for(let i=0;i<regions.length/3;i++){
        let str = {
            "x": regions[i*3],
            "y": regions[i*3+1],
            "z": regions[i*3+2]
        };
        points.push(str)
    }
    var regionParme = [
        {
            "fieldNames": ["SMID"],
            "fieldValues": ["1"],
            "geometry": {
                "id": 1,
                "parts": [length],
                "points": points,
                "style": null,
                "type": "REGION3D"
            }
        }
    ];
    var url = "http://localhost:8091/iserver/services/data-dztcj/rest/data/datasources/DataSource_Clip/datasets/NewRegion3D/features.rjson?isUseBatch=true"
    var queryData = JSON.stringify(regionParme);
    $.ajax({
        type: "post",
        url: url,
        data: queryData,
        success: function (result) {
            console.log(result);
        },
        error: function (msg) {
            console.log(msg);
        }
    })
}

2.4、点击进入 SuperMap iServer 处理自动化服务，找到工具列表-模型工具-模型裁剪-地质体裁剪工具

在这里插入图片描述
复制工具id：

申请token令牌：
在这里插入图片描述

在这里插入图片描述

2.5、调用GPA工具，实现地质体裁剪封边

使用上一步记录的模型id、token，构造请求参数

let clipMonelName;
//调用iServer GPA服务，实现地质体裁剪封边
function fengbian() {
    //给裁剪结果数据集创建一个不会重复的数据集名称
    var now = new Date();
    clipMonelName = "clipModel" + now.getHours().toString().padStart(2, '0') + now.getMinutes().toString().padStart(2, '0') + now.getSeconds().toString().padStart(2, '0');
    //GPA服务模型ID
    let modelID = "sps.WorkflowProcessFactory.models.模型裁剪:地质体裁剪";
    //iServer token，GPA服务必须要使用token
    let token = "8Yb_n11d1rVPVntqd7evtZNEFQe-uckmkOicpSoLejeL-qaZZ3aia2gcklrJ4oRHa5qUe2d07dPLA9l2bwoLK4Lxsdf_Fi0A";
    //请求参数，可在iserver对应工具中查看
    let Paramt = {
        "parameter":{
            "modelclip-sourceDataset":"--server=172.16.14.191 --password=123456 --database=DataSource_Clip --dbType=POSTGRESQL --alias=DataSource_Clip --maxConnPoolNum=50 --dataset=ZMQ_DZ --user=postgres --providerType=sdx",
            "modelclip-clipDataset":"--server=172.16.14.191 --password=123456 --database=DataSource_Clip --dbType=POSTGRESQL --alias=DataSource_Clip --maxConnPoolNum=50 --dataset=NewRegion3D --user=postgres --providerType=sdx",
            "modelclip-resultDatasource":"--server=172.16.14.191 --password=123456 --database=DataSource_Clip --dbType=POSTGRESQL --alias=DataSource_Clip --maxConnPoolNum=50 --user=postgres --providerType=sdx",
            "modelclip-resultDatasetName": clipMonelName
        }
    };
    var url = "http://localhost:8091/iserver/services/geoprocessing/restjsr/gp/v2/" + modelID + "/jobs?token=" + token;
    var queryData = JSON.stringify(Paramt);
    //执行请求
    $.ajax({
        type: "post",
        url: url,
        data: queryData,
        success: function (result) {
            var resultObj = JSON.parse(result);
            //发送get请求，从返回结果中判断GPA服务是否执行完成
        }
    })
}

发送请求后，再次发送get请求，从返回结果中判断GPA服务是否执行完成

$.ajax({
    type: "get",
    url: "http://localhost:8091/iserver/services/geoprocessing/restjsr/gp/v2/jobs/" + resultObj.jobID + ".json?token=" + token,
    success: function (result) {
        //当返回状态为 true 时表示裁剪完成
    }
})

当GPA工具任务执行状态返回为true时，任务执行完成，通过数据服务将封边模型添加到场景中

//当返回状态为 true 时表示裁剪完成
if(result.state.success = "true"){
    clearInterval(interV);
    setTimeout(()=>{   //发送get请求，获取裁剪结果中封边模型的数量
        $.ajax({
            type: "get",
            url: "http://localhost:8091/iserver/services/data-dztcj/rest/data/datasources/DataSource_Clip/datasets/" + clipMonelName +"/features.rjson",
            success: function (result) {
                var resultObj = JSON.parse(result);
                //使用数据服务方式添加封边模型
                var solidModelsProfile = new SuperMap3D.SolidModelsProfile(scene);
                var models = [];
                for(let i=1;i<=resultObj.featureCount;i++){
                    // 也可以不设置纹理，设置颜色
                    models.push({
                        id: i,
                        model: "http://localhost:8091/iserver/services/data-dztcj/rest/data/datasources/DataSource_Clip/datasets/"+ clipMonelName +"/features/" + i +".stream",
                        color: new SuperMap3D.Color(179 / 255, 179 / 255, 179 / 255, 1)
                    });
                }
                solidModelsProfile.addModels(models);
                solidModelsProfile.addedEvent.addEventListener((param) => {
                    console.log(param);
                });
            }
        })
    },1000)
}