SuperMap iClient3D for WebGL结合Echarts实现模型剖面分析

剖面分析是指根据指定的剖面线，输出剖面线与地形数据的表面高程沿某条线（截面）的变化，或剖面线所截的模型建筑物、地下管线等的轮廓线。在webgl中已经有实现功能的示例，详情可以参考链接https://blog.csdn.net/supermapsupport/article/details/99843024。但是这个剖面分析的结果使用canvas渲染的图片，无法剖面线图上进行量算和位置查询功能，所以本篇文章主要是，用echarts代替canvas来实现剖面分析。

模型高度采样

主要思路是首先通过绘制线的方法，绘制一条剖分线，然后在线上截取多个节点，通过clampToHeightMostDetailed接口来获取这些节点在模型上的高度，然后通过entities讲线绘制在场景中。

绘制线完成后，先冲节点里面提前分析的起始点坐标和终点坐标。

 var line = result.object;
 var startPoint = line._positions[0];
 var endPoint = line._positions[1];

根据起终点生成采样点数组，我这里为了精度设置了1000个采样点。

 var count = 1001;
 var positions = [];
 for (var i = 1; i < count; i++) {
       positions.push(Cesium.Cartesian3.lerp(startPoint , endPoint , i / count, new Cesium.Cartesian3()));
 }

通过clampToHeightMostDetailed接口获取采样点高度。

 scene.clampToHeightMostDetailed(positions).then(function (clampedCartesians) {
     // 每个点的高度
     for (var i = 1; i < count; i++) {
         height.push(Cesium.Cartographic.fromCartesian(clampedCartesians[i]).height);
     }
})

最后通过entities添加贴模型线来展示绘制的区域。

在Echarts中显示

Webgl里面已经集成了Echarts，所以直接引用进来，然后将上一把中的结果数组生成折线图。
上文中的height变量已经是数组类型，所以传给Echarts可以直接使用，Echarts的使用方法这里不在赘述，可以参考Echarts官网示例。