增加相关样例

sbjw

2025-11-10 8bda1f7325f3a990e0e96304cc14959047098fc0

增加相关样例

 package.json

@@ -4,7 +4,7 @@
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "update2": "pnpm update iclient3d-plot-diy --no-save --registry https://registry.npmjs.org",
        "update2": "npm update iclient3d-plot-diy --no-save --registry https://registry.npmjs.org",
        "code-to-md": "node extract-code-to-md.js"
    },
    "keywords": [],
@@ -19,9 +19,10 @@
        "@ant-design/icons": "^4.0.0",
        "antd": "^4.24.16",
        "echarts": "^5.6.0",
        "iclient3d-plot-diy": "^1.0.26",
        "iclient3d-plot-diy": "^1.0.29",
        "iclient3d-plot-diy-attachment": "^1.0.2",
        "jquery": "^3.7.1",
        "@turf/turf": "^7.2.0",
        "react-draggable": "^3.3.2",
        "react-router-dom": "^5.3.4",
        "rxjs": "^7.8.2"

 public/example/ExampleBlcPage.md

@@ -15,6 +15,7 @@
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
            scale: 0
        };
    }

@@ -53,6 +54,9 @@
                this.setState({htmlString: window.marked.parse(mdText)});
            });
        //监听拨盘事件
        this.mapFunction.addScaleListener((scale) => {
            this.setState({scale: scale});
        })
    }

    showData() {
@@ -82,6 +86,7 @@
                <Button type="primary" onClick={() => this.setCameraHeightByScale(2500)}>1:2500</Button>
                <Button type="primary" onClick={() => this.setCameraHeightByScale(10000)}>1:10000</Button>
                <Button type="primary" onClick={() => this.setCameraHeightByScale(50000)}>1:50000</Button>
                <span>当前比例尺: {this.state.scale}</span>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>

 public/example/ExampleDrawPage.md

@@ -256,16 +256,7 @@
    };

    showOptions2 = () => {

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

        this.mapFunction.mapApiService.showDrawDatas([this.optionObjs['目标简标']]);
    }



 public/example/ExampleFlyPage.md

@@ -85,7 +85,8 @@
            "useModify": false,
            "lon": arr[0].lon,
            "lat": arr[0].lat,
            "height": arr[0].height || 0,
            xz: true,
            "height": arr[0].height,
            points: []
        }
        this.mapFunction.mapApiService.showDrawDatas([option]);
@@ -94,6 +95,7 @@
            this.mapFunction.mapApiService.updateDraw("ccccc", {
                lon: arr[number].lon,
                lat: arr[number].lat,
                height: arr[number].height,
                points: arr.slice(0, number)
            });
        });

 public/example/ExampleGetPointsPage.md

