| 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 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> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | |