### ExampleBhPage 代码

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


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

    optionObjs1 = {
        "目标简标": {
            bz: true,
            bzlx: 'simple',
            jbwb: 'R:00017',
            type: "2002",
            returnHeight: true,
            useModify: false,
            lon: 102.73054539488224, lat: 31.005468100060593, height: 0,
            points: []
        },
        "目标详标": {
            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: []
        },
        "飞行简标": {
            bz: true,
            bzlx: 'simple',
            jbwb: "P:00019",
            type: "2002",
            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
            }]
        },
        "飞行详标": {
            bz: true,
            bzlx: 'detail',
            jbwb: 'P:00019',
            xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
            type: "2002",
            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
            }]
        },
        "雷达对抗侦察区域": {
            type: "lddkzcqy",
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 31.001068100060593, height: 0,
            useModify: false,
        },
        "雷达对抗干扰波束": {
            type: 'lddkgrps',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
            useModify: false,
        },
        "雷达对抗测向线": {
            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,
            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: []
        },
    };

    optionObjs = {
        "分组1": [
            {
                bz: true,
                bzlx: 'simple',
                jbwb: 'R:00017',
                type: "2002",
                returnHeight: true,
                useModify: false,
                lon: 102.73054539488224, lat: 31.005468100060593, height: 0,
                points: []
            }, {
                bz: true,
                bzlx: 'simple',
                jbwb: 'R:00018',
                type: "2002",
                returnHeight: true,
                useModify: false,
                lon: 102.73554539488224, lat: 31.005468100060593, height: 0,
                points: []
            }],
        "分组2": [
            {
                bz: true,
                bzlx: 'simple',
                jbwb: "P:00019",
                type: "2002",
                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
                }]
            }, {
                bz: true,
                bzlx: 'detail',
                jbwb: 'P:00019',
                xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
                type: "2002",
                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
                }]
            }]
    }

    //新增
    addOptions(key, options) {
        this.mapFunction.mapApiService.appendBh(key, options);
    }

    //显示分组
    showOptions(key, options) {
        this.mapFunction.mapApiService.showBh(key);
    }

    //隐藏分组
    hideOptions(key, options) {
        this.mapFunction.mapApiService.hideBh(key);
    }

    //删除分组
    delOptions(key) {
        this.mapFunction.mapApiService.removeBh(key);
    }

    //导出分组标绘数据
    exportBh(key) {
        let options = this.mapFunction.mapApiService.exportBh(key);
        console.log(options);
        alert(JSON.stringify(options));
    }


    options1

    componentDidMount() {

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

    render() {
        let buttons = [];
        let all = [];
        for (let i in this.optionObjs1) {
            all.push(this.optionObjs1[i]);
        }
        this.optionObjs['分组3'] = all;
        for (let key in this.optionObjs) {
            let option = this.optionObjs[key];
            buttons.push(<Button type="primary"
                                 onClick={this.addOptions.bind(this, key, option)}>{'初始化' + key}</Button>);
            buttons.push(<Button type="primary"
                                 onClick={this.showOptions.bind(this, key)}>{'显示' + key}</Button>);
            buttons.push(<Button type="primary"
                                 onClick={this.hideOptions.bind(this, key)}>{'隐藏' + key}</Button>);
            buttons.push(<Button type="primary"
                                 onClick={this.delOptions.bind(this, key)}>{'删除' + key}</Button>);
            buttons.push(<Button type="primary"
                                 onClick={this.exportBh.bind(this, key)}>{'导出' + key}</Button>);
            buttons.push(<br/>);
        }

        return (
            <div className={"example_bh_page_container"}>
                <h3>分组数据展示</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={true}
                         global={[102.5, 30.5, 103.5, 31.5]}
                    />
                </div>
                {buttons}

                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



```