@@ -36,6 +36,54 @@
            this.mapFunction.mapApiService.removeDraw(p.code);
        })
    }
    async getBox() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "box",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }
    async getLine() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "line",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }
    async getPolygon() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "polygon",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }
    async getCircle() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "circle",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }

    render() {
        return (
@@ -53,6 +101,10 @@
                    />
                </div>
                <Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
                <Button type="primary" onClick={this.getBox.bind(this)}>获取box</Button>
                <Button type="primary" onClick={this.getLine.bind(this)}>获取线</Button>
                <Button type="primary" onClick={this.getPolygon.bind(this)}>获取面</Button>
                <Button type="primary" onClick={this.getCircle.bind(this)}>获取圆</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>

 public/example/ExampleHightLightLocatePage.md

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

### ExampleHightLightLocatePage 代码

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


export default class ExampleHightLightLocatePage extends Component {

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

    componentDidMount() {
        fetch('./example/ExampleHightLightLocatePage.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}
                    />
                </div>
                <Button type="primary" onClick={() => this.draw()}>高亮点</Button>
                <Button type="primary" onClick={() => this.draw()}>高亮线</Button>
                <Button type="primary" onClick={() => this.draw()}>高亮面</Button>
                <Button type="primary" onClick={() => this.export()}>定位点</Button>
                <Button type="primary" onClick={() => this.export()}>定位线</Button>
                <Button type="primary" onClick={() => this.export()}>定位面</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



```

 public/example/ExampleSelectPage.md

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

### ExampleSelectPage 代码

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


export class ExampleSelectPage extends Component {


    optionObjs = {
        "目标简标": {
            bz: true,
            bzlx: 'simple',
            jbwb: 'R:00017',
            type: "2002",
            returnHeight: true,
            useModify: false,
            lon: 102.73054539488224, lat: 31.005468100060593, height: 0,
            points: [],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "目标详标": {
            bz: true,
            bzlx: 'detail',
            jbwb: 'R:00017',
            xbwb: "17/10/2019\n16:45:8\n9260.00-10400.00MHZ",
            type: "2002",
            useModify: false,
            lon: 102.70054539488224, lat: 31.000468100060593, height: 0,
            points: [],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "飞行简标": {
            bz: true,
            bzlx: 'simple',
            jbwb: "P:00019",
            type: "2010",
            useModify: false,
            lon: 102.76054539488224, lat: 31.000468100060593, height: 0,
            points: [{lon: 102.76554539488224, lat: 31.000468100060593, height: 0}, {
                lon: 102.76904539488224,
                lat: 30.992468100060593,
                height: 0
            }],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "飞行详标": {
            bz: true,
            bzlx: 'detail',
            jbwb: 'P:00019',
            xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
            type: "2010",
            useModify: false,
            lon: 102.73054539488224, lat: 31.001068100060593, height: 0,
            points: [{lon: 102.73554539488224, lat: 31.001068100060593, height: 0}, {
                lon: 102.73904539488224,
                lat: 30.992468100060593,
                height: 0
            }],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "雷达对抗侦察区域": {
            type: "lddkzcqy",
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 31.001068100060593, height: 0,
            useModify: false,
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "雷达对抗干扰波束": {
            type: 'lddkgrps',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
            useModify: false,
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "雷达对抗测向线": {
            type: "lddkcxx",
            kcwb: "10110",
            kcgls: 1,
            kcjd: 30,
            useModify: false,
            lon: 102.76054539488224, lat: 31.011068100060593, height: 0,
            points: []
        },
        "雷达对抗关系": {
            type: "lddkgx",
            kcwb: "10110",
            kcgls: 1,
            kcjd: 30,
            useModify: false,
            lon: 102.78054539488224,
            lat: 31.015068100060593,
            height: 0,
            points: []
        },
        "雷达对目标探测": {
            type: "lddmbtc",
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.71004539488224, lat: 30.990068100060593, height: 0,
            useModify: false,
        },
        "通信对抗侦察区域": {
            type: "txdkzcqy",
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.69804539488224, lat: 30.990068100060593, height: 0,
            useModify: false,
        },
        "通信对抗干扰波束": {
            type: "txdkgrps",
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.76004539488224, lat: 30.991068100060593, height: 0,
            useModify: false,
        },
        "通信对抗测向线": {
            type: "txdkcxx",
            kcgls: 1,
            kcjd: 30,
            kcwb: "10110",
            useModify: false,
            lon: 102.76854539488224, lat: 31.009068100060593, height: 0,
            points: []
        },
        "通信畅通区域": {
            type: 'txctqy',
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.71504539488224, lat: 30.980068100060593, height: 0,
            useModify: false,
        },
        "通信网标绘": {
            type: "txw",
            useModify: false,
            lon: 102.70854539488224, lat: 31.0098468100060593, height: 0,
            points: []
        },
        "光电对抗侦察区域": {
            type: 'gddkzcqy',
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.69054539488224, lat: 31.0098468100060593, height: 0,
            useModify: false,
        },
        "光电有源对抗干扰波束": {
            type: 'gdyydkgrbs',
            kcgls: 1,
            kcjd: 30,
            lon: 102.67054539488224, lat: 31.0098468100060593, height: 0,
            useModify: false,
        },
        "漫反射干扰区域": {
            type: 'mfsgrqy',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.67054539488224, lat: 31.0028468100060593, height: 0,
            useModify: false,
        },
        '烟幕形成区域': {
            type: 'ymxcqy',
            points: [{lon: 102.64984, lat: 30.99237, height: 0},
                {lon: 102.66012682459443, lat: 30.995109020954718, height: 0},
                {lon: 102.67126799815856, lat: 30.98766239848537, height: 0},
                {lon: 102.64984, lat: 30.983747593478107, height: 0},
                {lon: 102.64984, lat: 30.99237, height: 0}],
            useModify: false,
        },
        "掩护区域": {
            type: 'yhqy',
            points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
                {lon: 102.65927322610115, lat: 31.01540811637356, height: 0},
                {lon: 102.66192135373299, lat: 31.005988487769518, height: 0},
                {lon: 102.64755620178961, lat: 31.00246196283815, height: 0},
                {lon: 102.642853926199, lat: 31.012509646376447, height: 0}],
            useModify: false,
        },
        "协同关系": {
            type: 'xtgx',
            points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
                {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}],
            useModify: false,
        },
        "干扰线": {
            type: 'grx',
            points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}],
            useModify: false
        },
        "预警线": {
            type: 'yjx',
            useModify: false,
            points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}]
        },
        "目标分配线": {
            type: 'mbfpx',
            useModify: false,
            points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}]
        },
        "目标醒目": {
            bz: true,
            xz: true,
            bzlx: 'simple',
            jbwb: 'R:00017',
            type: "2002",
            returnHeight: true,
            useModify: false,
            lon: 102.73554539488224, lat: 31.005068100060593, height: 0,
            points: []
        },
    }

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

    componentDidMount() {

        let options = [];
        for (let key in this.optionObjs) {
            options.push(this.optionObjs[key]);
        }
        this.mapFunction.mapApiService.showDrawDatas(options);

        this.mapFunction.mapApiService.updateModel('select')
        this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
            // console.log(selectedData);
            document.getElementById('textarea').value = JSON.stringify(selectedData);
        })

        setTimeout(() => {
            this.mapFunction.mapApiService.useDrawSelect('box', true)
        }, 1000);
        this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
            console.log(selectedData);
        })


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

    useSelect() {
        this.mapFunction.mapApiService.updateModel('select')
    }

    useBoxSelect() {
        this.mapFunction.mapApiService.updateModel('select')
        this.mapFunction.mapApiService.useDrawSelect('box', true)
    }

    unBoxSelect() {
        this.mapFunction.mapApiService.clearDrawSelect()
    }

    clearSelected() {
        this.mapFunction.mapApiService.clearSelected();
    }

    useModify() {
        this.mapFunction.mapApiService.updateModel('modify')
    }

    outSelected() {
        this.mapFunction.mapApiService.triggerSelected(['draw_primitive_1020_'])
    }

    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={true}
                    />
                </div>
                <Button type="primary" onClick={() => this.useSelect()}>选择</Button>
                <Button type="primary" onClick={() => this.useBoxSelect()}>框选</Button>
                <Button type="primary" onClick={() => this.unBoxSelect()}>取消框选</Button>
                <Button type="primary" onClick={() => this.clearSelected()}>清除选择</Button>
                <Button type="primary" onClick={() => this.outSelected()}>外部指定选择对象</Button>
                <Button type="primary" onClick={() => this.useModify()}>修改模式</Button>
                <textarea id="textarea" className={"textarea"}></textarea>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



```

 public/project3d/icon/draw/框.png

 src/example/ExampleBlcPage.js

@@ -11,6 +11,7 @@
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
            scale: 0
        };
    }

@@ -49,6 +50,9 @@
                this.setState({htmlString: window.marked.parse(mdText)});
            });
        //监听拨盘事件
        this.mapFunction.addScaleListener((scale) => {
            this.setState({scale: scale});
        })
    }

    showData() {
@@ -78,6 +82,7 @@
                <Button type="primary" onClick={() => this.setCameraHeightByScale(2500)}>1:2500</Button>
                <Button type="primary" onClick={() => this.setCameraHeightByScale(10000)}>1:10000</Button>
                <Button type="primary" onClick={() => this.setCameraHeightByScale(50000)}>1:50000</Button>
                <span>当前比例尺: {this.state.scale}</span>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>

 src/example/ExampleDrawPage.js

@@ -252,16 +252,7 @@
    };

    showOptions2 = () => {

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

        this.mapFunction.mapApiService.showDrawDatas([this.optionObjs['目标简标']]);
    }



 src/example/ExampleFlyPage.js

