ExampleSelectPage 代码
import React, {Component} from 'react'
import './ExampleDrawPage.css'
import './ExampleSelectPage.css'
import {GIS} from "iclient3d-plot-diy";
import {Button} from "antd";
export class ExampleSelectPage extends Component {
optionObjs = {
"目标简标": {
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]]
},
"目标详标": {
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]]
},
"飞行简标": {
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]]
},
"飞行详标": {
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]]
},
"雷达对抗侦察区域": {
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]]
},
"雷达对抗干扰波束": {
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]]
},
"雷达对抗测向线": {
type: "lddkcxx",
kcwb: "10110",
kcgls: 1,
kcjd: 30,
useModify: false,
lon: 102.76054539488224, lat: 31.011068100060593, height: 0,
points: []
},
"雷达对抗关系": {
type: "lddkgx",
kcwb: "10110",
kcgls: 1,
kcjd: 30,
useModify: false,
lon: 102.78054539488224,
lat: 31.015068100060593,
height: 0,
points: []
},
"雷达对目标探测": {
type: "lddmbtc",
bj: 0.5,
qsjd: 0,
zzjd: 360,
lon: 102.71004539488224, lat: 30.990068100060593, height: 0,
useModify: false,
},
"通信对抗侦察区域": {
type: "txdkzcqy",
bj: 0.5,
qsjd: 0,
zzjd: 360,
lon: 102.69804539488224, lat: 30.990068100060593, height: 0,
useModify: false,
},
"通信对抗干扰波束": {
type: "txdkgrps",
bj: 1,
qsjd: 30,
zzjd: 75,
lon: 102.76004539488224, lat: 30.991068100060593, height: 0,
useModify: false,
},
"通信对抗测向线": {
type: "txdkcxx",
kcgls: 1,
kcjd: 30,
kcwb: "10110",
useModify: false,
lon: 102.76854539488224, lat: 31.009068100060593, height: 0,
points: []
},
"通信畅通区域": {
type: 'txctqy',
bj: 0.5,
qsjd: 0,
zzjd: 360,
lon: 102.71504539488224, lat: 30.980068100060593, height: 0,
useModify: false,
},
"通信网标绘": {
type: "txw",
useModify: false,
lon: 102.70854539488224, lat: 31.0098468100060593, height: 0,
points: []
},
"光电对抗侦察区域": {
type: 'gddkzcqy',
bj: 0.5,
qsjd: 0,
zzjd: 360,
lon: 102.69054539488224, lat: 31.0098468100060593, height: 0,
useModify: false,
},
"光电有源对抗干扰波束": {
type: 'gdyydkgrbs',
kcgls: 1,
kcjd: 30,
lon: 102.67054539488224, lat: 31.0098468100060593, height: 0,
useModify: false,
},
"漫反射干扰区域": {
type: 'mfsgrqy',
bj: 1,
qsjd: 30,
zzjd: 75,
lon: 102.67054539488224, lat: 31.0028468100060593, height: 0,
useModify: 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,
},
"掩护区域": {
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,
},
"协同关系": {
type: 'xtgx',
points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
{lon: 102.66192135373299, lat: 31.005988487769518, height: 0}],
useModify: false,
},
"干扰线": {
type: 'grx',
points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0},
{lon: 102.73983041603873, lat: 30.97504986175468, height: 0}],
useModify: false
},
"预警线": {
type: 'yjx',
useModify: false,
points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0},
{lon: 102.73983041603873, lat: 30.98004986175468, height: 0}]
},
"目标分配线": {
type: 'mbfpx',
useModify: false,
points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0},
{lon: 102.73983041603873, lat: 30.97804986175468, height: 0}]
},
"目标醒目": {
bz: true,
xz: true,
bzlx: 'simple',
jbwb: 'R:00017',
type: "2002",
returnHeight: true,
useModify: false,
lon: 102.73554539488224, lat: 31.005068100060593, height: 0,
points: []
},
}
constructor(props) {
super(props);
this.state = {
htmlString: '<h3>正在加载中...</h3>',
};
}
componentDidMount() {
let options = [];
for (let key in this.optionObjs) {
options.push(this.optionObjs[key]);
}
this.mapFunction.mapApiService.showDrawDatas(options);
this.mapFunction.mapApiService.updateModel('select')
this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
// console.log(selectedData);
document.getElementById('textarea').value = JSON.stringify(selectedData);
})
setTimeout(() => {
this.mapFunction.mapApiService.useDrawSelect('box', true)
}, 1000);
this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
console.log(selectedData);
})
fetch('./example/ExampleSelectPage.md')
.then(response => response.text())
.then(mdText => {
this.setState({htmlString: window.marked.parse(mdText)});
});
}
useSelect() {
this.mapFunction.mapApiService.updateModel('select')
}
useBoxSelect() {
this.mapFunction.mapApiService.updateModel('select')
this.mapFunction.mapApiService.useDrawSelect('box', true)
}
unBoxSelect() {
this.mapFunction.mapApiService.clearDrawSelect()
}
clearSelected() {
this.mapFunction.mapApiService.clearSelected();
}
useModify() {
this.mapFunction.mapApiService.updateModel('modify')
}
outSelected() {
this.mapFunction.mapApiService.triggerSelected(['draw_primitive_1020_'])
}
render() {
return (
<div className={"example_draw_container"}>
<h3>军标绘制拨盘功能</h3>
<div className={"map_wrapper"}>
<GIS refs={e => {
this.mapFunction = e
}}
plotUrl={this.state.plotUrl}
mapRef={this}
showDefaultLayer={true}
/>
</div>
<Button type="primary" onClick={() => this.useSelect()}>选择</Button>
<Button type="primary" onClick={() => this.useBoxSelect()}>框选</Button>
<Button type="primary" onClick={() => this.unBoxSelect()}>取消框选</Button>
<Button type="primary" onClick={() => this.clearSelected()}>清除选择</Button>
<Button type="primary" onClick={() => this.outSelected()}>外部指定选择对象</Button>
<Button type="primary" onClick={() => this.useModify()}>修改模式</Button>
<textarea id="textarea" className={"textarea"}></textarea>
<div className={"code_wrapper"}>
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
</div>
</div>
)
}
}
