细节整理

sbjw

18 hours ago f0351f77f11779d72b502f5244a00927c33f012b

细节整理

 src/App.js

@@ -28,6 +28,7 @@
import ExampleHtmlBoardPage from "./example/ExampleHtmlBoardPage";
import Example2DDrawUpdatePage from "./example/Example2DDrawUpdatePage";
import ExampleBlinkPage from "./example/ExampleBlinkPage";
import ExampleDrawDyPage from "./example/ExampleDrawDyPage";

function App() {
    return (
@@ -58,6 +59,7 @@
                    <Route path="/example/htmlBoard" exact component={ExampleHtmlBoardPage}/>
                    <Route path="/example/map2dDrawUpdate" exact component={Example2DDrawUpdatePage}/>
                    <Route path="/example/blink" exact component={ExampleBlinkPage}/>
                    <Route path="/example/dydraw" exact component={ExampleDrawDyPage}/>
                    <Route path="/doc" exact component={DocPage}/>
                    <Route path="/doc/:page" exact component={DocPage}/>
                    <Route path="/test" exact component={TestPage}/>

 src/example/ExampleDrawDyPage.js

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


export default class ExampleDrawDyPage extends Component {


    optionObjs = {
        "目标简标": {
            allowPicking: false,
            code: '123123',
            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]]
        },
        "目标详标": {
            allowPicking: false,
            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]]
        },
        "飞行简标": {
            allowPicking: false,
            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]]
        },
        "飞行详标": {
            allowPicking: false,
            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]]
        },
        "雷达对抗侦察区域": {
            allowPicking: false,
            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]]
        },
        "雷达对抗干扰波束": {
            allowPicking: false,
            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]]
        },
        "雷达对抗测向线": {
            allowPicking: false,
            type: "lddkcxx",
            kcwb: "10110",
            kcgls: 1,
            kcjd: 30,
            useModify: false,
            lon: 102.76054539488224, lat: 31.011068100060593, height: 0,
            points: []
        },
        "雷达对抗关系": {
            allowPicking: false,
            type: "lddkgx",
            kcwb: "10110",
            kcgls: 1,
            kcjd: 30,
            useModify: false,
            lon: 102.78054539488224,
            lat: 31.015068100060593,
            height: 0,
            points: []
        },
        "雷达对目标探测": {
            allowPicking: false,
            type: "lddmbtc",
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.71004539488224, lat: 30.990068100060593, height: 0,
            useModify: false,
        },
        "通信对抗侦察区域": {
            allowPicking: false,
            type: "txdkzcqy",
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.69804539488224, lat: 30.990068100060593, height: 0,
            useModify: false,
        },
        "通信对抗干扰波束": {
            allowPicking: false,
            type: "txdkgrps",
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.76004539488224, lat: 30.991068100060593, height: 0,
            useModify: false,
        },
        "通信对抗测向线": {
            allowPicking: false,
            type: "txdkcxx",
            kcgls: 1,
            kcjd: 30,
            kcwb: "10110",
            useModify: false,
            lon: 102.76854539488224, lat: 31.009068100060593, height: 0,
            points: []
        },
        "通信畅通区域": {
            allowPicking: false,
            type: 'txctqy',
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.71504539488224, lat: 30.980068100060593, height: 0,
            useModify: false,
        },
        "通信网标绘": {
            type: "txw",
            allowPicking: false,
            useModify: false,
            lon: 102.70854539488224, lat: 31.0098468100060593, height: 0,
            points: []
        },
        "光电对抗侦察区域": {
            type: 'gddkzcqy',
            allowPicking: false,
            bj: 0.5,
            qsjd: 0,
            zzjd: 360,
            lon: 102.69054539488224, lat: 31.0098468100060593, height: 0,
            useModify: false,
        },
        "光电有源对抗干扰波束": {
            allowPicking: false,
            type: 'gdyydkgrbs',
            kcgls: 1,
            kcjd: 30,
            lon: 102.67054539488224, lat: 31.0098468100060593, height: 0,
            useModify: false,
        },
        "漫反射干扰区域": {
            allowPicking: false,
            type: 'mfsgrqy',
            bj: 1,
            qsjd: 30,
            zzjd: 75,
            lon: 102.67054539488224, lat: 31.0028468100060593, height: 0,
            useModify: false,
        },
        '烟幕形成区域': {
            allowPicking: 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,
        },
        "掩护区域": {
            allowPicking: 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,
        },
        "协同关系": {
            allowPicking: false,
            type: 'xtgx',
            points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
                {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}],
            useModify: false,
        },
        "干扰线": {
            allowPicking: false,
            type: 'grx',
            points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}],
            useModify: false
        },
        "预警线": {
            allowPicking: false,
            type: 'yjx',
            useModify: false,
            points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}]
        },
        "目标分配线": {
            allowPicking: false,
            type: 'mbfpx',
            useModify: false,
            points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0},
                {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}]
        },
        "目标醒目": {
            allowPicking: false,
            bz: true,
            xz: true,
            bzlx: 'simple',
            jbwb: 'R:00017',
            type: "2002",
            returnHeight: true,
            useModify: false,
            lon: 102.73554539488224, lat: 31.005068100060593, height: 0,
            points: []
        },
    }

    drawOps = [];
    timer = null;

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

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


    async draw(option) {
        this.closeUpdate();
        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);
    }

    arr2;

    startTimer() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }

        let arr = [];
        for (let key in this.optionObjs) {
            if (!this.optionObjs[key].code) {
                this.optionObjs[key].code = this.optionObjs[key].type;
            }
            arr.push(this.optionObjs[key]);
            // if (this.optionObjs[key] && this.optionObjs[key].lat) {
            //     arr.push(this.optionObjs[key]);
            // }
        }
        let arr2 = [];
        for (let i = 0; i < parseInt(this.state.drawCount + ''); i++) {
            let index = i % arr.length;
            let option = JSON.parse(JSON.stringify(arr[index]));
            option.lat = arr[index].lat + i * 0.0001;
            option.lon = arr[index].lon + i * 0.0001;
            option.code = option.type + i;
            arr2.push(option);
        }
        this.mapFunction.mapApiService.showDrawDatas(arr2);
        this.arr2 = arr2;

        let i = 0;
        this.timer = setInterval(() => {
            i++;
            for (let one of arr2) {
                let option;
                if (one && one.lat) {
                    option = {
                        lat: one.lat,
                        lon: one.lon + i * 0.0001,
                        height: one.height,
                        allowPicking: one.allowPicking,
                    }
                } else if (one && one.points) {
                    option = {
                        points: one.points.map(point => {
                            return {
                                lat: point.lat,
                                lon: point.lon + i * 0.0001,
                                height: point.height,
                            }
                        }),
                        allowPicking: one.allowPicking,
                    }
                }

                this.mapFunction.mapApiService.updateDraw(one.code, option);
            }
        }, parseInt(this.state.rate + '') || 1000);
    }

    stopTimer() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
        if (this.arr2) {
            for (let one of this.arr2) {
                this.mapFunction.mapApiService.removeDraw(one.code);
            }
            this.arr2 = null;
        }
    }


    updateOption(i) {
        for (let d of this.drawOps) {
            let dd = d.export();

            let op = {};
            if (dd.jbwb) {
                op.jbwb = '更新' + i;
            }
            if (dd.bj) {
                op.bj = dd.bj + 0.01;
            }
            if (dd.kcwb) {
                op.kcwb = '更新' + i;
            }

            if (dd.lon && dd.lat) {
                dd.lon = dd.lon + 0.001;
                dd.lat = dd.lat + 0.0001;
                op.lon = dd.lon;
                op.lat = dd.lat;
            }

            if (dd.points) {
                op.points = dd.points;
                for (let point of op.points) {
                    point.lon = point.lon + 0.001;
                    point.lat = point.lat + 0.0001;
                }
            }
            this.mapFunction.mapApiService.updateDraw(d.code, op);
        }
    }

    changSize() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
        let i = 10;
        let draws = this.mapFunction.mapApiService.drawPlotObjs;
        this.timer = setInterval(() => {
            i = i + 1;
            for (let key in draws) {
                let d = draws[key];
                this.mapFunction.mapApiService.dyPlotService.changSize(d, i, i);
            }
        }, 1000);
    }

    changColor() {
        this.mapFunction.mapApiService.dyPlotService.changeLineColor("#00FFE5");
    }

    setDrawScaleOptions() {
        let options = [
            {
                scales: [0, 50],
                width: 20,
                height: 20
            },
            {
                scales: [50, 500],
                width: 32,
                height: 32
            },
            {
                scales: [500, 10000],
                width: 64,
                height: 64
            }
        ]
        this.mapFunction.mapApiService.setDrawScaleOptions(options);
        alert('设置成功！')
    }

    render() {
        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={true}
                    />
                </div>

                <p>

                    <span>条数：</span>
                    <Input
                        style={{width: '100px', display: 'inline-block'}}
                        placeholder={'请输入条数'}
                        defaultValue={this.state['drawCount']}
                        onChange={(v) => this.setState({drawCount: v.target.value})}
                    />
                </p>
                <p>

                    <span>频率（ms）：</span>
                    <Input
                        style={{width: '100px', display: 'inline-block'}}
                        placeholder={'请输入频率（ms）'}
                        defaultValue={this.state['rate']}
                        onChange={(v) => this.setState({rate: v.target.value})}
                    />
                    <br/>
                </p>
                <Button type="primary" onClick={this.startTimer.bind(this)}>开始</Button>
                <Button type="primary" onClick={this.stopTimer.bind(this)}>结束</Button>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}



 src/example/ExamplePage.js

@@ -82,6 +82,7 @@
                    <li><NavLink to='/example/htmlBoard'>Html标牌</NavLink></li>
                    <li><NavLink to='/example/map2dDrawUpdate'>2d画图更新</NavLink></li>
                    <li><NavLink to='/example/blink'>闪烁</NavLink></li>
                    <li><NavLink to='/example/dydraw'>移动式</NavLink></li>
                </ul>
                <div className={"button_wrapper"}>