ProfilePage 代码

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>
        );
    }
}