10 files modified
3 files added
| | |
| | | "@turf/turf": "^7.2.0", |
| | | "antd": "^4.24.16", |
| | | "echarts": "^5.6.0", |
| | | "iclient3d-plot-diy": "^1.0.49", |
| | | "iclient3d-plot-diy": "^1.0.50", |
| | | "iclient3d-plot-diy-attachment": "^1.0.2", |
| | | "jquery": "^3.7.1", |
| | | "react-draggable": "^3.3.2", |
| New file |
| | |
| | | |
| | | ### ExampleDrawDy2Page 代码 |
| | | |
| | | ```jsx |
| | | 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 ExampleDrawDy2Page extends Component { |
| | | |
| | | |
| | | optionObjs = { |
| | | "目标简标": { |
| | | allowPicking: false, |
| | | code: '123123', |
| | | bz: true, |
| | | bzColor: '#e000ff', |
| | | bzLineColor: '#ff0000', |
| | | 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, |
| | | 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.73554539488224, lat: 31.005068100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "目标详标": { |
| | | 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}] |
| | | }, |
| | | |
| | | "干扰关系线": { |
| | | 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: 'solid', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "通信抗测向线2": { |
| | | type: "txdkcxx2", |
| | | kcjd: 120, |
| | | 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, |
| | | }] |
| | | }, |
| | | "干扰波束": { |
| | | type: "grbs", |
| | | color: '#D5013A', |
| | | useModify: false, |
| | | lon: 102.23554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | qsjd: 30, |
| | | zzjd: 130, |
| | | bj: 100 |
| | | } |
| | | } |
| | | |
| | | 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 = []; |
| | | let index = 0; |
| | | for (let key in this.optionObjs) { |
| | | if (!this.optionObjs[key].code) { |
| | | this.optionObjs[key].code = this.optionObjs[key].type + (index++); |
| | | } |
| | | 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) { |
| | | // 表示航迹 |
| | | if (one.points && one.points.length > 0) { |
| | | option = Object.assign({}, one); |
| | | one.points.push({ |
| | | lat: one.lat, |
| | | lon: one.lon, |
| | | height: one.height, |
| | | }); |
| | | one.lat = one.lat + 0.0001; |
| | | one.lon = one.lon + 0.0001; |
| | | |
| | | option = one; |
| | | } else { |
| | | one.lat = one.lat + 0.0001; |
| | | option = one; |
| | | // option = { |
| | | // lat: one.lat, |
| | | // lon: one.lon + i * 0.0001, |
| | | // height: one.height, |
| | | // allowPicking: one.allowPicking, |
| | | // } |
| | | } |
| | | } else if (one && one.points) { |
| | | one.points = one.points.map(point => { |
| | | return { |
| | | lat: point.lat, |
| | | lon: point.lon + i * 0.0001, |
| | | height: point.height, |
| | | } |
| | | }) |
| | | option = one; |
| | | } |
| | | |
| | | |
| | | if (i % 10 == 0) { |
| | | this.mapFunction.mapApiService.removeDraw(one.code); |
| | | this.mapFunction.mapApiService.showDrawDatas([one]); |
| | | } else { |
| | | 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 |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | 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> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | ``` |
| New file |
| | |
| | | |
| | | ### ExampleDrawDyPage 代码 |
| | | |
| | | ```jsx |
| | | 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, |
| | | bzColor: '#e000ff', |
| | | bzLineColor: '#ff0000', |
| | | bzlx: 'simple', |
| | | jbwb: 'R:00017', |
| | | text: '123', |
| | | showText: true, |
| | | type: "2002", |
| | | useModify: false, |
| | | lon: 102.73054539488224, lat: 31.005468100060593, height: 0, |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "目标醒目": { |
| | | allowPicking: false, |
| | | 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.73554539488224, lat: 31.005068100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "目标详标": { |
| | | 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}] |
| | | }, |
| | | |
| | | "干扰关系线": { |
| | | 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: 'solid', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "通信抗测向线2": { |
| | | type: "txdkcxx2", |
| | | kcjd: 120, |
| | | 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, |
| | | }] |
| | | }, |
| | | "干扰波束": { |
| | | type: "grbs", |
| | | color: '#D5013A', |
| | | useModify: false, |
| | | lon: 102.23554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | qsjd: 30, |
| | | zzjd: 130, |
| | | bj: 100 |
| | | } |
| | | } |
| | | |
| | | 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 = []; |
| | | let index = 0; |
| | | for (let key in this.optionObjs) { |
| | | if (!this.optionObjs[key].code) { |
| | | this.optionObjs[key].code = this.optionObjs[key].type + ( index ++ ); |
| | | } |
| | | 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) { |
| | | // 表示航迹 |
| | | if (one.points) { |
| | | option = { |
| | | points: one.points.map(point => { |
| | | return { |
| | | lat: point.lat, |
| | | lon: point.lon + i * 0.0001, |
| | | height: point.height, |
| | | } |
| | | }), |
| | | allowPicking: one.allowPicking, |
| | | } |
| | | } else { |
| | | 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 |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | 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> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | ``` |
| | |
| | | |
| | | optionObjs = { |
| | | "目标简标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | code: '123123', |
| | | bz: true, |
| | | bzlx: 'simple', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "目标详标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'R:00017', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行简标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | bzlx: 'simple', |
| | | jbwb: "P:00019", |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行详标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'P:00019', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗侦察区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddkzcqy", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗干扰波束": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'lddkgrps', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗测向线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddkcxx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对抗关系": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddkgx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对目标探测": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddmbtc", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗侦察区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "txdkzcqy", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗干扰波束": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "txdkgrps", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗测向线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "txdkcxx", |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | points: [] |
| | | }, |
| | | "通信畅通区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'txctqy', |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | }, |
| | | "通信网标绘": { |
| | | type: "txw", |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | useModify: false, |
| | | lon: 102.70854539488224, lat: 31.0098468100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "光电对抗侦察区域": { |
| | | type: 'gddkzcqy', |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | | zzjd: 360, |
| | |
| | | useModify: false, |
| | | }, |
| | | "光电有源对抗干扰波束": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'gdyydkgrbs', |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "漫反射干扰区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'mfsgrqy', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | '烟幕形成区域': { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'ymxcqy', |
| | | points: [{lon: 102.64984, lat: 30.99237, height: 0}, |
| | | {lon: 102.66012682459443, lat: 30.995109020954718, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "掩护区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'yhqy', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.65927322610115, lat: 31.01540811637356, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "协同关系": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'xtgx', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}], |
| | | useModify: false, |
| | | }, |
| | | "干扰线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'grx', |
| | | points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}], |
| | | useModify: false |
| | | }, |
| | | "预警线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'yjx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}] |
| | | }, |
| | | "目标分配线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'mbfpx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}] |
| | | }, |
| | | "目标醒目": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | xz: true, |
| | | bzlx: 'simple', |
| | |
| | | this.mapFunction = e |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | useSvgIcon={true} |
| | | iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]} |
| | | plotUrl={this.state.plotUrl} |
| | |
| | | "code": "ccccc", |
| | | "bzlx": "simple", |
| | | "jbwb": "R:00017", |
| | | "xbwb": "R:00017312312\n123123", |
| | | "type": "2010", |
| | | "useModify": false, |
| | | "lon": arr[0].lon, |
| | | "lat": arr[0].lat, |
| | | clampToGround: false, |
| | | xz: true, |
| | | "height": arr[0].height, |
| | | points: [] |
| | |
| | | |
| | | interval(300).pipe(take(120)).subscribe(number => { |
| | | this.mapFunction.mapApiService.updateDraw("ccccc", { |
| | | clampToGround: false, |
| | | lon: arr[number].lon, |
| | | lat: arr[number].lat, |
| | | height: arr[number].height, |
| | |
| | | lat: 31.005468100060593, |
| | | height: 0, |
| | | points: [], |
| | | text: '123', |
| | | showText: true, |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "目标醒目": { |
| | |
| | | bzlx: 'simple', |
| | | jbwb: 'R:00017', |
| | | xz: true, |
| | | text: '333333', |
| | | showText: true, |
| | | xzColor: '#00ff00', |
| | | xx: true, |
| | | xxColor: '#ff0000', |
| | |
| | | "单色线": { |
| | | type: "line", |
| | | bklx: 'solid', |
| | | bkkd: 2, |
| | | color: '#e30000', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.72554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.72554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | color2: '#e30000', |
| | | color: '#babaff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | "双色线2": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | color2: '#e30000', |
| | | color: '#baffba', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lon: 103.74554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lon: 104.74554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | |
| | | this.mapFunction = e |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | useSvgIcon={true} |
| | | iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]} |
| | | plotUrl={this.state.plotUrl} |
| | |
| | | import React from 'react'; |
| | | import MainPage from "./MainPage"; |
| | | import FirstPage from "./FirstPage"; |
| | | import ExamplePage from "./example/ExamplePage"; |
| | | import {ExamplePage} from "./example/ExamplePage"; |
| | | import ExampleBhPage from "./example/ExampleBhPage"; |
| | | import ExampleCustomToolbarPage from "./example/ExampleCustomToolbarPage"; |
| | | import ExampleI18nPage from "./example/ExampleI18nPage"; |
| | |
| | | import Example2DDrawUpdatePage from "./example/Example2DDrawUpdatePage"; |
| | | import ExampleBlinkPage from "./example/ExampleBlinkPage"; |
| | | import ExampleDrawDyPage from "./example/ExampleDrawDyPage"; |
| | | import ExampleDrawDy2Page from "./example/ExampleDrawDy2Page"; |
| | | |
| | | function App() { |
| | | return ( |
| | |
| | | <Route path="/example/map2dDrawUpdate" exact component={Example2DDrawUpdatePage}/> |
| | | <Route path="/example/blink" exact component={ExampleBlinkPage}/> |
| | | <Route path="/example/dydraw" exact component={ExampleDrawDyPage}/> |
| | | <Route path="/example/dy2draw" exact component={ExampleDrawDy2Page}/> |
| | | <Route path="/doc" exact component={DocPage}/> |
| | | <Route path="/doc/:page" exact component={DocPage}/> |
| | | <Route path="/test" exact component={TestPage}/> |
| New file |
| | |
| | | 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 ExampleDrawDy2Page extends Component { |
| | | |
| | | |
| | | optionObjs = { |
| | | "目标简标": { |
| | | allowPicking: false, |
| | | code: '123123', |
| | | bz: true, |
| | | bzColor: '#e000ff', |
| | | bzLineColor: '#ff0000', |
| | | 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, |
| | | 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.73554539488224, lat: 31.005068100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "目标详标": { |
| | | 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}] |
| | | }, |
| | | |
| | | "干扰关系线": { |
| | | 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: 'solid', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "通信抗测向线2": { |
| | | type: "txdkcxx2", |
| | | kcjd: 120, |
| | | 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, |
| | | }] |
| | | }, |
| | | "干扰波束": { |
| | | type: "grbs", |
| | | color: '#D5013A', |
| | | useModify: false, |
| | | lon: 102.23554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | qsjd: 30, |
| | | zzjd: 130, |
| | | bj: 100 |
| | | } |
| | | } |
| | | |
| | | 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 = []; |
| | | let index = 0; |
| | | for (let key in this.optionObjs) { |
| | | if (!this.optionObjs[key].code) { |
| | | this.optionObjs[key].code = this.optionObjs[key].type + (index++); |
| | | } |
| | | 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) { |
| | | // 表示航迹 |
| | | if (one.points && one.points.length > 0) { |
| | | option = Object.assign({}, one); |
| | | one.points.push({ |
| | | lat: one.lat, |
| | | lon: one.lon, |
| | | height: one.height, |
| | | }); |
| | | one.lat = one.lat + 0.0001; |
| | | one.lon = one.lon + 0.0001; |
| | | |
| | | option = one; |
| | | } else { |
| | | one.lat = one.lat + 0.0001; |
| | | option = one; |
| | | // option = { |
| | | // lat: one.lat, |
| | | // lon: one.lon + i * 0.0001, |
| | | // height: one.height, |
| | | // allowPicking: one.allowPicking, |
| | | // } |
| | | } |
| | | } else if (one && one.points) { |
| | | one.points = one.points.map(point => { |
| | | return { |
| | | lat: point.lat, |
| | | lon: point.lon + i * 0.0001, |
| | | height: point.height, |
| | | } |
| | | }) |
| | | option = one; |
| | | } |
| | | |
| | | |
| | | if (i % 10 == 0) { |
| | | this.mapFunction.mapApiService.removeDraw(one.code); |
| | | this.mapFunction.mapApiService.showDrawDatas([one]); |
| | | } else { |
| | | 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 |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | 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> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | |
| | |
| | | allowPicking: false, |
| | | code: '123123', |
| | | bz: true, |
| | | bzColor: '#e000ff', |
| | | bzLineColor: '#ff0000', |
| | | bzlx: 'simple', |
| | | jbwb: 'R:00017', |
| | | text: '123', |
| | | showText: true, |
| | | 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, |
| | | 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.73554539488224, lat: 31.005068100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "目标详标": { |
| | | allowPicking: 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, |
| | | |
| | | "干扰关系线": { |
| | | type: "grgxx", |
| | | color: '#ffff00', |
| | | useModify: false, |
| | | lon: 102.73554539488224, lat: 31.005068100060593, height: 0, |
| | | points: [{ |
| | | lon: 104.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 103.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | |
| | | "单色线": { |
| | | type: "line", |
| | | bklx: 'solid', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "通信抗测向线2": { |
| | | type: "txdkcxx2", |
| | | kcjd: 120, |
| | | 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, |
| | | }] |
| | | }, |
| | | "干扰波束": { |
| | | type: "grbs", |
| | | color: '#D5013A', |
| | | useModify: false, |
| | | lon: 102.23554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | qsjd: 30, |
| | | zzjd: 130, |
| | | bj: 100 |
| | | } |
| | | } |
| | | |
| | | drawOps = []; |
| | |
| | | super(props); |
| | | this.state = { |
| | | htmlString: '<h3>正在加载中...</h3>', |
| | | rate: 200, |
| | | drawCount: 150 |
| | | rate: 1000, |
| | | drawCount: 100 |
| | | }; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | let arr = []; |
| | | let index = 0; |
| | | for (let key in this.optionObjs) { |
| | | if (!this.optionObjs[key].code) { |
| | | this.optionObjs[key].code = this.optionObjs[key].type; |
| | | this.optionObjs[key].code = this.optionObjs[key].type + ( index ++ ); |
| | | } |
| | | arr.push(this.optionObjs[key]); |
| | | // if (this.optionObjs[key] && this.optionObjs[key].lat) { |
| | |
| | | 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, |
| | | // 表示航迹 |
| | | if (one.points) { |
| | | option = { |
| | | points: one.points.map(point => { |
| | | return { |
| | | lat: point.lat, |
| | | lon: point.lon + i * 0.0001, |
| | | height: point.height, |
| | | } |
| | | }), |
| | | allowPicking: one.allowPicking, |
| | | } |
| | | } else { |
| | | option = { |
| | | lat: one.lat, |
| | | lon: one.lon + i * 0.0001, |
| | | height: one.height, |
| | | allowPicking: one.allowPicking, |
| | | } |
| | | } |
| | | } else if (one && one.points) { |
| | | option = { |
| | |
| | | this.mapFunction = e |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | useSvgIcon={true} |
| | | iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]} |
| | | plotUrl={this.state.plotUrl} |
| | |
| | | |
| | | optionObjs = { |
| | | "目标简标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | code: '123123', |
| | | bz: true, |
| | | bzlx: 'simple', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "目标详标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'R:00017', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行简标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | bzlx: 'simple', |
| | | jbwb: "P:00019", |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "飞行详标": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | bzlx: 'detail', |
| | | jbwb: 'P:00019', |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗侦察区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddkzcqy", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗干扰波束": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'lddkgrps', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "雷达对抗测向线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddkcxx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对抗关系": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddkgx", |
| | | kcwb: "10110", |
| | | kcgls: 1, |
| | |
| | | points: [] |
| | | }, |
| | | "雷达对目标探测": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "lddmbtc", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗侦察区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "txdkzcqy", |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗干扰波束": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "txdkgrps", |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "通信对抗测向线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: "txdkcxx", |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | points: [] |
| | | }, |
| | | "通信畅通区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'txctqy', |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | |
| | | }, |
| | | "通信网标绘": { |
| | | type: "txw", |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | useModify: false, |
| | | lon: 102.70854539488224, lat: 31.0098468100060593, height: 0, |
| | | points: [] |
| | | }, |
| | | "光电对抗侦察区域": { |
| | | type: 'gddkzcqy', |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bj: 0.5, |
| | | qsjd: 0, |
| | | zzjd: 360, |
| | |
| | | useModify: false, |
| | | }, |
| | | "光电有源对抗干扰波束": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'gdyydkgrbs', |
| | | kcgls: 1, |
| | | kcjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | "漫反射干扰区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'mfsgrqy', |
| | | bj: 1, |
| | | qsjd: 30, |
| | |
| | | useModify: false, |
| | | }, |
| | | '烟幕形成区域': { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'ymxcqy', |
| | | points: [{lon: 102.64984, lat: 30.99237, height: 0}, |
| | | {lon: 102.66012682459443, lat: 30.995109020954718, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "掩护区域": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'yhqy', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.65927322610115, lat: 31.01540811637356, height: 0}, |
| | |
| | | useModify: false, |
| | | }, |
| | | "协同关系": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'xtgx', |
| | | points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0}, |
| | | {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}], |
| | | useModify: false, |
| | | }, |
| | | "干扰线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'grx', |
| | | points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}], |
| | | useModify: false |
| | | }, |
| | | "预警线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'yjx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}] |
| | | }, |
| | | "目标分配线": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | type: 'mbfpx', |
| | | useModify: false, |
| | | points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0}, |
| | | {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}] |
| | | }, |
| | | "目标醒目": { |
| | | allowPicking: false, |
| | | // allowPicking: false, |
| | | // show: false, |
| | | // clampToGround: false, |
| | | bz: true, |
| | | xz: true, |
| | | bzlx: 'simple', |
| | |
| | | this.mapFunction = e |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | useSvgIcon={true} |
| | | iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]} |
| | | plotUrl={this.state.plotUrl} |
| | |
| | | "code": "ccccc", |
| | | "bzlx": "simple", |
| | | "jbwb": "R:00017", |
| | | "xbwb": "R:00017312312\n123123", |
| | | "type": "2010", |
| | | "useModify": false, |
| | | "lon": arr[0].lon, |
| | | "lat": arr[0].lat, |
| | | clampToGround: false, |
| | | xz: true, |
| | | "height": arr[0].height, |
| | | points: [] |
| | |
| | | |
| | | interval(300).pipe(take(120)).subscribe(number => { |
| | | this.mapFunction.mapApiService.updateDraw("ccccc", { |
| | | clampToGround: false, |
| | | lon: arr[number].lon, |
| | | lat: arr[number].lat, |
| | | height: arr[number].height, |
| | |
| | | import './ExamplePage.css' |
| | | import {NavLink} from "react-router-dom"; |
| | | import "./ExampleLayerPage.css"; |
| | | import {Button, Input} from "antd"; |
| | | import {Button, Input, Checkbox} from "antd"; |
| | | import {updateLanguage} from "iclient3d-plot-diy"; |
| | | |
| | | |
| | | export default class ExamplePage extends Component { |
| | | export class ExamplePage extends Component { |
| | | constructor(props) { |
| | | super(props); |
| | | this.state = { |
| | |
| | | imageUrl: localStorage.getItem('plot_image') || '', |
| | | demUrl: localStorage.getItem('plot_dem') || '', |
| | | addressSearchUrl: localStorage.getItem('addressSearchUrl') || '', |
| | | sctValue: 'true' === (localStorage.getItem('plot_dem_sct') || 'true'), |
| | | }; |
| | | } |
| | | |
| | |
| | | updateDemUrl(event) { |
| | | localStorage.setItem('plot_dem', this.state.demUrl || ''); |
| | | alert('plotUrl服务地址设置成功'); |
| | | } |
| | | |
| | | updateSctValue(event) { |
| | | localStorage.setItem('plot_dem_sct', this.state.sctValue + ''); |
| | | alert('sctValue设置成功'); |
| | | } |
| | | |
| | | updateAddressSearchUrl(event) { |
| | |
| | | <li><NavLink to='/example/map2dDrawUpdate'>2d画图更新</NavLink></li> |
| | | <li><NavLink to='/example/blink'>闪烁</NavLink></li> |
| | | <li><NavLink to='/example/dydraw'>移动式</NavLink></li> |
| | | <li><NavLink to='/example/dy2draw'>移动式2</NavLink></li> |
| | | </ul> |
| | | <div className={"button_wrapper"}> |
| | | |
| | |
| | | defaultValue={this.state['demUrl']} |
| | | onChange={(v) => this.setState({demUrl: v.target.value})} |
| | | /> |
| | | <Button type="primary" onClick={this.updateDemUrl.bind(this)}>设置</Button> |
| | | |
| | | <Checkbox |
| | | style={{marginLeft: '10px'}} |
| | | checked={this.state.sctValue} |
| | | onChange={(e) => this.setState({sctValue: e.target.checked})} |
| | | ></Checkbox>Sct |
| | | <Button type="primary" onClick={() => { |
| | | this.updateDemUrl(); |
| | | this.updateSctValue(); |
| | | }}>设置</Button> |
| | | </Input.Group> |
| | | <br/> |
| | | |
| | |
| | | lat: 31.005468100060593, |
| | | height: 0, |
| | | points: [], |
| | | text: '123', |
| | | showText: true, |
| | | iconSize: [[20, 20], [30, 30], [40, 40]] |
| | | }, |
| | | "目标醒目": { |
| | |
| | | bzlx: 'simple', |
| | | jbwb: 'R:00017', |
| | | xz: true, |
| | | text: '333333', |
| | | showText: true, |
| | | xzColor: '#00ff00', |
| | | xx: true, |
| | | xxColor: '#ff0000', |
| | |
| | | "单色线": { |
| | | type: "line", |
| | | bklx: 'solid', |
| | | bkkd: 2, |
| | | color: '#e30000', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.72554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.72554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#64c324', |
| | | color2: '#e30000', |
| | | color: '#babaff', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | |
| | | height: 0, |
| | | }] |
| | | }, |
| | | "双色线": { |
| | | "双色线2": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 4, |
| | | color: '#ff0000', |
| | | color2: '#0000ff', |
| | | color2: '#e30000', |
| | | color: '#baffba', |
| | | useModify: false, |
| | | points: [{ |
| | | lon: 103.73554539488224, |
| | | lon: 103.74554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | }, { |
| | | lon: 104.73554539488224, |
| | | lon: 104.74554539488224, |
| | | lat: 32.005068100060593, |
| | | height: 0, |
| | | }] |
| | |
| | | this.mapFunction = e |
| | | } |
| | | } |
| | | map2_5D={true} |
| | | useSvgIcon={true} |
| | | iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]} |
| | | plotUrl={this.state.plotUrl} |