Cesium（五）剖面分析（仿火星科技）
剖面分析是三维分析的一种，仅在地形图状态下方可使用。作为一个测绘人员剖面分析，大多在地形的状态下高程变化，本文采用Ceisum和echart结合，下面讲解剖面分析的实现过程。
效果图：
一、实现原理
1、根据点击事件绘制剖面线段（贴地形），并获取start、end两点，为线段空间插值做数据准备，采用viewer.scene.pickPosition(click.position);
2、线段插值，线段插值采用var cart = Cesium.Cartesian3.lerp(start, end, i / count, new Cesium.Cartesian3());
3、将插值的数据，赋值给chartData
二、主要函数
1、剖面分析函数封装
function profileAnalyse(start, end) {
var startPoint = Cesium.Cartographic.fromCartesian(start);
var endPoint = Cesium.Cartographic.fromCartesian(end);
profile.arrLX.push(0);
profile.ponits.push(startPoint);
profile.arrPoint.push(getDegrees(startPoint));
profile.arrHB.push(startPoint.height);
// 插值100个点，点越多模拟越精确，但是效率会低
var count = 100;
for (var i = 1; i < count; i++) {
var cart = Cesium.Cartesian3.lerp(start, end, i / count, new Cesium.Cartesian3());
var cartographicCart = Cesium.Cartographic.fromCartesian(cart);
var disc = distance(profile.ponits[i - 1], cartographicCart);
profile.distance = profile.distance + disc;
profile.ponits.push(cartographicCart);
profile.arrLX.push(profile.arrLX[i - 1] + disc);
profile.arrPoint.push(getDegrees(cart));
profile.arrHB.push(cartographicCart.height);
}
profile.ponits.push(endPoint);
profile.arrLX.push(profile.arrLX[profile.arrLX.length - 1] + distance(profile.ponits[profile.ponits.length-1], endPoint));
profile.arrPoint.push(getDegrees(endPoint));
profile.arrHB.push(endPoint.height);
return profile;
}
2、设置Echart数据函数封装
function setEchartsData(e) {
if (null != e && null != e.arrPoint) {
$("#sectionChars").show(),
null == myChart && (myChart = echarts.init(document.getElementById("echartsView1"), "dark"));
console.log(e.arrHB.value);
var t = e.arrPoint,
chartData = {
grid: {
left: 10,
right: 10,
bottom: 10,
containLabel: !0
},
dataZoom: [{
type: "inside",
throttle: 50
}],
tooltip: {
trigger: "axis",
formatter: function (e) {
var a = "";
if (0 == e.length) return a;
e[0].value;
console.log(e);
var r = t[e[0].dataIndex];
console.log(r);
return a += "所在位置 " + strFormat(r.x ) + "," + strFormat(r.y ) + "
距起点
" + e[0].seriesName + "
"
}
},
xAxis: [{
name: "行程",
type: "category",
boundaryGap: !1,
axisLine: {
show: !1
},
axisLabel: {
show: !1
},
data: e.arrLX
}],
yAxis: [{
type: "value",
axisLabel: {
rotate: 60,
formatter: "{value} 米"
}
}],
series: [{
name: "高程值",
type: "line",
smooth: !0,
symbol: "none",
sampling: "average",
itemStyle: {
normal: {
color: "rgb(255, 70, 131)"
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgb(255, 158, 68)"
},
{
offset: 1,
color: "rgb(255, 70, 131)"
}])
}
},
data: e.arrHB
}]
};
myChart.setOption(chartData)
}
}
三、完整demo
剖面分析
四、参考博文
1、https://xiaozhuanlan.com/topic/2108573649
2、https://blog.csdn.net/qq_34149805/article/details/78393540
3、https://blog.csdn.net/u013517229/article/details/84563952
4、http://cesium.marsgis.cn/cesium-example/editor.html#42_measure_section