From 8bda1f7325f3a990e0e96304cc14959047098fc0 Mon Sep 17 00:00:00 2001
From: sbjw <sbjw.happy@163.com>
Date: Mon, 10 Nov 2025 09:20:30 +0000
Subject: [PATCH] 增加相关样例
---
public/example/ExampleHightLightLocatePage.md | 59 +++
public/example/ExampleSelectPage.md | 321 ++++++++++++++++++++
src/example/ExampleHightLightLocatePage.js | 53 +++
src/example/ExamplePage.js | 1
public/example/ExampleGetPointsPage.md | 52 +++
public/project3d/icon/draw/框.png | 0
public/example/ExampleBlcPage.md | 5
public/example/ExampleFlyPage.md | 4
src/example/ExampleDrawPage.js | 11
src/example/ExampleFlyPage.js | 4
src/example/ExampleSelectPage.css | 4
src/example/ExampleBlcPage.js | 5
package.json | 5
src/example/ExampleGetPointsPage.js | 52 +++
src/example/ExampleSelectPage.js | 315 +++++++++++++++++++
public/example/ExampleDrawPage.md | 11
16 files changed, 878 insertions(+), 24 deletions(-)
diff --git a/package.json b/package.json
index 7be0d08..67decf5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
- "update2": "pnpm update iclient3d-plot-diy --no-save --registry https://registry.npmjs.org",
+ "update2": "npm update iclient3d-plot-diy --no-save --registry https://registry.npmjs.org",
"code-to-md": "node extract-code-to-md.js"
},
"keywords": [],
@@ -19,9 +19,10 @@
"@ant-design/icons": "^4.0.0",
"antd": "^4.24.16",
"echarts": "^5.6.0",
- "iclient3d-plot-diy": "^1.0.26",
+ "iclient3d-plot-diy": "^1.0.29",
"iclient3d-plot-diy-attachment": "^1.0.2",
"jquery": "^3.7.1",
+ "@turf/turf": "^7.2.0",
"react-draggable": "^3.3.2",
"react-router-dom": "^5.3.4",
"rxjs": "^7.8.2"
diff --git a/public/example/ExampleBlcPage.md b/public/example/ExampleBlcPage.md
index 0f59875..9d6198c 100644
--- a/public/example/ExampleBlcPage.md
+++ b/public/example/ExampleBlcPage.md
@@ -15,6 +15,7 @@
super(props);
this.state = {
htmlString: '<h3>正在加载中...</h3>',
+ scale: 0
};
}
@@ -53,6 +54,9 @@
this.setState({htmlString: window.marked.parse(mdText)});
});
//监听拨盘事件
+ this.mapFunction.addScaleListener((scale) => {
+ this.setState({scale: scale});
+ })
}
showData() {
@@ -82,6 +86,7 @@
<Button type="primary" onClick={() => this.setCameraHeightByScale(2500)}>1:2500</Button>
<Button type="primary" onClick={() => this.setCameraHeightByScale(10000)}>1:10000</Button>
<Button type="primary" onClick={() => this.setCameraHeightByScale(50000)}>1:50000</Button>
+ <span>当前比例尺: {this.state.scale}</span>
<div className={"code_wrapper"}>
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
</div>
diff --git a/public/example/ExampleDrawPage.md b/public/example/ExampleDrawPage.md
index d2225de..b408460 100644
--- a/public/example/ExampleDrawPage.md
+++ b/public/example/ExampleDrawPage.md
@@ -256,16 +256,7 @@
};
showOptions2 = () => {
-
- this.mapFunction.mapApiService.showDrawDatas([{
- type: 'lddkgrps',
- bj: 1,
- qsjd: 30,
- zzjd: 75,
- lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
- useModify: false
- }]);
-
+ this.mapFunction.mapApiService.showDrawDatas([this.optionObjs['目标简标']]);
}
diff --git a/public/example/ExampleFlyPage.md b/public/example/ExampleFlyPage.md
index d7a15e7..66dff62 100644
--- a/public/example/ExampleFlyPage.md
+++ b/public/example/ExampleFlyPage.md
@@ -85,7 +85,8 @@
"useModify": false,
"lon": arr[0].lon,
"lat": arr[0].lat,
- "height": arr[0].height || 0,
+ xz: true,
+ "height": arr[0].height,
points: []
}
this.mapFunction.mapApiService.showDrawDatas([option]);
@@ -94,6 +95,7 @@
this.mapFunction.mapApiService.updateDraw("ccccc", {
lon: arr[number].lon,
lat: arr[number].lat,
+ height: arr[number].height,
points: arr.slice(0, number)
});
});
diff --git a/public/example/ExampleGetPointsPage.md b/public/example/ExampleGetPointsPage.md
index d75c6fd..14d2099 100644
--- a/public/example/ExampleGetPointsPage.md
+++ b/public/example/ExampleGetPointsPage.md
@@ -36,6 +36,54 @@
this.mapFunction.mapApiService.removeDraw(p.code);
})
}
+ async getBox() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "box",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
+ async getLine() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "line",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
+ async getPolygon() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "polygon",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
+ async getCircle() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "circle",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
render() {
return (
@@ -53,6 +101,10 @@
/>
</div>
<Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
+ <Button type="primary" onClick={this.getBox.bind(this)}>获取box</Button>
+ <Button type="primary" onClick={this.getLine.bind(this)}>获取线</Button>
+ <Button type="primary" onClick={this.getPolygon.bind(this)}>获取面</Button>
+ <Button type="primary" onClick={this.getCircle.bind(this)}>获取圆</Button>
<div className={"code_wrapper"}>
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
</div>
diff --git a/public/example/ExampleHightLightLocatePage.md b/public/example/ExampleHightLightLocatePage.md
new file mode 100644
index 0000000..302b522
--- /dev/null
+++ b/public/example/ExampleHightLightLocatePage.md
@@ -0,0 +1,59 @@
+
+### ExampleHightLightLocatePage 代码
+
+```jsx
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import {GIS} from "iclient3d-plot-diy";
+import {Button} from "antd";
+
+
+export default class ExampleHightLightLocatePage extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ fetch('./example/ExampleHightLightLocatePage.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}
+ />
+ </div>
+ <Button type="primary" onClick={() => this.draw()}>高亮点</Button>
+ <Button type="primary" onClick={() => this.draw()}>高亮线</Button>
+ <Button type="primary" onClick={() => this.draw()}>高亮面</Button>
+ <Button type="primary" onClick={() => this.export()}>定位点</Button>
+ <Button type="primary" onClick={() => this.export()}>定位线</Button>
+ <Button type="primary" onClick={() => this.export()}>定位面</Button>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
+
+```
diff --git a/public/example/ExampleSelectPage.md b/public/example/ExampleSelectPage.md
new file mode 100644
index 0000000..a7666d1
--- /dev/null
+++ b/public/example/ExampleSelectPage.md
@@ -0,0 +1,321 @@
+
+### ExampleSelectPage 代码
+
+```jsx
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import './ExampleSelectPage.css'
+import {GIS} from "iclient3d-plot-diy";
+import {Button} from "antd";
+
+
+export class ExampleSelectPage extends Component {
+
+
+ optionObjs = {
+ "目标简标": {
+ bz: true,
+ bzlx: 'simple',
+ jbwb: 'R:00017',
+ type: "2002",
+ returnHeight: true,
+ useModify: false,
+ lon: 102.73054539488224, lat: 31.005468100060593, height: 0,
+ points: [],
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "目标详标": {
+ bz: true,
+ bzlx: 'detail',
+ jbwb: 'R:00017',
+ xbwb: "17/10/2019\n16:45:8\n9260.00-10400.00MHZ",
+ type: "2002",
+ useModify: false,
+ lon: 102.70054539488224, lat: 31.000468100060593, height: 0,
+ points: [],
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "飞行简标": {
+ bz: true,
+ bzlx: 'simple',
+ jbwb: "P:00019",
+ type: "2010",
+ useModify: false,
+ lon: 102.76054539488224, lat: 31.000468100060593, height: 0,
+ points: [{lon: 102.76554539488224, lat: 31.000468100060593, height: 0}, {
+ lon: 102.76904539488224,
+ lat: 30.992468100060593,
+ height: 0
+ }],
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "飞行详标": {
+ bz: true,
+ bzlx: 'detail',
+ jbwb: 'P:00019',
+ xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
+ type: "2010",
+ 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]]
+ },
+ "雷达对抗侦察区域": {
+ type: "lddkzcqy",
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.72004539488224, lat: 31.001068100060593, height: 0,
+ useModify: false,
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "雷达对抗干扰波束": {
+ type: 'lddkgrps',
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
+ useModify: false,
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "雷达对抗测向线": {
+ type: "lddkcxx",
+ kcwb: "10110",
+ kcgls: 1,
+ kcjd: 30,
+ useModify: false,
+ lon: 102.76054539488224, lat: 31.011068100060593, height: 0,
+ points: []
+ },
+ "雷达对抗关系": {
+ type: "lddkgx",
+ kcwb: "10110",
+ kcgls: 1,
+ kcjd: 30,
+ useModify: false,
+ lon: 102.78054539488224,
+ lat: 31.015068100060593,
+ height: 0,
+ points: []
+ },
+ "雷达对目标探测": {
+ type: "lddmbtc",
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.71004539488224, lat: 30.990068100060593, height: 0,
+ useModify: false,
+ },
+ "通信对抗侦察区域": {
+ type: "txdkzcqy",
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.69804539488224, lat: 30.990068100060593, height: 0,
+ useModify: false,
+ },
+ "通信对抗干扰波束": {
+ type: "txdkgrps",
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.76004539488224, lat: 30.991068100060593, height: 0,
+ useModify: false,
+ },
+ "通信对抗测向线": {
+ type: "txdkcxx",
+ kcgls: 1,
+ kcjd: 30,
+ kcwb: "10110",
+ useModify: false,
+ lon: 102.76854539488224, lat: 31.009068100060593, height: 0,
+ points: []
+ },
+ "通信畅通区域": {
+ type: 'txctqy',
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.71504539488224, lat: 30.980068100060593, height: 0,
+ useModify: false,
+ },
+ "通信网标绘": {
+ type: "txw",
+ useModify: false,
+ lon: 102.70854539488224, lat: 31.0098468100060593, height: 0,
+ points: []
+ },
+ "光电对抗侦察区域": {
+ type: 'gddkzcqy',
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.69054539488224, lat: 31.0098468100060593, height: 0,
+ useModify: false,
+ },
+ "光电有源对抗干扰波束": {
+ type: 'gdyydkgrbs',
+ kcgls: 1,
+ kcjd: 30,
+ lon: 102.67054539488224, lat: 31.0098468100060593, height: 0,
+ useModify: false,
+ },
+ "漫反射干扰区域": {
+ type: 'mfsgrqy',
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.67054539488224, lat: 31.0028468100060593, height: 0,
+ useModify: false,
+ },
+ '烟幕形成区域': {
+ type: 'ymxcqy',
+ points: [{lon: 102.64984, lat: 30.99237, height: 0},
+ {lon: 102.66012682459443, lat: 30.995109020954718, height: 0},
+ {lon: 102.67126799815856, lat: 30.98766239848537, height: 0},
+ {lon: 102.64984, lat: 30.983747593478107, height: 0},
+ {lon: 102.64984, lat: 30.99237, height: 0}],
+ useModify: false,
+ },
+ "掩护区域": {
+ type: 'yhqy',
+ points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
+ {lon: 102.65927322610115, lat: 31.01540811637356, height: 0},
+ {lon: 102.66192135373299, lat: 31.005988487769518, height: 0},
+ {lon: 102.64755620178961, lat: 31.00246196283815, height: 0},
+ {lon: 102.642853926199, lat: 31.012509646376447, height: 0}],
+ useModify: false,
+ },
+ "协同关系": {
+ type: 'xtgx',
+ points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
+ {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}],
+ useModify: false,
+ },
+ "干扰线": {
+ type: 'grx',
+ points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0},
+ {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}],
+ useModify: false
+ },
+ "预警线": {
+ type: 'yjx',
+ useModify: false,
+ points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0},
+ {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}]
+ },
+ "目标分配线": {
+ type: 'mbfpx',
+ useModify: false,
+ points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0},
+ {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}]
+ },
+ "目标醒目": {
+ bz: true,
+ xz: true,
+ bzlx: 'simple',
+ jbwb: 'R:00017',
+ type: "2002",
+ returnHeight: true,
+ useModify: false,
+ lon: 102.73554539488224, lat: 31.005068100060593, height: 0,
+ points: []
+ },
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+
+ let options = [];
+ for (let key in this.optionObjs) {
+ options.push(this.optionObjs[key]);
+ }
+ this.mapFunction.mapApiService.showDrawDatas(options);
+
+ this.mapFunction.mapApiService.updateModel('select')
+ this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
+ // console.log(selectedData);
+ document.getElementById('textarea').value = JSON.stringify(selectedData);
+ })
+
+ setTimeout(() => {
+ this.mapFunction.mapApiService.useDrawSelect('box', true)
+ }, 1000);
+ this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
+ console.log(selectedData);
+ })
+
+
+ fetch('./example/ExampleSelectPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+ }
+
+ useSelect() {
+ this.mapFunction.mapApiService.updateModel('select')
+ }
+
+ useBoxSelect() {
+ this.mapFunction.mapApiService.updateModel('select')
+ this.mapFunction.mapApiService.useDrawSelect('box', true)
+ }
+
+ unBoxSelect() {
+ this.mapFunction.mapApiService.clearDrawSelect()
+ }
+
+ clearSelected() {
+ this.mapFunction.mapApiService.clearSelected();
+ }
+
+ useModify() {
+ this.mapFunction.mapApiService.updateModel('modify')
+ }
+
+ outSelected() {
+ this.mapFunction.mapApiService.triggerSelected(['draw_primitive_1020_'])
+ }
+
+ 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={true}
+ />
+ </div>
+ <Button type="primary" onClick={() => this.useSelect()}>选择</Button>
+ <Button type="primary" onClick={() => this.useBoxSelect()}>框选</Button>
+ <Button type="primary" onClick={() => this.unBoxSelect()}>取消框选</Button>
+ <Button type="primary" onClick={() => this.clearSelected()}>清除选择</Button>
+ <Button type="primary" onClick={() => this.outSelected()}>外部指定选择对象</Button>
+ <Button type="primary" onClick={() => this.useModify()}>修改模式</Button>
+ <textarea id="textarea" className={"textarea"}></textarea>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
+
+```
diff --git "a/public/project3d/icon/draw/\346\241\206.png" "b/public/project3d/icon/draw/\346\241\206.png"
index ce5351a..bfda5de 100644
--- "a/public/project3d/icon/draw/\346\241\206.png"
+++ "b/public/project3d/icon/draw/\346\241\206.png"
Binary files differ
diff --git a/src/example/ExampleBlcPage.js b/src/example/ExampleBlcPage.js
index 3020f58..4db4874 100644
--- a/src/example/ExampleBlcPage.js
+++ b/src/example/ExampleBlcPage.js
@@ -11,6 +11,7 @@
super(props);
this.state = {
htmlString: '<h3>正在加载中...</h3>',
+ scale: 0
};
}
@@ -49,6 +50,9 @@
this.setState({htmlString: window.marked.parse(mdText)});
});
//监听拨盘事件
+ this.mapFunction.addScaleListener((scale) => {
+ this.setState({scale: scale});
+ })
}
showData() {
@@ -78,6 +82,7 @@
<Button type="primary" onClick={() => this.setCameraHeightByScale(2500)}>1:2500</Button>
<Button type="primary" onClick={() => this.setCameraHeightByScale(10000)}>1:10000</Button>
<Button type="primary" onClick={() => this.setCameraHeightByScale(50000)}>1:50000</Button>
+ <span>当前比例尺: {this.state.scale}</span>
<div className={"code_wrapper"}>
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
</div>
diff --git a/src/example/ExampleDrawPage.js b/src/example/ExampleDrawPage.js
index b38f919..8c59b53 100644
--- a/src/example/ExampleDrawPage.js
+++ b/src/example/ExampleDrawPage.js
@@ -252,16 +252,7 @@
};
showOptions2 = () => {
-
- this.mapFunction.mapApiService.showDrawDatas([{
- type: 'lddkgrps',
- bj: 1,
- qsjd: 30,
- zzjd: 75,
- lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
- useModify: false
- }]);
-
+ this.mapFunction.mapApiService.showDrawDatas([this.optionObjs['目标简标']]);
}
diff --git a/src/example/ExampleFlyPage.js b/src/example/ExampleFlyPage.js
index 4516f7d..640bdc5 100644
--- a/src/example/ExampleFlyPage.js
+++ b/src/example/ExampleFlyPage.js
@@ -81,7 +81,8 @@
"useModify": false,
"lon": arr[0].lon,
"lat": arr[0].lat,
- "height": arr[0].height || 0,
+ xz: true,
+ "height": arr[0].height,
points: []
}
this.mapFunction.mapApiService.showDrawDatas([option]);
@@ -90,6 +91,7 @@
this.mapFunction.mapApiService.updateDraw("ccccc", {
lon: arr[number].lon,
lat: arr[number].lat,
+ height: arr[number].height,
points: arr.slice(0, number)
});
});
diff --git a/src/example/ExampleGetPointsPage.js b/src/example/ExampleGetPointsPage.js
index 87b8e62..4d2332e 100644
--- a/src/example/ExampleGetPointsPage.js
+++ b/src/example/ExampleGetPointsPage.js
@@ -32,6 +32,54 @@
this.mapFunction.mapApiService.removeDraw(p.code);
})
}
+ async getBox() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "box",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
+ async getLine() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "line",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
+ async getPolygon() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "polygon",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
+ async getCircle() {
+
+ let p = await this.mapFunction.mapApiService.draw({
+ type: "circle",
+ });
+ p.drawEnd.subscribe(value => {
+ let c = p.export();
+ alert(JSON.stringify(c.points));
+ this.mapFunction.mapApiService.removeDraw(p.code);
+ this.mapFunction.mapApiService.showDrawDatas([c])
+ })
+ }
render() {
return (
@@ -49,6 +97,10 @@
/>
</div>
<Button type="primary" onClick={this.getPoints.bind(this)}>获取坐标点</Button>
+ <Button type="primary" onClick={this.getBox.bind(this)}>获取box</Button>
+ <Button type="primary" onClick={this.getLine.bind(this)}>获取线</Button>
+ <Button type="primary" onClick={this.getPolygon.bind(this)}>获取面</Button>
+ <Button type="primary" onClick={this.getCircle.bind(this)}>获取圆</Button>
<div className={"code_wrapper"}>
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
</div>
diff --git a/src/example/ExampleHightLightLocatePage.js b/src/example/ExampleHightLightLocatePage.js
new file mode 100644
index 0000000..88e9b3f
--- /dev/null
+++ b/src/example/ExampleHightLightLocatePage.js
@@ -0,0 +1,53 @@
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import {GIS} from "iclient3d-plot-diy";
+import {Button} from "antd";
+
+
+export default class ExampleHightLightLocatePage extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+ fetch('./example/ExampleHightLightLocatePage.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}
+ />
+ </div>
+ <Button type="primary" onClick={() => this.draw()}>高亮点</Button>
+ <Button type="primary" onClick={() => this.draw()}>高亮线</Button>
+ <Button type="primary" onClick={() => this.draw()}>高亮面</Button>
+ <Button type="primary" onClick={() => this.export()}>定位点</Button>
+ <Button type="primary" onClick={() => this.export()}>定位线</Button>
+ <Button type="primary" onClick={() => this.export()}>定位面</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 1777f21..b539121 100644
--- a/src/example/ExamplePage.js
+++ b/src/example/ExamplePage.js
@@ -77,6 +77,7 @@
<li><NavLink to='/example/aggregator'>自动聚合</NavLink></li>
<li><NavLink to='/example/defaultMap2d'>默认2D</NavLink></li>
<li><NavLink to='/example/getPoints'>动态获取坐标</NavLink></li>
+ <li><NavLink to='/example/select'>军标选择</NavLink></li>
</ul>
<div className={"button_wrapper"}>
diff --git a/src/example/ExampleSelectPage.css b/src/example/ExampleSelectPage.css
new file mode 100644
index 0000000..949a491
--- /dev/null
+++ b/src/example/ExampleSelectPage.css
@@ -0,0 +1,4 @@
+.textarea {
+ width: 100%;
+ height: 150px;
+}
diff --git a/src/example/ExampleSelectPage.js b/src/example/ExampleSelectPage.js
new file mode 100644
index 0000000..4470fae
--- /dev/null
+++ b/src/example/ExampleSelectPage.js
@@ -0,0 +1,315 @@
+import React, {Component} from 'react'
+import './ExampleDrawPage.css'
+import './ExampleSelectPage.css'
+import {GIS} from "iclient3d-plot-diy";
+import {Button} from "antd";
+
+
+export class ExampleSelectPage extends Component {
+
+
+ optionObjs = {
+ "目标简标": {
+ bz: true,
+ bzlx: 'simple',
+ jbwb: 'R:00017',
+ type: "2002",
+ returnHeight: true,
+ useModify: false,
+ lon: 102.73054539488224, lat: 31.005468100060593, height: 0,
+ points: [],
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "目标详标": {
+ bz: true,
+ bzlx: 'detail',
+ jbwb: 'R:00017',
+ xbwb: "17/10/2019\n16:45:8\n9260.00-10400.00MHZ",
+ type: "2002",
+ useModify: false,
+ lon: 102.70054539488224, lat: 31.000468100060593, height: 0,
+ points: [],
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "飞行简标": {
+ bz: true,
+ bzlx: 'simple',
+ jbwb: "P:00019",
+ type: "2010",
+ useModify: false,
+ lon: 102.76054539488224, lat: 31.000468100060593, height: 0,
+ points: [{lon: 102.76554539488224, lat: 31.000468100060593, height: 0}, {
+ lon: 102.76904539488224,
+ lat: 30.992468100060593,
+ height: 0
+ }],
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "飞行详标": {
+ bz: true,
+ bzlx: 'detail',
+ jbwb: 'P:00019',
+ xbwb: "F16-1\n美国\n16:45:56\nR:00019\nC:00019",
+ type: "2010",
+ 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]]
+ },
+ "雷达对抗侦察区域": {
+ type: "lddkzcqy",
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.72004539488224, lat: 31.001068100060593, height: 0,
+ useModify: false,
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "雷达对抗干扰波束": {
+ type: 'lddkgrps',
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.72004539488224, lat: 30.991068100060593, height: 0,
+ useModify: false,
+ iconSize: [[20, 20], [30, 30], [40, 40]]
+ },
+ "雷达对抗测向线": {
+ type: "lddkcxx",
+ kcwb: "10110",
+ kcgls: 1,
+ kcjd: 30,
+ useModify: false,
+ lon: 102.76054539488224, lat: 31.011068100060593, height: 0,
+ points: []
+ },
+ "雷达对抗关系": {
+ type: "lddkgx",
+ kcwb: "10110",
+ kcgls: 1,
+ kcjd: 30,
+ useModify: false,
+ lon: 102.78054539488224,
+ lat: 31.015068100060593,
+ height: 0,
+ points: []
+ },
+ "雷达对目标探测": {
+ type: "lddmbtc",
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.71004539488224, lat: 30.990068100060593, height: 0,
+ useModify: false,
+ },
+ "通信对抗侦察区域": {
+ type: "txdkzcqy",
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.69804539488224, lat: 30.990068100060593, height: 0,
+ useModify: false,
+ },
+ "通信对抗干扰波束": {
+ type: "txdkgrps",
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.76004539488224, lat: 30.991068100060593, height: 0,
+ useModify: false,
+ },
+ "通信对抗测向线": {
+ type: "txdkcxx",
+ kcgls: 1,
+ kcjd: 30,
+ kcwb: "10110",
+ useModify: false,
+ lon: 102.76854539488224, lat: 31.009068100060593, height: 0,
+ points: []
+ },
+ "通信畅通区域": {
+ type: 'txctqy',
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.71504539488224, lat: 30.980068100060593, height: 0,
+ useModify: false,
+ },
+ "通信网标绘": {
+ type: "txw",
+ useModify: false,
+ lon: 102.70854539488224, lat: 31.0098468100060593, height: 0,
+ points: []
+ },
+ "光电对抗侦察区域": {
+ type: 'gddkzcqy',
+ bj: 0.5,
+ qsjd: 0,
+ zzjd: 360,
+ lon: 102.69054539488224, lat: 31.0098468100060593, height: 0,
+ useModify: false,
+ },
+ "光电有源对抗干扰波束": {
+ type: 'gdyydkgrbs',
+ kcgls: 1,
+ kcjd: 30,
+ lon: 102.67054539488224, lat: 31.0098468100060593, height: 0,
+ useModify: false,
+ },
+ "漫反射干扰区域": {
+ type: 'mfsgrqy',
+ bj: 1,
+ qsjd: 30,
+ zzjd: 75,
+ lon: 102.67054539488224, lat: 31.0028468100060593, height: 0,
+ useModify: false,
+ },
+ '烟幕形成区域': {
+ type: 'ymxcqy',
+ points: [{lon: 102.64984, lat: 30.99237, height: 0},
+ {lon: 102.66012682459443, lat: 30.995109020954718, height: 0},
+ {lon: 102.67126799815856, lat: 30.98766239848537, height: 0},
+ {lon: 102.64984, lat: 30.983747593478107, height: 0},
+ {lon: 102.64984, lat: 30.99237, height: 0}],
+ useModify: false,
+ },
+ "掩护区域": {
+ type: 'yhqy',
+ points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
+ {lon: 102.65927322610115, lat: 31.01540811637356, height: 0},
+ {lon: 102.66192135373299, lat: 31.005988487769518, height: 0},
+ {lon: 102.64755620178961, lat: 31.00246196283815, height: 0},
+ {lon: 102.642853926199, lat: 31.012509646376447, height: 0}],
+ useModify: false,
+ },
+ "协同关系": {
+ type: 'xtgx',
+ points: [{lon: 102.642853926199, lat: 31.012509646376447, height: 0},
+ {lon: 102.66192135373299, lat: 31.005988487769518, height: 0}],
+ useModify: false,
+ },
+ "干扰线": {
+ type: 'grx',
+ points: [{lon: 102.732420985008, lat: 30.97556325857848, height: 0},
+ {lon: 102.73983041603873, lat: 30.97504986175468, height: 0}],
+ useModify: false
+ },
+ "预警线": {
+ type: 'yjx',
+ useModify: false,
+ points: [{lon: 102.732420985008, lat: 30.97956325857848, height: 0},
+ {lon: 102.73983041603873, lat: 30.98004986175468, height: 0}]
+ },
+ "目标分配线": {
+ type: 'mbfpx',
+ useModify: false,
+ points: [{lon: 102.732420985008, lat: 30.97756325857848, height: 0},
+ {lon: 102.73983041603873, lat: 30.97804986175468, height: 0}]
+ },
+ "目标醒目": {
+ bz: true,
+ xz: true,
+ bzlx: 'simple',
+ jbwb: 'R:00017',
+ type: "2002",
+ returnHeight: true,
+ useModify: false,
+ lon: 102.73554539488224, lat: 31.005068100060593, height: 0,
+ points: []
+ },
+ }
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ htmlString: '<h3>正在加载中...</h3>',
+ };
+ }
+
+ componentDidMount() {
+
+ let options = [];
+ for (let key in this.optionObjs) {
+ options.push(this.optionObjs[key]);
+ }
+ this.mapFunction.mapApiService.showDrawDatas(options);
+
+ this.mapFunction.mapApiService.updateModel('select')
+ this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
+ // console.log(selectedData);
+ document.getElementById('textarea').value = JSON.stringify(selectedData);
+ })
+
+ setTimeout(() => {
+ this.mapFunction.mapApiService.useDrawSelect('box', true)
+ }, 1000);
+ this.mapFunction.mapApiService.mapSelectedEvent.addEventListener((selectedData) => {
+ console.log(selectedData);
+ })
+
+
+ fetch('./example/ExampleSelectPage.md')
+ .then(response => response.text())
+ .then(mdText => {
+ this.setState({htmlString: window.marked.parse(mdText)});
+ });
+ }
+
+ useSelect() {
+ this.mapFunction.mapApiService.updateModel('select')
+ }
+
+ useBoxSelect() {
+ this.mapFunction.mapApiService.updateModel('select')
+ this.mapFunction.mapApiService.useDrawSelect('box', true)
+ }
+
+ unBoxSelect() {
+ this.mapFunction.mapApiService.clearDrawSelect()
+ }
+
+ clearSelected() {
+ this.mapFunction.mapApiService.clearSelected();
+ }
+
+ useModify() {
+ this.mapFunction.mapApiService.updateModel('modify')
+ }
+
+ outSelected() {
+ this.mapFunction.mapApiService.triggerSelected(['draw_primitive_1020_'])
+ }
+
+ 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={true}
+ />
+ </div>
+ <Button type="primary" onClick={() => this.useSelect()}>选择</Button>
+ <Button type="primary" onClick={() => this.useBoxSelect()}>框选</Button>
+ <Button type="primary" onClick={() => this.unBoxSelect()}>取消框选</Button>
+ <Button type="primary" onClick={() => this.clearSelected()}>清除选择</Button>
+ <Button type="primary" onClick={() => this.outSelected()}>外部指定选择对象</Button>
+ <Button type="primary" onClick={() => this.useModify()}>修改模式</Button>
+ <textarea id="textarea" className={"textarea"}></textarea>
+ <div className={"code_wrapper"}>
+ <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
+ </div>
+ </div>
+ )
+ }
+}
+
+
--
Gitblit v1.9.3