1 files added
5 files modified
| | |
| | | "@ant-design/icons": "^4.0.0", |
| | | "antd": "^4.24.16", |
| | | "echarts": "^5.6.0", |
| | | "iclient3d-plot-diy": "^1.0.31", |
| | | "iclient3d-plot-diy": "^1.0.32", |
| | | "iclient3d-plot-diy-attachment": "^1.0.2", |
| | | "jquery": "^3.7.1", |
| | | "@turf/turf": "^7.2.0", |
| | |
| | | type: "txdkcxx2", |
| | | kcjd: 30, |
| | | kcgls: 10, |
| | | kcwb: '123123', |
| | | color: '#0059FFA3', |
| | | lon: 103.73554539488224, |
| | | lat: 31.005068100060593, |
| | |
| | | import ExampleSelectPage from "./example/ExampleSelectPage"; |
| | | import ExampleXzxxPage from "./example/ExampleXzxxPage"; |
| | | import ExampleHtmlBoardPage from "./example/ExampleHtmlBoardPage"; |
| | | import Example2DDrawUpdatePage from "./example/Example2DDrawUpdatePage"; |
| | | |
| | | function App() { |
| | | return ( |
| | |
| | | <Route path="/example/select" exact component={ExampleSelectPage}/> |
| | | <Route path="/example/xzxx" exact component={ExampleXzxxPage}/> |
| | | <Route path="/example/htmlBoard" exact component={ExampleHtmlBoardPage}/> |
| | | <Route path="/example/map2dDrawUpdate" exact component={Example2DDrawUpdatePage}/> |
| | | <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} from "antd"; |
| | | |
| | | export default class Example2DDrawUpdatePage extends Component { |
| | | |
| | | |
| | | optionObjs = { |
| | | "目标醒目": { |
| | | code: '123', |
| | | type: "2002", |
| | | xz: true, |
| | | xzColor: '#00ff00', |
| | | xx: true, |
| | | xxColor: '#ff0000', |
| | | iconColor: '#dddddd', |
| | | returnHeight: true, |
| | | useModify: false, |
| | | lon: 102.23554539488224, |
| | | lat: 31.005068100060593, |
| | | height: 0, |
| | | points: [] |
| | | }, |
| | | } |
| | | line_star |
| | | drawOps = []; |
| | | |
| | | constructor(props) { |
| | | super(props); |
| | | this.state = { |
| | | htmlString: '<h3>正在加载中...</h3>', |
| | | plotText: '' |
| | | }; |
| | | } |
| | | |
| | | componentDidMount() { |
| | | fetch('./example/Example2DDrawUpdatePage.md') |
| | | .then(response => response.text()) |
| | | .then(mdText => { |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | this.showOptions(); |
| | | |
| | | let index = 0; |
| | | let f = () => { |
| | | index++; |
| | | this.mapFunction.mapApiService.updateDraw('123', { |
| | | lon: 102.23554539488224, |
| | | lat: 31.005068100060593, |
| | | height: index * 1000 |
| | | }) |
| | | let dd = this.mapFunction.mapApiService.exportDraw('123'); |
| | | this.setState({ |
| | | plotText : JSON.stringify(dd) |
| | | }); |
| | | if (index < 10) { |
| | | setTimeout(f, 1000) |
| | | } |
| | | } |
| | | f(); |
| | | } |
| | | |
| | | showOptions = () => { |
| | | if (this.mapFunction) { |
| | | let options = []; |
| | | for (let key in this.optionObjs) { |
| | | options.push(this.optionObjs[key]); |
| | | } |
| | | this.mapFunction.mapApiService.showDrawDatas(options); |
| | | } |
| | | }; |
| | | |
| | | |
| | | async draw(option) { |
| | | option = JSON.parse(JSON.stringify(option)); |
| | | 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); |
| | | } |
| | | |
| | | export() { |
| | | let op = []; |
| | | let draws = this.mapFunction.mapApiService.getAllDraw(); |
| | | for (let d of draws) { |
| | | let dd = this.mapFunction.mapApiService.exportDraw(d.code); |
| | | if (dd) { |
| | | op.push(dd); |
| | | } |
| | | } |
| | | console.log(op); |
| | | } |
| | | |
| | | render() { |
| | | let buttons = []; |
| | | let obs = JSON.parse(JSON.stringify(this.optionObjs)); |
| | | for (let key in obs) { |
| | | let option = obs[key]; |
| | | buttons.push(<Button type="primary" onClick={this.draw.bind(this, option)} key={key}>{key}</Button>); |
| | | } |
| | | |
| | | return ( |
| | | <div className={"example_draw_container"}> |
| | | <h3>军标绘制/展示已有的军标数据</h3> |
| | | <div className={"map_wrapper"}> |
| | | <GIS refs={ |
| | | e => { |
| | | this.mapFunction = e |
| | | } |
| | | } |
| | | useSvgIcon={true} |
| | | iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]} |
| | | plotUrl={this.state.plotUrl} |
| | | mapRef={this} |
| | | map2D={true} |
| | | showDefaultLayer={false} |
| | | /> |
| | | </div> |
| | | {this.state.plotText} |
| | | <div className={"code_wrapper"}> |
| | | <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div> |
| | | </div> |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | |
| | |
| | | <li><NavLink to='/example/select'>军标选择</NavLink></li> |
| | | <li><NavLink to='/example/xzxx'>选中、X图标</NavLink></li> |
| | | <li><NavLink to='/example/htmlBoard'>Html标牌</NavLink></li> |
| | | <li><NavLink to='/example/map2dDrawUpdate'>2d画图更新</NavLink></li> |
| | | </ul> |
| | | <div className={"button_wrapper"}> |
| | | |
| | |
| | | "双色线": { |
| | | type: "line", |
| | | bklx: 'double', |
| | | bkkd: 10, |
| | | color: '#64c324', |
| | | color2: '#6932cc', |
| | | useModify: false, |
| | |
| | | }, |
| | | "通信抗测向线2": { |
| | | type: "txdkcxx2", |
| | | kcjd: 30, |
| | | kcjd: 120, |
| | | kcgls: 10, |
| | | kcwb: '123123', |
| | | color: '#0059FFA3', |
| | |
| | | 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 |
| | | } |
| | | } |
| | | line_star |
| | |
| | | .then(mdText => { |
| | | this.setState({htmlString: window.marked.parse(mdText)}); |
| | | }); |
| | | this.showOptions(); |
| | | } |
| | | |
| | | showOptions = () => { |