增加相关样例,1.0.30

sbjw

2025-12-01 0948f5cef77e7b1929e44ca9fa78e263aa79262d

增加相关样例,1.0.30

 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.29",
        "iclient3d-plot-diy": "^1.0.30",
        "iclient3d-plot-diy-attachment": "^1.0.2",
        "jquery": "^3.7.1",
        "@turf/turf": "^7.2.0",

 public/example/ExampleXzxxPage.md

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

### ExampleXzxxPage 代码

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



```

 public/project3d/material/dashed-arrow.png

 public/project3d/material/dashed-arrow.svg

New file
@@ -0,0 +1,6 @@
<svg width="40" height="100" viewBox="0 0 40 100" xmlns="http://www.w3.org/2000/svg">
    <g>
        <path d="M18 74.9998H22V87.9998H18V74.9998ZM18 47.9998H22V69.9998H18V47.9998ZM18 20.9999H22V42.9998H18V20.9999ZM18 9.82798L8.68651 19.1424C7.90545 19.9234 6.63842 19.9234 5.85741 19.1424C5.07639 18.3614 5.07646 17.0944 5.85741 16.3133L18.5859 3.58579C19.367 2.80474 20.633 2.80474 21.414 3.58579L34.1426 16.3133C34.9235 17.0944 34.9236 18.3614 34.1426 19.1424C33.3615 19.9234 32.0945 19.9234 31.3135 19.1424L22 9.82798V15.9999H18V9.82798Z"
              fill="#ff0000"/>
    </g>
</svg>

 public/project3d/material/half-circle.png

 public/project3d/material/half-circle.svg

New file
@@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g>
        <path d="M27 31.5C27 22.3604 21.2894 17 16.5 17C11.7106 17 6 22.3604 6 31.5C6 40.6396 11.7106 46 16.5 46V51C7.93959 51 1 42.2696 1 31.5C1 20.7304 7.93959 12 16.5 12C25.0604 12 32 20.7304 32 31.5C32 42.2696 25.0604 51 16.5 51V46C21.2894 46 27 40.6396 27 31.5Z"
              fill="#cc00cc"/>
    </g>
</svg>

 public/project3d/material/line-dashed.png

 public/project3d/material/line-dashed.svg

New file
@@ -0,0 +1,4 @@
<svg width="50" height="20" viewBox="0 0 50 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect y="8" width="12" height="5" fill="black"/>
    <rect x="37" y="8" width="13" height="5" fill="black"/>
</svg>

 public/project3d/material/line-star.png

 public/project3d/material/line-star.svg

New file
@@ -0,0 +1,7 @@
<svg width="50" height="24" viewBox="0 0 50 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g>
        <path d="M18.1244 0L26.0665 8.60839L37.2487 5.12436L28.6403 13.0665L32.1244 24.2487L24.1823 15.6403L13 19.1244L21.6084 11.1823L18.1244 0Z" fill="black"/>
        <path d="M9 8V13H-26V8H9Z" fill="black"/>
        <path d="M74 8V13H40V8H74Z" fill="black"/>
    </g>
</svg>

 public/project3d/material/multi-color.png

 public/project3d/material/multi-color.svg

New file
@@ -0,0 +1,12 @@
<svg width="100" height="10" viewBox="0 0 100 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 1321315864" clip-path="url(#clip0_24_171)">
<rect width="100" height="10" fill="white"/>
<path id="Vector 1387 (Stroke)" d="M100 0V5H0V0H100Z" fill="#FFF200"/>
<path id="Vector 1388 (Stroke)" d="M100 5V10H0V5H100Z" fill="#ED1C24"/>
</g>
<defs>
<clipPath id="clip0_24_171">
<rect width="100" height="10" fill="white"/>
</clipPath>
</defs>
</svg>

 public/project3d/material/remove.png

 public/project3d/material/remove.svg

New file
@@ -0,0 +1,13 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 1321315863">
<g id="Frame 1321315862" clip-path="url(#clip0_24_166)">
<path id="Vector 1385 (Stroke)" d="M31.7676 28.2324L28.2324 31.7676L0.232422 3.76758L3.76758 0.232422L31.7676 28.2324Z" fill="black"/>
<path id="Vector 1386 (Stroke)" d="M0.232422 28.2324L3.76758 31.7676L31.7676 3.76758L28.2324 0.232422L0.232422 28.2324Z" fill="black"/>
</g>
</g>
<defs>
<clipPath id="clip0_24_166">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

 public/project3d/material/remove2.svg

New file
@@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6L26 26" stroke="black" stroke-width="4" stroke-linecap="square"/>
<path d="M26 6L6 26" stroke="black" stroke-width="4" stroke-linecap="square"/>
</svg>

 public/project3d/material/single-arrow.png

 public/project3d/material/single-arrow.svg

New file
@@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 1321315871" clip-path="url(#clip0_24_264)">
<path id="Polygon 1" d="M15.0753 1.24565C15.4153 0.41998 16.5847 0.41998 16.9247 1.24565L28.7232 29.8992C29.1016 30.8181 28.0532 31.6665 27.2334 31.1049L16.5651 23.7974C16.2245 23.564 15.7755 23.564 15.4349 23.7974L4.76661 31.1049C3.94675 31.6665 2.89845 30.8181 3.27682 29.8992L15.0753 1.24565Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_24_264">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

 public/project3d/material/sz.png

 public/project3d/material/sz.svg

New file
@@ -0,0 +1,10 @@
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 1321315867" clip-path="url(#clip0_24_251)">
<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M64 64H0V0H64V64ZM2 2V62H62V2H2Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_24_251">
<rect width="64" height="64" fill="white"/>
</clipPath>
</defs>
</svg>

 public/project3d/material/triple-arrow.png

 public/project3d/material/triple-arrow.svg

New file
@@ -0,0 +1,8 @@
<svg width="32" height="96" viewBox="0 0 32 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 1321315870" clip-path="url(#clip0_24_263)">
<path id="Vector 1393 (Stroke)" d="M13 9L18 9L18 98L13 98L13 9Z" fill="black"/>
<path id="Polygon 1" d="M14.1275 0.55805C14.5093 -0.123812 15.4907 -0.123814 15.8725 0.558048L27.4028 21.1478C27.8848 22.0085 26.9615 22.9733 26.0804 22.5295L15.4498 17.1753C15.1669 17.0328 14.8331 17.0328 14.5502 17.1753L3.91957 22.5295C3.03856 22.9733 2.11525 22.0085 2.59723 21.1478L14.1275 0.55805Z" fill="black"/>
<path id="Polygon 2" d="M14.1275 35.5581C14.5093 34.8762 15.4907 34.8762 15.8725 35.558L27.4028 56.1478C27.8848 57.0085 26.9615 57.9733 26.0804 57.5295L15.4498 52.1753C15.1669 52.0328 14.8331 52.0328 14.5502 52.1753L3.91957 57.5295C3.03856 57.9733 2.11525 57.0085 2.59723 56.1478L14.1275 35.5581Z" fill="black"/>
<path id="Polygon 3" d="M14.1275 70.5581C14.5093 69.8762 15.4907 69.8762 15.8725 70.558L27.4028 91.1478C27.8848 92.0085 26.9615 92.9733 26.0804 92.5295L15.4498 87.1753C15.1669 87.0328 14.8331 87.0328 14.5502 87.1753L3.91957 92.5295C3.03856 92.9733 2.11525 92.0085 2.59723 91.1478L14.1275 70.5581Z" fill="black"/>
</g>
</svg>

 public/project3d/material/ydx.png

 public/project3d/material/ydx.svg

New file
@@ -0,0 +1,10 @@
<svg width="420" height="200" viewBox="0 0 420 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 1321315865" clip-path="url(#clip0_24_190)">
<path id="Vector 1394 (Stroke)" d="M421 2V4H200.936L-0.0126953 201.414L-1.41406 199.987L200.117 2H421Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_24_190">
<rect width="420" height="200" fill="white"/>
</clipPath>
</defs>
</svg>

 public/军事标绘文档.md

@@ -12,12 +12,17 @@
| 显示图标文本           | showText        | false                                   |
| 图标文本             | text            | 空                                       |
| 图标文本颜色           | textColor       | #000000                                 |
| 标注               | bz              | 是否有标柱                                   |
| 标注      | bz              | 是否有标注                                   |
| 标注文本颜色  | bzColor     | 标注颜色                                   |
| 标注      | bzLineColor     | 标注线颜色                                   |
| 图标大小             | tbdx            | 数字数组，例如[64,64]表示宽64px，高64px             |
| 标注类型             | bzlx            | 详标（detail）、简标(simple)、正常(normal),       |
| 详标文本             | xbwb            | 多行文本用\n进行分隔                             |
| 简标文本             | jbwb            | 简标文本                                    |
| 选中               | xz              | true(选中), false(不选中，默认)                 |
| 选中框     | xz              | true(选中), false(不选中，默认)                 |
| 选中框颜色   | xzColor         | 选中框颜色 默认#00FF00                         |
| X图标     | xx              | true(X图标), false(不选中，默认)                |
| X图标颜色   | xxColor         | X图标颜色 默认#FF0000                         |
| 经度               | lat             | 经度                                      |
| 纬度               | lon             | 纬度                                      |
| 高度               | height          | 高度                                      |
@@ -27,6 +32,7 @@
| 航迹大小             | hjSize          | 航迹大小 默认 2                               |
| 图标增加的大小          | iconOutlineSize | 地图参数要设置useSvgIcon才有效。默认 0               |
| 图标颜色             | iconColor       | 地图参数要设置useSvgIcon才有效。默认 #000000         |
| 图标旋转    | rotate          | 地图旋转。默认为0，航迹算的角度优先                      |

<br />

@@ -371,3 +377,61 @@
| 半径数组     | bjs    | 格式：[1,2,3....],单位：km               |

<br />

### 25. 干扰关系线

| 属性     | 英文     | 备注                                      |
|--------|--------|-----------------------------------------|
| 唯一标识   | code   | 唯一标识，如果不传会动态生成一个唯一标识                    |
| 军标代码类型 | type   | 固定 grgxx                                |
| 颜色     | color  | #000000格式                               |
| 坐标点    | points | 格式：{lon: 111, lat:22,  height: 10000}[] |
<br />

### 25. 双色线

| 属性     | 英文     | 备注                                      |
|--------|--------|-----------------------------------------|
| 唯一标识   | code   | 唯一标识，如果不传会动态生成一个唯一标识                    |
| 军标代码类型 | type   | 双色线固定 double                            |
| 颜色     | color  | #000000格式                               |
| 颜色2    | color2 | #FFFFFF格式                               |
| 坐标点    | points | 格式：{lon: 111, lat:22,  height: 10000}[] |
<br />

### 26. 通信抗测向线2

| 属性     | 英文     | 备注                                      |
|--------|--------|-----------------------------------------|
| 唯一标识   | code   | 唯一标识，如果不传会动态生成一个唯一标识                    |
| 军标代码类型 | type   | 固定 txdkcxx2                            |
| 颜色     | color  | #000000格式                               |
| 抗测方向角度 | kcjd   | 角度（0~360）方向是时钟0点方向开始算起 |
| 抗测公里数  | kcgls  | 单位：km                  |
| 抗测文本   | kcwb   | 右上角线的文本                |
| 经度     | lat    | 经度                     |
| 纬度     | lon    | 纬度                     |
| 高度     | height | 高度                     |

<br />


### 26. 团指任务分界线

| 属性     | 英文     | 备注                                      |
|--------|--------|-----------------------------------------|
| 唯一标识   | code   | 唯一标识，如果不传会动态生成一个唯一标识                    |
| 军标代码类型 | type   | 固定 tzrwfjx                            |
| 颜色     | color  | #000000格式                               |
| 坐标点    | points | 格式：{lon: 111, lat:22,  height: 10000}[] |

### 26. 连指任务分界线

| 属性     | 英文     | 备注                                      |
|--------|--------|-----------------------------------------|
| 唯一标识   | code   | 唯一标识，如果不传会动态生成一个唯一标识                    |
| 军标代码类型 | type   | 固定 lzrwfjx                              |
| 颜色     | color  | #000000格式                               |
| 坐标点    | points | 格式：{lon: 111, lat:22,  height: 10000}[] |

<br />

 src/App.js

@@ -24,6 +24,7 @@
import ExampleDefaultMap2dPage from "./example/ExampleDefaultMap2dPage";
import ExampleGetPointsPage from "./example/ExampleGetPointsPage";
import ExampleSelectPage from "./example/ExampleSelectPage";
import ExampleXzxxPage from "./example/ExampleXzxxPage";

function App() {
    return (
@@ -50,6 +51,7 @@
                    <Route path="/example/defaultMap2d" exact component={ExampleDefaultMap2dPage}/>
                    <Route path="/example/getPoints" exact component={ExampleGetPointsPage}/>
                    <Route path="/example/select" exact component={ExampleSelectPage}/>
                    <Route path="/example/xzxx" exact component={ExampleXzxxPage}/>
                    <Route path="/doc" exact component={DocPage}/>
                    <Route path="/doc/:page" exact component={DocPage}/>
                    <Route path="/test" exact component={TestPage}/>

 src/example/ExamplePage.js

@@ -78,6 +78,7 @@
                    <li><NavLink to='/example/defaultMap2d'>默认2D</NavLink></li>
                    <li><NavLink to='/example/getPoints'>动态获取坐标</NavLink></li>
                    <li><NavLink to='/example/select'>军标选择</NavLink></li>
                    <li><NavLink to='/example/xzxx'>选中、X图标</NavLink></li>
                </ul>
                <div className={"button_wrapper"}>


 src/example/ExampleXzxxPage.js

New file
@@ -0,0 +1,209 @@
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>
        )
    }
}