import React, {PureComponent} from "react";
|
import * as echarts from 'echarts';
|
import {Button} from "antd";
|
import {CloseOutlined} from "@ant-design/icons";
|
|
export default class ProfilePage extends PureComponent {
|
chartRef = React.createRef();
|
chartInstance = null;
|
|
|
constructor(props) {
|
super(props);
|
this.samplesObj = null;
|
this.points = [];
|
this.height = [];
|
this.mapApiService = this.props.mapApiService;
|
this.viewer = this.props.mapApiService.viewer;
|
}
|
|
componentDidMount() {
|
// 初始化图表
|
this.chartInstance = echarts.init(this.chartRef.current);
|
if (this.props.profileResult) {
|
this.points = this.props.profileResult;
|
let dis = this.mapApiService.getDistance(this.points[0], this.points[1]);
|
let interval = dis / 150;
|
this.samplesObj = this.mapApiService.preciseLerpSampling(this.points[0], this.points[1], interval);
|
this.getSamplingPoint();
|
}
|
}
|
|
getSamplingPoint() {
|
let points = this.samplesObj.points;
|
let promise = this.mapApiService.sampleTerrainMostDetailed(points);
|
promise.then(updatedPositions => {
|
for (let i = 0; i < updatedPositions.length; i++) {
|
if (updatedPositions[i].height) {
|
let h = updatedPositions[i].height;
|
this.height.push((h).toFixed(2)); // 取得高程值
|
}
|
}
|
this.showChar();
|
})
|
}
|
|
showChar() {
|
let option = this.getOption();
|
this.chartInstance.setOption(option);
|
}
|
|
getOption() {
|
const option = {
|
grid: {left: '100px', right: '50px', bottom: '25px'},
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
name: "km",
|
axisLabel: {
|
color: '#fff'
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {color: '#fff'}
|
}, // 轴线样式
|
data: this.samplesObj.dis
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
show: true,
|
lineStyle: {color: '#fff'}
|
}, // 轴线样式
|
name: "m",
|
axisLabel: {
|
color: '#fff'
|
}
|
},
|
series: [
|
{
|
name: '高程',
|
type: 'line',
|
smooth: true,
|
showSymbol: false,
|
data: this.height,
|
areaStyle: {
|
color: {
|
type: 'linear',
|
x: 0,
|
y: 0,
|
x2: 0,
|
y2: 1,
|
colorStops: [{
|
offset: 0, color: 'rgba(240,9,246,1)' // 0% 处的颜色
|
}, {
|
offset: 1, color: 'rgba(210,33,100,0.5)' // 100% 处的颜色
|
}]
|
}
|
}
|
}
|
]
|
};
|
return option;
|
}
|
|
componentWillUnmount() {
|
if (this.chartInstance) {
|
this.chartInstance.dispose();
|
}
|
}
|
|
closeEvent() {
|
this.props.closeEvent(null);
|
//this.mapFunction.mapApiService.disableTilt ();
|
}
|
|
render() {
|
return (
|
<div className="sightLine-char-container">
|
<div className="title-container">
|
<div className="title-name">
|
<span>剖面分析</span>
|
</div>
|
<div className="icon-container">
|
<Button type="primary" onClick={this.closeEvent.bind(this)}><CloseOutlined/></Button>
|
</div>
|
</div>
|
<div className="sightLine-char-body">
|
<div
|
className="char-container"
|
ref={this.chartRef}
|
style={{width: '100%', height: '300px'}}
|
></div>
|
</div>
|
</div>
|
);
|
}
|
}
|
