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",

 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          | -        |


### 工具栏功能介绍

 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 {


 public/军事标绘文档.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 />


 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}/>

 src/example/ExampleAggregatorPage.js

New file
@@ -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>
        )
    }
}



 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}

 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}

 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 {


 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"}>


 src/example/ExampleSimpleEventPage.js

New file
@@ -0,0 +1,56 @@
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>
        )
    }
}