From d7cf323b9315000b03e7f73b9ea818e54e7c8e51 Mon Sep 17 00:00:00 2001
From: sbjw <sbjw.happy@163.com>
Date: Sun, 21 Sep 2025 13:23:06 +0000
Subject: [PATCH] 1、增加getAllDraw()方法 2、增加默认初始化参数2dMap的功能,设置为true，表示默认为2d地图 3、修改线在加载地形的时候会出现空间断层的问题 4、修复动态修改颜色的bug 5、简标文本与详标文本对齐 6、修复扇形与面的显示问题
---
src/example/ExampleFlyPage.js | 2
src/example/ExamplePage.js | 3
package.json | 4
src/App.js | 4 +
src/example/ExampleDynamicBlcPage.js | 2
public/军事标绘文档.md | 43 +++++-----
public/example/ExampleFlyPage.md | 2
src/example/ExampleDrawPage.js | 10 +
src/example/ExampleAggregatorPage.js | 103 +++++++++++++++++++++++++
public/GIS_API.md | 29 ++++---
10 files changed, 159 insertions(+), 43 deletions(-)
diff --git a/package.json b/package.json
index af859ce..cbe37cc 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
"@ant-design/icons": "^4.0.0",
"antd": "^4.24.16",
"echarts": "^5.6.0",
- "iclient3d-plot-diy": "^1.0.17",
- "iclient3d-plot-diy-attachment": "^1.0.1",
+ "iclient3d-plot-diy": "^1.0.22",
+ "iclient3d-plot-diy-attachment": "^1.0.2",
"jquery": "^3.7.1",
"react-draggable": "^3.3.2",
"react-router-dom": "^5.3.4",
diff --git a/public/GIS_API.md b/public/GIS_API.md
index e42bd2b..c69fe91 100644
--- a/public/GIS_API.md
+++ b/public/GIS_API.md
@@ -15,19 +15,22 @@
### 构建参数
-| 参数 | 说明 | 类型 | 默认值 |
-|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------|-----------------|----------|
-| mapRef | 父组件引用 | React.Component | - |
-| showDefaultLayer | 显示默认图层（国内天地图） | boolean | true |
-| addressSearchUrl | 地址查询基础服务 | string | - |
-| terrainUrl | 地形服务地址 | string | - |
-| terrainUrlIsSct | 是否是超图地形 | boolean | true |
-| baseImageUrl | 默认影像图层（iserver对应的地址） <br/> | string | - |
-| plotUrl | 标绘服务地址 | |
-| global | 最小矩形框范围。( minx ,miny, maxx, maxy) | number[] | - |
-| toolbars | 自定义工具栏,例子：['global', 'fullscreen', {key: 'seethrough2',icon: 'seethrough',titleI18n: 'seethrough2',handleClick: () => {alert('通视分析2') }}] | string | object[] | - |
-| language | 语言 | string | - |
-| i18nObj | obj对象，参考多语言例子 | object | - |
+| 参数 | 说明 | 类型 | 默认值 |
+|--------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|-----------------|----------|
+| mapRef | 父组件引用 | React.Component | - |
+| showDefaultLayer | 显示默认图层（国内天地图） | boolean | true |
+| addressSearchUrl | 地址查询基础服务 | string | - |
+| terrainUrl | 地形服务地址 | string | - |
+| terrainUrlIsSct | 是否是超图地形 | boolean | true |
+| baseImageUrl | 默认影像图层（iserver对应的地址） <br/> | string | - |
+| plotUrl | 标绘服务地址 | |
+| global | 最小矩形框范围。( minx ,miny, maxx, maxy) | number[] | - |
+| toolbars | 自定义工具栏,例子：['global', 'fullscreen', {key: 'seethrough2',icon: 'seethrough',titleI18n: 'seethrough2',handleClick: () => {alert('通视分析2') }}] | string | object[] | - |
+| language | 语言 | string | - |
+| i18nObj | obj对象，参考多语言例子 | object | - |
+| defaultSelectedEdit | 是否启用点击就进入编辑 | object | - |
+| defaultShowPropertyPanel | 进入编辑是否显示属性编辑面板 | object | - |
+| useSvgIcon | 是否使用svg图标，启用svg图标后，允许动态使用图标边框和颜色 | boolean | - | | object | - |
### 工具栏功能介绍
diff --git a/public/example/ExampleFlyPage.md b/public/example/ExampleFlyPage.md
index ba62d60..41dc89a 100644
--- a/public/example/ExampleFlyPage.md
+++ b/public/example/ExampleFlyPage.md
@@ -8,7 +8,7 @@
import {interval, take} from "rxjs";
import {Bp} from "iclient3d-plot-diy";
-const {Cesium} = window;
+const Cesium = window['Cesium'];
export default class ExampleFlyPage extends Component {
diff --git "a/public/\345\206\233\344\272\213\346\240\207\347\273\230\346\226\207\346\241\243.md" "b/public/\345\206\233\344\272\213\346\240\207\347\273\230\346\226\207\346\241\243.md"
index dcce92a..647897f 100644
--- "a/public/\345\206\233\344\272\213\346\240\207\347\273\230\346\226\207\346\241\243.md"
+++ "b/public/\345\206\233\344\272\213\346\240\207\347\273\230\346\226\207\346\241\243.md"
@@ -5,27 +5,28 @@
> 通用属性
-| 属性 | 英文 | 备注 |
-|-----------------|-----------------|-----------------------------------------|
-| 唯一标识 | code | 唯一标识，如果不传会动态生成一个唯一标识 |
-| 军标代码类型 | type | 1001,1002... |
-| 显示图标文本 | showText | false |
-| 图标文本 | text | 空 |
-| 标注 | bz | 是否有标柱 |
-| 图标大小 | tbdx | 数字数组，例如[64,64]表示宽64px，高64px |
-| 标注类型 | bzlx | 详标（detail）、简标(simple)、正常(normal), |
-| 详标文本 | xbwb | 多行文本用\n进行分隔 |
-| 简标文本 | jbwb | 简标文本 |
-| 选中 | xz | true(选中), false(不选中，默认) |
-| 经度 | lat | 经度 |
-| 纬度 | lon | 纬度 |
-| 高度 | height | 高度 |
-| 航迹点 | points | 格式：{lon: 111, lat:22, height: 10000}[] |
-| 显示航迹 | showHj | boolean |
-| 航迹颜色 | hjColor | 航迹颜色 默认#0000ff |
-| 航迹大小 | hjSize | 航迹大小 默认 2 |
-| 图标增加的大小 | iconOutlineSize | 地图参数要设置useSvgIcon才有效。默认 0 |
-| 图标颜色 | iconColor | 地图参数要设置useSvgIcon才有效。默认 #000000 |
+| 属性 | 英文 | 备注 |
+|------------------|-----------------|-----------------------------------------|
+| 唯一标识 | code | 唯一标识，如果不传会动态生成一个唯一标识 |
+| 军标代码类型 | type | 1001,1002... |
+| 显示图标文本 | showText | false |
+| 图标文本 | text | 空 |
+| 图标文本颜色 | textColor | #000000 |
+| 标注 | bz | 是否有标柱 |
+| 图标大小 | tbdx | 数字数组，例如[64,64]表示宽64px，高64px |
+| 标注类型 | bzlx | 详标（detail）、简标(simple)、正常(normal), |
+| 详标文本 | xbwb | 多行文本用\n进行分隔 |
+| 简标文本 | jbwb | 简标文本 |
+| 选中 | xz | true(选中), false(不选中，默认) |
+| 经度 | lat | 经度 |
+| 纬度 | lon | 纬度 |
+| 高度 | height | 高度 |
+| 航迹点 | points | 格式：{lon: 111, lat:22, height: 10000}[] |
+| 显示航迹 | showHj | boolean |
+| 航迹颜色 | hjColor | 航迹颜色 默认#0000ff |
+| 航迹大小 | hjSize | 航迹大小 默认 2 |
+| 图标增加的大小 | iconOutlineSize | 地图参数要设置useSvgIcon才有效。默认 0 |
+| 图标颜色 | iconColor | 地图参数要设置useSvgIcon才有效。默认 #000000 |
<br />
diff --git a/src/App.js b/src/App.js
index 2ab863d..fc77ca4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,6 +19,8 @@
import ExampleDefaultSelectPage from "./example/ExampleDefaultSelectPage";
import ExampleFlyPage from "./example/ExampleFlyPage";
import ExampleDynamicDlcPage from "./example/ExampleDynamicBlcPage";
+import ExampleSimpleEventPage from "./example/ExampleSimpleEventPage";
+import ExampleAggregatorPage from "./example/ExampleAggregatorPage";
function App() {
return (
@@ -39,7 +41,9 @@
<Route path="/example/hideToolBar" exact component={ExampleHideToolBarPage}/>
<Route path="/example/defaultSelect" exact component={ExampleDefaultSelectPage}/>
<Route path="/example/fly" exact component={ExampleFlyPage}/>
+ <Route path="/example/simpleEvent" exact component={ExampleSimpleEventPage}/>
<Route path="/example/dynamicBlc" exact component={ExampleDynamicDlcPage}/>
+ <Route path="/example/aggregator" exact component={ExampleAggregatorPage}/>
<Route path="/doc" exact component={DocPage}/>
<Route path="/doc/:page" exact component={DocPage}/>
<Route path="/test" exact component={TestPage}/>
diff --git a/src/example/ExampleAggregatorPage.js b/src/example/ExampleAggregatorPage.js
new file mode 100644
index 0000000..99779d6
--- /dev/null
+++ b/src/example/ExampleAggregatorPage.js
@@ -0,0 +1,103 @@
+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/src/example/ExampleDrawPage.js b/src/example/ExampleDrawPage.js
index 67a2dce..4e77aac 100644
--- a/src/example/ExampleDrawPage.js
+++ b/src/example/ExampleDrawPage.js
@@ -35,7 +35,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}, {
@@ -50,7 +50,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}, {
@@ -259,7 +259,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);
}
@@ -404,6 +407,7 @@
this.mapFunction = e
}
}
+ useSvgIcon={true}
iconScales={[[0, 2000], [2000, 10000], [10000, 5000000]]}
plotUrl={this.state.plotUrl}
mapRef={this}
diff --git a/src/example/ExampleDynamicBlcPage.js b/src/example/ExampleDynamicBlcPage.js
index 5097d00..66dcc8f 100644
--- a/src/example/ExampleDynamicBlcPage.js
+++ b/src/example/ExampleDynamicBlcPage.js
@@ -44,7 +44,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/src/example/ExampleFlyPage.js b/src/example/ExampleFlyPage.js
index c9d728f..a99c0da 100644
--- a/src/example/ExampleFlyPage.js
+++ b/src/example/ExampleFlyPage.js
@@ -4,7 +4,7 @@
import {interval, take} from "rxjs";
import {Bp} from "iclient3d-plot-diy";
-const {Cesium} = window;
+const Cesium = window['Cesium'];
export default class ExampleFlyPage extends Component {
diff --git a/src/example/ExamplePage.js b/src/example/ExamplePage.js
index 907f622..093b42f 100644
--- a/src/example/ExamplePage.js
+++ b/src/example/ExamplePage.js
@@ -5,7 +5,6 @@
import {Button, Input} from "antd";
import {updateLanguage} from "iclient3d-plot-diy";
-;
export default class ExamplePage extends Component {
constructor(props) {
@@ -74,6 +73,8 @@
<li><NavLink to='/example/defaultSelect'>初始化事件</NavLink></li>
<li><NavLink to='/example/fly'>飞行</NavLink></li>
<li><NavLink to='/example/dynamicBlc'>动态比例尺</NavLink></li>
+ <li><NavLink to='/example/simpleEvent'>简单事件</NavLink></li>
+ <li><NavLink to='/example/aggregator'>自动聚合</NavLink></li>
</ul>
<div className={"button_wrapper"}>
--
Gitblit v1.9.3