ExampleXzxxPage 代码

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

import {Button} from "antd";

export default class ExampleXzxxPage extends Component {


    optionObjs = {
        "目标简标": {
            bz: true,
            bzColor: '#e000ff',
            bzLineColor: '#ff0000',
            bzlx: 'simple',
            jbwb: 'R:00017',
            type: "2002",
            returnHeight: true,
            useModify: false,
            lon: 102.33054539488224,
            lat: 31.005468100060593,
            height: 0,
            points: [],
            iconSize: [[20, 20], [30, 30], [40, 40]]
        },
        "目标醒目": {
            bz: true,
            bzColor: '#0000FF',
            bzLineColor: '#000000',
            bzlx: 'simple',
            jbwb: 'R:00017',
            xz: true,
            xzColor: '#00ff00',
            xx: true,
            xxColor: '#ff0000',
            type: "2002",
            iconColor: '#dddddd',
            returnHeight: true,
            useModify: false,
            lon: 102.23554539488224,
            lat: 31.005068100060593,
            height: 0,
            points: []
        },

        "干扰关系线": {
            type: "grgxx",
            color: '#ffff00',
            useModify: false,
            points: [{
                lon: 104.73554539488224,
                lat: 31.005068100060593,
                height: 0,
            }, {
                lon: 103.73554539488224,
                lat: 32.005068100060593,
                height: 0,
            }]
        },

        "双色线": {
            type: "line",
            bklx: 'double',
            color: '#64c324',
            color2: '#6932cc',
            useModify: false,
            points: [{
                lon: 103.73554539488224,
                lat: 31.005068100060593,
                height: 0,
            }, {
                lon: 104.73554539488224,
                lat: 32.005068100060593,
                height: 0,
            }]
        },
        "通信抗测向线2": {
            type: "txdkcxx2",
            kcjd: 30,
            kcgls: 10,
            kcwb: '123123',
            color: '#0059FFA3',
            lon: 103.73554539488224,
            lat: 31.005068100060593,
            height: 0,
            useModify: false,
            points: []
        },
        "团指任务分界线": {
            type: "tzrwfjx",
            color: '#D5013A',
            useModify: false,
            points: [{
                lon: 102.73554539488224,
                lat: 31.005068100060593,
                height: 0,
            }, {
                lon: 103.73554539488224,
                lat: 32.005068100060593,
                height: 0,
            }]
        },
        "连指任务分界线": {
            type: "lzrwfjx",
            color: '#D5013A',
            useModify: false,
            points: [{
                lon: 102.45554539488224,
                lat: 31.005068100060593,
                height: 0,
            }, {
                lon: 103.45554539488224,
                lat: 32.005068100060593,
                height: 0,
            }]
        }
    }
    line_star
    drawOps = [];

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

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

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


    async draw(option) {
        option = JSON.parse(JSON.stringify(option));
        option.useModify = true;
        delete option.points;
        delete option.lon;
        delete option.lat;
        delete option.height;
        let p = await this.mapFunction.mapApiService.draw(option);
        p.drawEnd.subscribe(value => {
            // alert(p.export());
        })
        this.drawOps.push(p);
    }

    export() {
        let op = [];
        let draws = this.mapFunction.mapApiService.getAllDraw();
        for (let d of draws) {
            let dd = this.mapFunction.mapApiService.exportDraw(d.code);
            if (dd) {
                op.push(dd);
            }
        }
        console.log(op);
        alert(JSON.stringify(op));
    }

    render() {
        let buttons = [];
        let obs = JSON.parse(JSON.stringify(this.optionObjs));
        for (let key in obs) {
            let option = obs[key];
            buttons.push(<Button type="primary" onClick={this.draw.bind(this, option)} key={key}>{key}</Button>);
        }

        return (
            <div className={"example_draw_container"}>
                <h3>军标绘制/展示已有的军标数据</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         useSvgIcon={true}
                         iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]}
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={false}
                    />
                </div>
                <Button type="primary" onClick={this.showOptions.bind(this)}>显示已有标绘数据</Button>
                {buttons}
                <Button type="primary" onClick={this.export.bind(this)}>导出绘制配置</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}