ExampleDrawDy2Page 代码
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>
)
}
}
