package.json

@@ -19,7 +19,7 @@
        "@ant-design/icons": "^4.0.0",
        "antd": "^4.24.16",
        "echarts": "^5.6.0",
        "iclient3d-plot-diy": "^1.0.24",
        "iclient3d-plot-diy": "^1.0.26",
        "iclient3d-plot-diy-attachment": "^1.0.2",
        "jquery": "^3.7.1",
        "react-draggable": "^3.3.2",

 public/example/ExampleAggregatorPage.md

New file
@@ -0,0 +1,109 @@

### ExampleAggregatorPage 代码

```jsx
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>
        )
    }
}



```

 public/example/ExampleDefaultMap2dPage.md

New file
@@ -0,0 +1,53 @@

### ExampleDefaultMap2dPage 代码

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


export default class ExampleDefaultMap2dPage extends Component {

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

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

    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>军标绘制拨盘功能</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={false}
                         map2D={true}
                    />
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



```

 public/example/ExampleDrawPage.md

@@ -39,7 +39,7 @@
            bz: true,
            bzlx: 'simple',
            jbwb: "P:00019",
            type: "fx",
            type: "2010",
            useModify: false,
            lon: 102.76054539488224, lat: 31.000468100060593, height: 0,
            points: [{lon: 102.76554539488224, lat: 31.000468100060593, height: 0}, {
@@ -54,7 +54,7 @@
            bzlx: 'detail',
            jbwb: 'P:00019',
            xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
            type: "fx",
            type: "2010",
            useModify: false,
            lon: 102.73054539488224, lat: 31.001068100060593, height: 0,
            points: [{lon: 102.73554539488224, lat: 31.001068100060593, height: 0}, {
@@ -255,6 +255,19 @@
        }
    };

    showOptions2 = () => {

        this.mapFunction.mapApiService.showDrawDatas([{
            type: 'lddkgrps',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
            useModify: false
        }]);

    }


    async draw(option) {
        this.closeUpdate();
@@ -263,7 +276,10 @@
        delete option.lon;
        delete option.lat;
        delete option.height;
        let p = await this.mapFunction.mapApiService.draw(option)
        let p = await this.mapFunction.mapApiService.draw(option);
        p.drawEnd.subscribe(value => {
            // alert(p.export());
        })
        this.drawOps.push(p);
    }

@@ -408,12 +424,14 @@
                            this.mapFunction = e
                        }
                    }
                         useSvgIcon={true}
                         iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]}
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={true}
                    />
                </div>
                <Button type="primary" onClick={this.showOptions2.bind(this)}>2222</Button>
                <Button type="primary" onClick={this.showOptions.bind(this)}>显示已有标绘数据</Button>
                {buttons}
                <Button type="primary" onClick={this.export.bind(this)}>导出绘制配置</Button>

 public/example/ExampleDynamicBlcPage.md

@@ -48,7 +48,7 @@
    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>切换比例尺</h3>
                <h3>动态比例尺</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={(e) => this.mapFunction = e}
                         plotUrl={this.state.plotUrl}

 public/example/ExampleFlyPage.md

@@ -4,9 +4,8 @@
```jsx
import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";
import {GIS, Bp} from "iclient3d-plot-diy";
import {interval, take} from "rxjs";
import {Bp} from "iclient3d-plot-diy";

const Cesium = window['Cesium'];

@@ -73,7 +72,7 @@
            return {
                lon: Cesium.Math.toDegrees(car.longitude),
                lat: Cesium.Math.toDegrees(car.latitude),
                height: car.height
                height: 5000
            };
        });


 public/example/ExampleGetPointsPage.md

New file
@@ -0,0 +1,66 @@

### ExampleGetPointsPage 代码

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


export default class ExampleGetPointsPage extends Component {

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

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

    async getPoints() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "0",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(`lon: ${c.lon}, lat: ${c.lat}, height: ${c.height}`);
            this.mapFunction.mapApiService.removeDraw(p.code);
        })
    }

    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>军标绘制拨盘功能</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={false}
                    />
                </div>
                <Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



