import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";

export default class ExampleAggregatorPage extends Component {


    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
        };
    }

    componentDidMount() {
        fetch('./example/ExampleAggregatorPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });

        const randomPoints = this.generateRandomPointsInRadius(35.9042, 112.4074, 10, 200);

        let options = [];
        for (let i = 0; i < randomPoints.length; i++) {
            options.push({
                type: "2002",
                useModify: false,
                lon: randomPoints[i].lng,
                lat: randomPoints[i].lat,
            });
        }
        this.mapFunction.mapApiService.showDrawDatas(options);
    }

    /**
     * 生成指定中心点周围100公里内的2000个随机点
     * @param {number} centerLat - 中心点纬度（度）
     * @param {number} centerLng - 中心点经度（度）
     * @param {number} radiusKm - 半径（公里）
     * @param {number} count - 生成点数
     * @returns {Array<{lat: number, lng: number}>} 随机点数组
     */
    generateRandomPointsInRadius(centerLat, centerLng, radiusKm = 100, count = 2000) {
        const points = [];
        const earthRadius = 6371; // 地球半径（公里）

        for (let i = 0; i < count; i++) {
            // 1. 生成随机方向（0-2π）
            const angle = Math.random() * 2 * Math.PI;

            // 2. 生成随机距离（考虑平方根确保均匀分布）
            const distance = Math.sqrt(Math.random()) * radiusKm;

            // 3. 将距离转换为弧度
            const distanceRad = distance / earthRadius;

            // 4. 计算新点坐标（哈弗辛公式）
            const latRad = centerLat * Math.PI / 180;
            const lngRad = centerLng * Math.PI / 180;

            const newLat = Math.asin(
                Math.sin(latRad) * Math.cos(distanceRad) +
                Math.cos(latRad) * Math.sin(distanceRad) * Math.cos(angle)
            );

            const newLng = lngRad + Math.atan2(
                Math.sin(angle) * Math.sin(distanceRad) * Math.cos(latRad),
                Math.cos(distanceRad) - Math.sin(latRad) * Math.sin(newLat)
            );

            // 5. 转换为度数并存储
            points.push({
                lat: newLat * 180 / Math.PI,
                lng: newLng * 180 / Math.PI
            });
        }

        return points;
    }

    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>自动聚合</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={e => {
                        this.mapFunction = e
                    }}
                         useSvgIcon={true}
                         mapRef={this}
                         global={[112, 35, 113, 36]}
                    />
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}