SuperMap iClient3D for WebGL实现三维管线分析

本片文章主要讲解如何在webgl中如何实现三维管线分析功能，idesktop如何处理数据可以参考下面两篇文章。
https://blog.csdn.net/supermapsupport/article/details/71151933
https://blog.csdn.net/supermapsupport/article/details/80390189.
webgl是三维产品，如果是二维方面实现管线分析功能参考下面链接。
https://blog.csdn.net/supermapsupport/article/details/50698860.

在webg中实现三维管线分析功能主要分为两步，第一步对iserver发送请求，返回分析结果，第二步用结果对webgl种的模型进行可视化展示。下面将做具体的步骤讲解。

发布服务

首先将处理好三维网格数据和三维缓存(.s3m格式)数据发为三维服务和三维网络分析服务。一个或者多个工作空间均可，截图是放在一个工作空间里面，所以一次勾选了两个。
发布成功后，可以点进三维服务预览是否正常显示模型，点进三维网络分析服务，填写参数查看是否正常进行分析返回结果。

加载数据

此步骤只是加载刚刚发布的三维服务，能正常浏览即可。

 var promise =scene.open(URL);

进行分析

分析功能主要是对iserver刚刚发布的管线分析服务发送请求，具体请求参数可以参考iserver帮助文档，这里不在赘述，下面以下游分析为示例。
这里我实现的是点击选择管线位置，然后以点击位置为起点进行下游分析。所以第一步是获取点击的位置。然后通过请求发给iserver进行分析。

//绘制控件用于获取点击管线var handlerPointbrust = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);//获取管线管点图层pipeedge=scene.layers.find('ResultNetWork@guanxian');pipenode=scene.layers.find('ResultNetWork_Node@guanxian');//绘制完成事件监听handlerPointbrust.drawEvt.addEventListener(function (result) {//清除绘制的点handlerPointbrust.clear();//获取点击的管线idpipesec = pipeedge.getSelection();if(value!="up"&&pipesec.length!=0){//创建请求体var queryObj = {edgeID: pipesec * 1,isUncertainDirectionValid: true,weightName: "SmLength",};// 发送请求$.ajax({type: 'GET',url: url,data: queryObj,success: function (data) {//得到结果console.log(data)}           }});

当data正常打印出结果的时候就是请求成功。如果报错400就是请求参数有问题，建议在iserver帮助文档里面搜索 tracedown参考每个参数的具体含义。

返回结果

Edges为上游管线id。
Nodes为上游节点id。

可视化效果展示

上文已经实现了分析功能，但是返回的都是参数，三维场景中并没有展示出来，如果用列表展示，效果不好，因此要和模型联动起来，主要实现思路是，通过id更改管线颜色，从而展示结果。

if(data.edges.length>0){//无关管线设置为蓝色和0.3透明度pipeedge.setObjsColor(a,Cesium.Color.ALICEBLUE.withAlpha(0.3))     //上游管线显示为红色pipeedge.setObjsColor(data.edges,Cesium.Color.RED.withAlpha(1));}if(data.edges.length>0){//上游节点显示为红色pipenode.setObjsColor(data.nodes, Cesium.Color.RED.withAlpha(1));
}

红色箭头为点击位置。
黄色为结果。

全部代码

<div id="cesiumContainer"></div><div id="toolbar" style="position: absolute;left: 5px;top: 5px;display: none;"><select id="Options" class="selectpicker show-tick form-control"><option selected value="down">下游分析</option><option value="up">上游分析</option></select><button id="excavation" >开始分析</button><button id="clear" >清除结果</button>
</div>

 function onload(Cesium) {$('#toolbar').show();var value ,pipeedge,pipenode,pipesec;var a=[];for(var i=0;i<1887;i++){a[i]=i;}//初始化viewer部件var viewer = new Cesium.Viewer('cesiumContainer');var scene = viewer.scene;var canvas = scene.canvas;var widget = viewer.cesiumWidget;var handlerPointbrust = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);var promise =scene.open("http://localhost:8090/iserver/services/3D-GuanDao_Line3D/rest/realspace");Cesium.when(promise,function(layers){pipeedge=scene.layers.find('ResultNetWork@guanxian');pipenode=scene.layers.find('ResultNetWork_Node@guanxian');});$('#Options').change(function(){value = $(this).val();pipeedge.setObjsColor(a,Cesium.Color.WHITE.withAlpha(1));pipenode.setObjsColor(a,Cesium.Color.WHITE.withAlpha(1));handlerPointbrust.clear();if(value == 'down'){}else if(value == 'up'){}});$("#excavation").on("click",function(){alert("请点击管线设置起始位置");pipeedge.setObjsColor(a,Cesium.Color.WHITE.withAlpha(1));pipenode.setObjsColor(a,Cesium.Color.WHITE.withAlpha(1));handlerPointbrust.clear();handlerPointbrust.activate();});$("#clear").on("click",function(){pipeedge.setObjsColor(a,Cesium.Color.WHITE.withAlpha(1));pipenode.setObjsColor(a,Cesium.Color.WHITE.withAlpha(1));handlerPointbrust.clear();});//handlerPointbrust.drawEvt.addEventListener(function (result) {handlerPointbrust.clear();pipesec = pipeedge.getSelection();if(value!="up"&&pipesec.length!=0){var queryObj = {edgeID: pipesec * 1,isUncertainDirectionValid: true,weightName: "SmLength",};//   queryObjJSON = JSON.stringify(queryObj);$.ajax({type: 'GET',url: "http://localhost:8090/iserver/services/networkAnalyst3D-GuanDao_Line3D/rest/facilityanalyst3d/ResultNetWork@guanxian/tracedownresult.json",data: queryObj,success: function (data) {console.log(data)if(data.edges.length>0){pipeedge.setObjsColor(a,Cesium.Color.ALICEBLUE.withAlpha(0.3));pipeedge.setObjsColor(data.edges,Cesium.Color.RED.withAlpha(1));}if(data.edges.length>0){pipenode.setObjsColor(data.nodes, Cesium.Color.RED.withAlpha(1));}           }});}if(pipesec.length==1){alert("未选择到管线，请缩放后重新分析");}if(value=="up"&&pipesec.length!=0){var queryObj = {edgeID: pipesec * 1,isUncertainDirectionValid: true,weightName: "SmLength",};//   queryObjJSON = JSON.stringify(queryObj);$.ajax({type: 'GET',url: "http://localhost:8090/iserver/services/networkAnalyst3D-GuanDao_Line3D/rest/facilityanalyst3d/ResultNetWork@guanxian/traceupresult.json",data: queryObj,success: function (data) {//  console.log(data)if(data.edges.length>0){pipeedge.setObjsColor(a,Cesium.Color.ALICEBLUE.withAlpha(0.3));pipeedge.setObjsColor(data.edges,Cesium.Color.RED.withAlpha(1));}if(data.edges.length>0){pipenode.setObjsColor(data.nodes, Cesium.Color.RED.withAlpha(1));}           }});}handlerPointbrust.deactivate();});

原文章地址：https://blog.csdn.net/weixin_42066016/article/details/101761039