@@ -81,7 +81,8 @@
            "useModify": false,
            "lon": arr[0].lon,
            "lat": arr[0].lat,
            "height": arr[0].height || 0,
            xz: true,
            "height": arr[0].height,
            points: []
        }
        this.mapFunction.mapApiService.showDrawDatas([option]);
@@ -90,6 +91,7 @@
            this.mapFunction.mapApiService.updateDraw("ccccc", {
                lon: arr[number].lon,
                lat: arr[number].lat,
                height: arr[number].height,
                points: arr.slice(0, number)
            });
        });

 src/example/ExampleGetPointsPage.js

@@ -32,6 +32,54 @@
            this.mapFunction.mapApiService.removeDraw(p.code);
        })
    }
    async getBox() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "box",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }
    async getLine() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "line",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }
    async getPolygon() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "polygon",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }
    async getCircle() {

        let p = await this.mapFunction.mapApiService.draw({
            type: "circle",
        });
        p.drawEnd.subscribe(value => {
            let c = p.export();
            alert(JSON.stringify(c.points));
            this.mapFunction.mapApiService.removeDraw(p.code);
            this.mapFunction.mapApiService.showDrawDatas([c])
        })
    }

    render() {
        return (
@@ -49,6 +97,10 @@
                    />
                </div>
                <Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
                <Button type="primary" onClick={this.getBox.bind(this)}>获取box</Button>
                <Button type="primary" onClick={this.getLine.bind(this)}>获取线</Button>
                <Button type="primary" onClick={this.getPolygon.bind(this)}>获取面</Button>
                <Button type="primary" onClick={this.getCircle.bind(this)}>获取圆</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>

 src/example/ExampleHightLightLocatePage.js

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


export default class ExampleHightLightLocatePage extends Component {

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

    componentDidMount() {
        fetch('./example/ExampleHightLightLocatePage.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}
                    />
                </div>
                <Button type="primary" onClick={() => this.draw()}>高亮点</Button>
                <Button type="primary" onClick={() => this.draw()}>高亮线</Button>
                <Button type="primary" onClick={() => this.draw()}>高亮面</Button>
                <Button type="primary" onClick={() => this.export()}>定位点</Button>
                <Button type="primary" onClick={() => this.export()}>定位线</Button>
                <Button type="primary" onClick={() => this.export()}>定位面</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



 src/example/ExamplePage.js

@@ -77,6 +77,7 @@
                    <li><NavLink to='/example/aggregator'>自动聚合</NavLink></li>
                    <li><NavLink to='/example/defaultMap2d'>默认2D</NavLink></li>
                    <li><NavLink to='/example/getPoints'>动态获取坐标</NavLink></li>
                    <li><NavLink to='/example/select'>军标选择</NavLink></li>
                </ul>
                <div className={"button_wrapper"}>


 src/example/ExampleSelectPage.css

New file
@@ -0,0 +1,4 @@
.textarea {
    width: 100%;
    height: 150px;
}

 src/example/ExampleSelectPage.js

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


export class ExampleSelectPage extends Component {


    optionObjs = {
        "目标简标": {
            bz: true,
            bzlx: 'simple',
            jbwb: 'R:00017',
            type: "2002",
            returnHeight: true,
            useModify: false,
            lon: 102.73054539488224, lat: 31.005468100060593, height: 0,
            points: [],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "目标详标": {
            bz: true,
            bzlx: 'detail',
            jbwb: 'R:00017',
            xbwb: "17/10/2019\n16:45:8\n9260.00-10400.00MHZ",
            type: "2002",
            useModify: false,
            lon: 102.70054539488224, lat: 31.000468100060593, height: 0,
            points: [],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "飞行简标": {
            bz: true,
            bzlx: 'simple',
            jbwb: "P:00019",
            type: "2010",
            useModify: false,
            lon: 102.76054539488224, lat: 31.000468100060593, height: 0,
            points: [{lon: 102.76554539488224, lat: 31.000468100060593, height: 0}, {
                lon: 102.76904539488224,
                lat: 30.992468100060593,
                height: 0
            }],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "飞行详标": {
            bz: true,
            bzlx: 'detail',
            jbwb: 'P:00019',
            xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
            type: "2010",
            useModify: false,
            lon: 102.73054539488224, lat: 31.001068100060593, height: 0,
            points: [{lon: 102.73554539488224, lat: 31.001068100060593, height: 0}, {
                lon: 102.73904539488224,
                lat: 30.992468100060593,
                height: 0
            }],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "雷达对抗侦察区域": {
            type: "lddkzcqy",
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 31.001068100060593, height: 0,
            useModify: false,
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "雷达对抗干扰波束": {
            type: 'lddkgrps',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
            useModify: false,
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "雷达对抗测向线": {
            type: "lddkcxx",
            kcwb: "10110",
            kcgls: 1,
            kcjd: 30,
            useModify: false,
            lon: 102.76054539488224, lat: 31.011068100060593, height: 0,
            points: []
        },
        "雷达对抗关系": {
            type: "lddkgx",
            kcwb: "10110",
            kcgls: 1,
            kcjd: 30,
            useModify: false,
            lon: 102.78054539488224,
            lat: 31.015068100060593,
            height: 0,
            points: []
        },
        "雷达对目标探测": {
            type: "lddmbtc",
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.71004539488224, lat: 30.990068100060593, height: 0,
            useModify: false,
        },
        "通信对抗侦察区域": {
            type: "txdkzcqy",
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.69804539488224, lat: 30.990068100060593, height: 0,
            useModify: false,
        },
        "通信对抗干扰波束": {
            type: "txdkgrps",
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.76004539488224, lat: 30.991068100060593, height: 0,
            useModify: false,
        },
        "通信对抗测向线": {
            type: "txdkcxx",
            kcgls: 1,
            kcjd: 30,
            kcwb: "10110",
            useModify: false,
            lon: 102.76854539488224, lat: 31.009068100060593, height: 0,
            points: []
        },
        "通信畅通区域": {
            type: 'txctqy',
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.71504539488224, lat: 30.980068100060593, height: 0,
            useModify: false,
        },
        "通信网标绘": {
            type: "txw",
            useModify: false,
            lon: 102.70854539488224, lat: 31.0098468100060593, height: 0,
            points: []
        },
        "光电对抗侦察区域": {
            type: 'gddkzcqy',
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.69054539488224, lat: 31.0098468100060593, height: 0,
            useModify: false,
        },
        "光电有源对抗干扰波束": {
            type: 'gdyydkgrbs',
            kcgls: 1,
            kcjd: 30,
            lon: 102.67054539488224, lat: 31.0098468100060593, height: 0,
            useModify: false,
        },
        "漫反射干扰区域": {
            type: 'mfsgrqy',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.67054539488224, lat: 31.0028468100060593, height: 0,
            useModify: false,
        },
        '烟幕形成区域': {
            type: 'ymxcqy',
            points: [{lon: 102.64984, lat: 30.99237, height: 0},
                {lon: 102.66012682459443, lat: 30.995109020954718, height: 0},
                {lon: 102.67126799815856, lat: 30.98766239848537, height: 0},
                {lon: 102.64984, lat: 30.983747593478107, height: 0},
                {lon: 102.64984, lat: 30.99237, height: 0}],
            useModify: false,
        },
        "掩护区域": {
            type: 'yhqy',
            points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
                {lon: 102.65927322610115, lat: 31.01540811637356, height: 0},
                {lon: 102.66192135373299, lat: 31.005988487769518, height: 0},
                {lon: 102.64755620178961, lat: 31.00246196283815, height: 0},
                {lon: 102.642853926199, lat: 31.012509646376447, height: 0}],
            useModify: false,
        },
        "协同关系": {
            type: 'xtgx',
            points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
                {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}],
            useModify: false,
        },
        "干扰线": {
            type: 'grx',
            points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}],
            useModify: false
        },
        "预警线": {
            type: 'yjx',
            useModify: false,
            points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}]
        },
        "目标分配线": {
            type: 'mbfpx',
            useModify: false,
            points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}]
        },
        "目标醒目": {
            bz: true,
            xz: true,
            bzlx: 'simple',
            jbwb: 'R:00017',
            type: "2002",
            returnHeight: true,
            useModify: false,
            lon: 102.73554539488224, lat: 31.005068100060593, height: 0,
            points: []
        },
    }

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

    componentDidMount() {

        let options = [];
        for (let key in this.optionObjs) {
            options.push(this.optionObjs[key]);
        }
        this.mapFunction.mapApiService.showDrawDatas(options);

        this.mapFunction.mapApiService.updateModel('select')
        this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
            // console.log(selectedData);
            document.getElementById('textarea').value = JSON.stringify(selectedData);
        })

        setTimeout(() => {
            this.mapFunction.mapApiService.useDrawSelect('box', true)
        }, 1000);
        this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
            console.log(selectedData);
        })


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

    useSelect() {
        this.mapFunction.mapApiService.updateModel('select')
    }

    useBoxSelect() {
        this.mapFunction.mapApiService.updateModel('select')
        this.mapFunction.mapApiService.useDrawSelect('box', true)
    }

    unBoxSelect() {
        this.mapFunction.mapApiService.clearDrawSelect()
    }

    clearSelected() {
        this.mapFunction.mapApiService.clearSelected();
    }

    useModify() {
        this.mapFunction.mapApiService.updateModel('modify')
    }

    outSelected() {
        this.mapFunction.mapApiService.triggerSelected(['draw_primitive_1020_'])
    }

    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={true}
                    />
                </div>
                <Button type="primary" onClick={() => this.useSelect()}>选择</Button>
                <Button type="primary" onClick={() => this.useBoxSelect()}>框选</Button>
                <Button type="primary" onClick={() => this.unBoxSelect()}>取消框选</Button>
                <Button type="primary" onClick={() => this.clearSelected()}>清除选择</Button>
                <Button type="primary" onClick={() => this.outSelected()}>外部指定选择对象</Button>
                <Button type="primary" onClick={() => this.useModify()}>修改模式</Button>
                <textarea id="textarea" className={"textarea"}></textarea>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}