From e4bcf389adcaf5c93e182ad7485e49c305b149ff Mon Sep 17 00:00:00 2001
From: sbjw <sbjw.happy@163.com>
Date: Wed, 08 Apr 2026 10:09:53 +0000
Subject: [PATCH] 修改样例
---
public/example/ExampleDrawDyPlantPage.md | 295 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 295 insertions(+), 0 deletions(-)
diff --git a/public/example/ExampleDrawDyPlantPage.md b/public/example/ExampleDrawDyPlantPage.md
new file mode 100644
index 0000000..ef6691e
--- /dev/null
+++ b/public/example/ExampleDrawDyPlantPage.md
@@ -0,0 +1,295 @@
+
+### ExampleDrawDyPlantPage 代码
+
+```jsx
+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/ExampleDrawDyPlantPage.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>
+ )
+ }
+}
+
+
+
+```
--
Gitblit v1.9.3