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 ExampleDrawDyPlantPage extends Component {
|
|
|
optionObjs = {
|
"飞行详标": {
|
allowPicking: false,
|
bz: true,
|
bzlx: 'detail',
|
jbwb: 'P:00019',
|
xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
|
type: "2010",
|
// showHj: false,
|
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]]
|
},
|
}
|
|
drawOps = [];
|
timer = null;
|
|
constructor(props) {
|
super(props);
|
this.state = {
|
htmlString: '<h3>正在加载中...</h3>',
|
rate: 1000,
|
drawCount: 300
|
};
|
}
|
|
componentDidMount() {
|
fetch('./example/ExampleDrawDyPage.md')
|
.then(response => response.text())
|
.then(mdText => {
|
this.setState({htmlString: window.marked.parse(mdText)});
|
});
|
}
|
|
componentWillUnmount() {
|
this.stopTimer();
|
}
|
|
|
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 % 100 == 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>
|
)
|
}
|
}
|
