From 5d03a3c16b3df262f04f380fd38a35b7e11da8fc Mon Sep 17 00:00:00 2001
From: sbjw <sbjw.happy@163.com>
Date: Wed, 08 Apr 2026 10:00:20 +0000
Subject: [PATCH] * 1.0.56
---
src/example/ExampleDrawPage.css | 2
src/example/ExampleDrawDyPlantPage.js | 289 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/example/ExamplePage.js | 1
package.json | 2
src/App.js | 2
5 files changed, 294 insertions(+), 2 deletions(-)
diff --git a/package.json b/package.json
index 142a007..58ad27d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
"@turf/turf": "^7.2.0",
"antd": "^4.24.16",
"echarts": "^5.6.0",
- "iclient3d-plot-diy": "^1.0.55",
+ "iclient3d-plot-diy": "^1.0.56",
"iclient3d-plot-diy-attachment": "^1.0.2",
"jquery": "^3.7.1",
"react-draggable": "^3.3.2",
diff --git a/src/App.js b/src/App.js
index 4cec9b6..2b9e238 100644
--- a/src/App.js
+++ b/src/App.js
@@ -30,6 +30,7 @@
import ExampleBlinkPage from "./example/ExampleBlinkPage";
import ExampleDrawDyPage from "./example/ExampleDrawDyPage";
import ExampleDrawDy2Page from "./example/ExampleDrawDy2Page";
+import ExampleDrawDyPlantPage from "./example/ExampleDrawDyPlantPage";
function App() {
return (
@@ -62,6 +63,7 @@
<Route path="/example/blink" exact component={ExampleBlinkPage}/>
<Route path="/example/dydraw" exact component={ExampleDrawDyPage}/>
<Route path="/example/dy2draw" exact component={ExampleDrawDy2Page}/>
+ <Route path="/example/dy3draw" exact component={ExampleDrawDyPlantPage}/>
<Route path="/doc" exact component={DocPage}/>
<Route path="/doc/:page" exact component={DocPage}/>
<Route path="/test" exact component={TestPage}/>
diff --git a/src/example/ExampleDrawDyPlantPage.js b/src/example/ExampleDrawDyPlantPage.js
new file mode 100644
index 0000000..6843a2b
--- /dev/null
+++ b/src/example/ExampleDrawDyPlantPage.js
@@ -0,0 +1,289 @@
+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>
+ )
+ }
+}
+
+
diff --git a/src/example/ExampleDrawPage.css b/src/example/ExampleDrawPage.css
index 6f16ce0..53208f0 100644
--- a/src/example/ExampleDrawPage.css
+++ b/src/example/ExampleDrawPage.css
@@ -3,7 +3,7 @@
}
.example_draw_container .map_wrapper {
- height: 500px;
+ height: 700px;
}
.example_draw_container .code_wrapper {
diff --git a/src/example/ExamplePage.js b/src/example/ExamplePage.js
index 189259a..dda7f38 100644
--- a/src/example/ExamplePage.js
+++ b/src/example/ExamplePage.js
@@ -90,6 +90,7 @@
<li><NavLink to='/example/blink'>闪烁</NavLink></li>
<li><NavLink to='/example/dydraw'>移动式</NavLink></li>
<li><NavLink to='/example/dy2draw'>移动式2</NavLink></li>
+ <li><NavLink to='/example/dy3draw'>动态飞机300</NavLink></li>
</ul>
<div className={"button_wrapper"}>
--
Gitblit v1.9.3