From b81ea6c48de42a6d64d7bb8d6483ac9aa0273e43 Mon Sep 17 00:00:00 2001
From: sbjw <sbjw.happy@163.com>
Date: Fri, 17 Oct 2025 08:00:31 +0000
Subject: [PATCH] 发布1.0.25版本 1、map2d参数 ，未有异常 2、雷达对目标探测标绘、通信畅通区域标绘、通信网标绘、掩护区域标绘功能修复 3、绘图的drawEnd返回两次的问题。 4、增加动态取点的样例 5、showDefaultLayer调整为false 6、增加bzColor属性，用于调整详标简标文本的颜色
---
public/example/ExampleAggregatorPage.md | 109 +++++++++++++
public/example/ExampleSimpleEventPage.md | 62 +++++++
src/example/ExampleDefaultMap2dPage.js | 47 +++++
src/example/ExamplePage.js | 2
public/example/ExampleDefaultSelectPage.md | 2
public/example/ExampleGetPointsPage.md | 66 ++++++++
public/example/ExampleFlyPage.md | 5
src/example/ExampleDrawPage.js | 16 +
src/example/ExampleFlyPage.js | 5
public/example/ExampleDefaultMap2dPage.md | 53 ++++++
package.json | 2
src/App.js | 4
src/example/ExampleGetPointsPage.js | 60 +++++++
public/example/ExampleDynamicBlcPage.md | 2
public/example/ExampleDrawPage.md | 24 ++
15 files changed, 446 insertions(+), 13 deletions(-)
diff --git a/package.json b/package.json
index 4318e59..d75b5d4 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"@ant-design/icons": "^4.0.0",
"antd": "^4.24.16",
"echarts": "^5.6.0",
- "iclient3d-plot-diy": "^1.0.24",
+ "iclient3d-plot-diy": "^1.0.25",
"iclient3d-plot-diy-attachment": "^1.0.2",
"jquery": "^3.7.1",
"react-draggable": "^3.3.2",
diff --git a/public/example/ExampleAggregatorPage.md b/public/example/ExampleAggregatorPage.md
new file mode 100644
index 0000000..8a16622
--- /dev/null
+++ b/public/example/ExampleAggregatorPage.md
@@ -0,0 +1,109 @@
+
+### ExampleAggregatorPage 代码
+
+```jsx
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import {GIS} from "iclient3d-plot-diy";
+
+export default class ExampleAggregatorPage extends Component {
+
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ fetch('./example/ExampleAggregatorPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+
+ const randomPoints = this.generateRandomPointsInRadius(35.9042, 112.4074, 10, 200);
+
+ let options = [];
+ for (let i = 0; i < randomPoints.length; i++) {
+ options.push({
+ type: "2002",
+ useModify: false,
+ lon: randomPoints[i].lng,
+ lat: randomPoints[i].lat,
+ });
+ }
+ this.mapFunction.mapApiService.showDrawDatas(options);
+ }
+
+ /**
+ * 生成指定中心点周围100公里内的2000个随机点
+ * @param {number} centerLat - 中心点纬度（度）
+ * @param {number} centerLng - 中心点经度（度）
+ * @param {number} radiusKm - 半径（公里）
+ * @param {number} count - 生成点数
+ * @returns {Array<{lat: number, lng: number}>} 随机点数组
+ */
+ generateRandomPointsInRadius(centerLat, centerLng, radiusKm = 100, count = 2000) {
+ const points = [];
+ const earthRadius = 6371; // 地球半径（公里）
+
+ for (let i = 0; i < count; i++) {
+ // 1. 生成随机方向（0-2π）
+ const angle = Math.random() * 2 * Math.PI;
+
+ // 2. 生成随机距离（考虑平方根确保均匀分布）
+ const distance = Math.sqrt(Math.random()) * radiusKm;
+
+ // 3. 将距离转换为弧度
+ const distanceRad = distance / earthRadius;
+
+ // 4. 计算新点坐标（哈弗辛公式）
+ const latRad = centerLat * Math.PI / 180;
+ const lngRad = centerLng * Math.PI / 180;
+
+ const newLat = Math.asin(
+ Math.sin(latRad) * Math.cos(distanceRad) +
+ Math.cos(latRad) * Math.sin(distanceRad) * Math.cos(angle)
+ );
+
+ const newLng = lngRad + Math.atan2(
+ Math.sin(angle) * Math.sin(distanceRad) * Math.cos(latRad),
+ Math.cos(distanceRad) - Math.sin(latRad) * Math.sin(newLat)
+ );
+
+ // 5. 转换为度数并存储
+ points.push({
+ lat: newLat * 180 / Math.PI,
+ lng: newLng * 180 / Math.PI
+ });
+ }
+
+ return points;
+ }
+
+ render() {
+ return (
+ <div className={"example_draw_container"}>
+ <h3>自动聚合</h3>
+ <div className={"map_wrapper"}>
+ <GIS refs={e => {
+ this.mapFunction = e
+ }}
+ useSvgIcon={true}
+ mapRef={this}
+ global={[112, 35, 113, 36]}
+ />
+ </div>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
+
+```
diff --git a/public/example/ExampleDefaultMap2dPage.md b/public/example/ExampleDefaultMap2dPage.md
new file mode 100644
index 0000000..41d1224
--- /dev/null
+++ b/public/example/ExampleDefaultMap2dPage.md
@@ -0,0 +1,53 @@
+
+### ExampleDefaultMap2dPage 代码
+
+```jsx
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import {GIS} from "iclient3d-plot-diy";
+
+
+export default class ExampleDefaultMap2dPage extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ fetch('./example/ExampleDefaultMap2dPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+ }
+
+ render() {
+ return (
+ <div className={"example_draw_container"}>
+ <h3>军标绘制拨盘功能</h3>
+ <div className={"map_wrapper"}>
+ <GIS refs={
+ e => {
+ this.mapFunction = e
+ }
+ }
+ plotUrl={this.state.plotUrl}
+ mapRef={this}
+ showDefaultLayer={false}
+ map2D={true}
+ />
+ </div>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
+
+```
diff --git a/public/example/ExampleDefaultSelectPage.md b/public/example/ExampleDefaultSelectPage.md
index 50acd66..e6029c6 100644
--- a/public/example/ExampleDefaultSelectPage.md
+++ b/public/example/ExampleDefaultSelectPage.md
@@ -4,7 +4,7 @@
```jsx
import React, {Component} from 'react'
import './ExampleFwyPage.css'
-import {Bp, GIS} from "iclient3d-plot-diy";
+import {Bp, GIS} from "../iclient3d-plot-diy";
import {Button} from "antd";
export default class ExampleDefaultSelectPage extends Component {
diff --git a/public/example/ExampleDrawPage.md b/public/example/ExampleDrawPage.md
index 6b561db..d2225de 100644
--- a/public/example/ExampleDrawPage.md
+++ b/public/example/ExampleDrawPage.md
@@ -39,7 +39,7 @@
bz: true,
bzlx: 'simple',
jbwb: "P:00019",
- type: "fx",
+ type: "2010",
useModify: false,
lon: 102.76054539488224, lat: 31.000468100060593, height: 0,
points: [{lon: 102.76554539488224, lat: 31.000468100060593, height: 0}, {
@@ -54,7 +54,7 @@
bzlx: 'detail',
jbwb: 'P:00019',
xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
- type: "fx",
+ type: "2010",
useModify: false,
lon: 102.73054539488224, lat: 31.001068100060593, height: 0,
points: [{lon: 102.73554539488224, lat: 31.001068100060593, height: 0}, {
@@ -255,6 +255,19 @@
}
};
+ showOptions2 = () => {
+
+ this.mapFunction.mapApiService.showDrawDatas([{
+ type: 'lddkgrps',
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
+ useModify: false
+ }]);
+
+ }
+
async draw(option) {
this.closeUpdate();
@@ -263,7 +276,10 @@
delete option.lon;
delete option.lat;
delete option.height;
- let p = await this.mapFunction.mapApiService.draw(option)
+ let p = await this.mapFunction.mapApiService.draw(option);
+ p.drawEnd.subscribe(value => {
+ // alert(p.export());
+ })
this.drawOps.push(p);
}
@@ -408,12 +424,14 @@
this.mapFunction = e
}
}
+ useSvgIcon={true}
iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]}
plotUrl={this.state.plotUrl}
mapRef={this}
showDefaultLayer={true}
/>
</div>
+ <Button type="primary" onClick={this.showOptions2.bind(this)}>2222</Button>
<Button type="primary" onClick={this.showOptions.bind(this)}>显示已有标绘数据</Button>
{buttons}
<Button type="primary" onClick={this.export.bind(this)}>导出绘制配置</Button>
diff --git a/public/example/ExampleDynamicBlcPage.md b/public/example/ExampleDynamicBlcPage.md
index c67e769..a44d82c 100644
--- a/public/example/ExampleDynamicBlcPage.md
+++ b/public/example/ExampleDynamicBlcPage.md
@@ -48,7 +48,7 @@
render() {
return (
<div className={"example_draw_container"}>
- <h3>切换比例尺</h3>
+ <h3>动态比例尺</h3>
<div className={"map_wrapper"}>
<GIS refs={(e) => this.mapFunction = e}
plotUrl={this.state.plotUrl}
diff --git a/public/example/ExampleFlyPage.md b/public/example/ExampleFlyPage.md
index 41dc89a..f2d45b0 100644
--- a/public/example/ExampleFlyPage.md
+++ b/public/example/ExampleFlyPage.md
@@ -4,9 +4,8 @@
```jsx
import React, {Component} from 'react'
import './ExampleDrawPage.css'
-import {GIS} from "iclient3d-plot-diy";
+import {GIS, Bp} from "../iclient3d-plot-diy";
import {interval, take} from "rxjs";
-import {Bp} from "iclient3d-plot-diy";
const Cesium = window['Cesium'];
@@ -73,7 +72,7 @@
return {
lon: Cesium.Math.toDegrees(car.longitude),
lat: Cesium.Math.toDegrees(car.latitude),
- height: car.height
+ height: 5000
};
});
diff --git a/public/example/ExampleGetPointsPage.md b/public/example/ExampleGetPointsPage.md
new file mode 100644
index 0000000..d75c6fd
--- /dev/null
+++ b/public/example/ExampleGetPointsPage.md
@@ -0,0 +1,66 @@
+
+### ExampleGetPointsPage 代码
+
+```jsx
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import {GIS} from "iclient3d-plot-diy";
+import {Button} from "antd";
+
+
+export default class ExampleGetPointsPage extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ fetch('./example/ExampleGetPointsPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+ }
+
+ async getPoints() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "0",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(`lon: ${c.lon}, lat: ${c.lat}, height: ${c.height}`);
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ })
+ }
+
+ render() {
+ return (
+ <div className={"example_draw_container"}>
+ <h3>军标绘制拨盘功能</h3>
+ <div className={"map_wrapper"}>
+ <GIS refs={
+ e => {
+ this.mapFunction = e
+ }
+ }
+ plotUrl={this.state.plotUrl}
+ mapRef={this}
+ showDefaultLayer={false}
+ />
+ </div>
+ <Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
+
+```
diff --git a/public/example/ExampleSimpleEventPage.md b/public/example/ExampleSimpleEventPage.md
new file mode 100644
index 0000000..4156a3d
--- /dev/null
+++ b/public/example/ExampleSimpleEventPage.md
@@ -0,0 +1,62 @@
+
+### ExampleSimpleEventPage 代码
+
+```jsx
+import React, {Component} from 'react'
+import './CommonExample.css'
+import {GIS} from "iclient3d-plot-diy";
+
+export default class ExampleSimpleEventPage extends Component {
+ drawOps = [];
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ this.showData();
+
+ fetch('./example/ExampleSimpleEventPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+ //监听拨盘事件
+ }
+
+ showData() {
+ this.mapFunction.mapApiService.mapClickEvent.addEventListener((id, primitive, isPoint) => {
+ alert(id);
+ }, this);
+ this.mapFunction.mapApiService.mapRightClickEvent.addEventListener((id, primitive, isPoint) => {
+ alert(id);
+ }, this);
+ }
+
+ render() {
+ return (
+ <div className={"example_fwy_container"}>
+ <h3>自定义事件</h3>
+ <div className={"map_wrapper"}>
+ <GIS refs={e => {
+ this.mapFunction = e
+ }}
+ plotUrl={this.state.plotUrl}
+ mapRef={this}
+ showDefaultLayer={true}
+ />
+ </div>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
+
+```
diff --git a/src/App.js b/src/App.js
index fc77ca4..8fc96b5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,8 @@
import ExampleDynamicDlcPage from "./example/ExampleDynamicBlcPage";
import ExampleSimpleEventPage from "./example/ExampleSimpleEventPage";
import ExampleAggregatorPage from "./example/ExampleAggregatorPage";
+import ExampleDefaultMap2dPage from "./example/ExampleDefaultMap2dPage";
+import ExampleGetPointsPage from "./example/ExampleGetPointsPage";
function App() {
return (
@@ -44,6 +46,8 @@
<Route path="/example/simpleEvent" exact component={ExampleSimpleEventPage}/>
<Route path="/example/dynamicBlc" exact component={ExampleDynamicDlcPage}/>
<Route path="/example/aggregator" exact component={ExampleAggregatorPage}/>
+ <Route path="/example/defaultMap2d" exact component={ExampleDefaultMap2dPage}/>
+ <Route path="/example/getPoints" exact component={ExampleGetPointsPage}/>
<Route path="/doc" exact component={DocPage}/>
<Route path="/doc/:page" exact component={DocPage}/>
<Route path="/test" exact component={TestPage}/>
diff --git a/src/example/ExampleDefaultMap2dPage.js b/src/example/ExampleDefaultMap2dPage.js
new file mode 100644
index 0000000..096a739
--- /dev/null
+++ b/src/example/ExampleDefaultMap2dPage.js
@@ -0,0 +1,47 @@
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import {GIS} from "iclient3d-plot-diy";
+
+
+export default class ExampleDefaultMap2dPage extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ fetch('./example/ExampleDefaultMap2dPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+ }
+
+ render() {
+ return (
+ <div className={"example_draw_container"}>
+ <h3>军标绘制拨盘功能</h3>
+ <div className={"map_wrapper"}>
+ <GIS refs={
+ e => {
+ this.mapFunction = e
+ }
+ }
+ plotUrl={this.state.plotUrl}
+ mapRef={this}
+ showDefaultLayer={false}
+ map2D={true}
+ />
+ </div>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
diff --git a/src/example/ExampleDrawPage.js b/src/example/ExampleDrawPage.js
index 4e77aac..b38f919 100644
--- a/src/example/ExampleDrawPage.js
+++ b/src/example/ExampleDrawPage.js
@@ -251,6 +251,19 @@
}
};
+ showOptions2 = () => {
+
+ this.mapFunction.mapApiService.showDrawDatas([{
+ type: 'lddkgrps',
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
+ useModify: false
+ }]);
+
+ }
+
async draw(option) {
this.closeUpdate();
@@ -261,7 +274,7 @@
delete option.height;
let p = await this.mapFunction.mapApiService.draw(option);
p.drawEnd.subscribe(value => {
- alert(p.export());
+ // alert(p.export());
})
this.drawOps.push(p);
}
@@ -414,6 +427,7 @@
showDefaultLayer={true}
/>
</div>
+ <Button type="primary" onClick={this.showOptions2.bind(this)}>2222</Button>
<Button type="primary" onClick={this.showOptions.bind(this)}>显示已有标绘数据</Button>
{buttons}
<Button type="primary" onClick={this.export.bind(this)}>导出绘制配置</Button>
diff --git a/src/example/ExampleFlyPage.js b/src/example/ExampleFlyPage.js
index a99c0da..4516f7d 100644
--- a/src/example/ExampleFlyPage.js
+++ b/src/example/ExampleFlyPage.js
@@ -1,8 +1,7 @@
import React, {Component} from 'react'
import './ExampleDrawPage.css'
-import {GIS} from "iclient3d-plot-diy";
+import {GIS, Bp} from "iclient3d-plot-diy";
import {interval, take} from "rxjs";
-import {Bp} from "iclient3d-plot-diy";
const Cesium = window['Cesium'];
@@ -69,7 +68,7 @@
return {
lon: Cesium.Math.toDegrees(car.longitude),
lat: Cesium.Math.toDegrees(car.latitude),
- height: car.height
+ height: 5000
};
});
diff --git a/src/example/ExampleGetPointsPage.js b/src/example/ExampleGetPointsPage.js
new file mode 100644
index 0000000..87b8e62
--- /dev/null
+++ b/src/example/ExampleGetPointsPage.js
@@ -0,0 +1,60 @@
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import {GIS} from "iclient3d-plot-diy";
+import {Button} from "antd";
+
+
+export default class ExampleGetPointsPage extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ fetch('./example/ExampleGetPointsPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+ }
+
+ async getPoints() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "0",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(`lon: ${c.lon}, lat: ${c.lat}, height: ${c.height}`);
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ })
+ }
+
+ render() {
+ return (
+ <div className={"example_draw_container"}>
+ <h3>军标绘制拨盘功能</h3>
+ <div className={"map_wrapper"}>
+ <GIS refs={
+ e => {
+ this.mapFunction = e
+ }
+ }
+ plotUrl={this.state.plotUrl}
+ mapRef={this}
+ showDefaultLayer={false}
+ />
+ </div>
+ <Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
diff --git a/src/example/ExamplePage.js b/src/example/ExamplePage.js
index 093b42f..1777f21 100644
--- a/src/example/ExamplePage.js
+++ b/src/example/ExamplePage.js
@@ -75,6 +75,8 @@
<li><NavLink to='/example/dynamicBlc'>动态比例尺</NavLink></li>
<li><NavLink to='/example/simpleEvent'>简单事件</NavLink></li>
<li><NavLink to='/example/aggregator'>自动聚合</NavLink></li>
+ <li><NavLink to='/example/defaultMap2d'>默认2D</NavLink></li>
+ <li><NavLink to='/example/getPoints'>动态获取坐标</NavLink></li>
</ul>
<div className={"button_wrapper"}>
--
Gitblit v1.9.3