```

 public/example/ExampleSimpleEventPage.md

New file
@@ -0,0 +1,62 @@

### ExampleSimpleEventPage 代码

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

export default class ExampleSimpleEventPage extends Component {
    drawOps = [];

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

    componentDidMount() {
        this.showData();

        fetch('./example/ExampleSimpleEventPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
        //监听拨盘事件
    }

    showData() {
        this.mapFunction.mapApiService.mapClickEvent.addEventListener((id, primitive, isPoint) => {
            alert(id);
        }, this);
        this.mapFunction.mapApiService.mapRightClickEvent.addEventListener((id, primitive, isPoint) => {
            alert(id);
        }, this);
    }

    render() {
        return (
            <div className={"example_fwy_container"}>
                <h3>自定义事件</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={e => {
                        this.mapFunction = e
                    }}
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={true}
                    />
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



```

 src/App.js

@@ -21,6 +21,8 @@
import ExampleDynamicDlcPage from "./example/ExampleDynamicBlcPage";
import ExampleSimpleEventPage from "./example/ExampleSimpleEventPage";
import ExampleAggregatorPage from "./example/ExampleAggregatorPage";
import ExampleDefaultMap2dPage from "./example/ExampleDefaultMap2dPage";
import ExampleGetPointsPage from "./example/ExampleGetPointsPage";

function App() {
    return (
@@ -44,6 +46,8 @@
                    <Route path="/example/simpleEvent" exact component={ExampleSimpleEventPage}/>
                    <Route path="/example/dynamicBlc" exact component={ExampleDynamicDlcPage}/>
                    <Route path="/example/aggregator" exact component={ExampleAggregatorPage}/>
                    <Route path="/example/defaultMap2d" exact component={ExampleDefaultMap2dPage}/>
                    <Route path="/example/getPoints" exact component={ExampleGetPointsPage}/>
                    <Route path="/doc" exact component={DocPage}/>
                    <Route path="/doc/:page" exact component={DocPage}/>
                    <Route path="/test" exact component={TestPage}/>

 src/example/ExampleDefaultMap2dPage.js

New file
@@ -0,0 +1,47 @@
import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";


export default class ExampleDefaultMap2dPage extends Component {

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

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

    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>军标绘制拨盘功能</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={false}
                         map2D={true}
                    />
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



 src/example/ExampleDrawPage.js

@@ -251,6 +251,19 @@
        }
    };

    showOptions2 = () => {

        this.mapFunction.mapApiService.showDrawDatas([{
            type: 'lddkgrps',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
            useModify: false
        }]);

    }


    async draw(option) {
        this.closeUpdate();
@@ -261,7 +274,7 @@
        delete option.height;
        let p = await this.mapFunction.mapApiService.draw(option);
        p.drawEnd.subscribe(value => {
            alert(p.export());
            // alert(p.export());
        })
        this.drawOps.push(p);
    }
@@ -414,6 +427,7 @@
                         showDefaultLayer={true}
                    />
                </div>
                <Button type="primary" onClick={this.showOptions2.bind(this)}>2222</Button>
                <Button type="primary" onClick={this.showOptions.bind(this)}>显示已有标绘数据</Button>
                {buttons}
                <Button type="primary" onClick={this.export.bind(this)}>导出绘制配置</Button>

 src/example/ExampleFlyPage.js

@@ -1,8 +1,7 @@
import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";
import {GIS, Bp} from "iclient3d-plot-diy";
import {interval, take} from "rxjs";
import {Bp} from "iclient3d-plot-diy";

const Cesium = window['Cesium'];

@@ -69,7 +68,7 @@
            return {
                lon: Cesium.Math.toDegrees(car.longitude),
                lat: Cesium.Math.toDegrees(car.latitude),
                height: car.height
                height: 5000
            };
        });


 src/example/ExampleGetPointsPage.js

New file
@@ -0,0 +1,60 @@
import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";
import {Button} from "antd";


export default class ExampleGetPointsPage extends Component {

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

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

    async getPoints() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "0",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(`lon: ${c.lon}, lat: ${c.lat}, height: ${c.height}`);
            this.mapFunction.mapApiService.removeDraw(p.code);
        })
    }

    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>军标绘制拨盘功能</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={false}
                    />
                </div>
                <Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



 src/example/ExamplePage.js

@@ -75,6 +75,8 @@
                    <li><NavLink to='/example/dynamicBlc'>动态比例尺</NavLink></li>
                    <li><NavLink to='/example/simpleEvent'>简单事件</NavLink></li>
                    <li><NavLink to='/example/aggregator'>自动聚合</NavLink></li>
                    <li><NavLink to='/example/defaultMap2d'>默认2D</NavLink></li>
                    <li><NavLink to='/example/getPoints'>动态获取坐标</NavLink></li>
                </ul>
                <div className={"button_wrapper"}>