剖面分析是指根据指定的剖面线,输出剖面线与地形数据的表面高程沿某条线(截面)的变化,或剖面线所截的模型建筑物、地下管线等的轮廓线。在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官网示例。