增加相关html标牌样例

sbjw

2025-12-01 a267266de7614618a702170b54d684aead263989

增加相关html标牌样例

 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.30",
        "iclient3d-plot-diy": "^1.0.31",
        "iclient3d-plot-diy-attachment": "^1.0.2",
        "jquery": "^3.7.1",
        "@turf/turf": "^7.2.0",

 public/example/ExampleHtmlBoardCss.md

New file
@@ -0,0 +1,84 @@

### ExampleHtmlBoardCss 代码


```css

.info-window {
    max-width: 450px;
    position: absolute;
    margin-left: 0;
    left: 90px;
    top: -40px;
    transform: translate(0, -100%);
    display: block;
    z-index: 1000;
    box-shadow: 1px 1px 5px 2px rgba(223, 223, 223, 0.8);
    border-radius: 4px;
    color: #fff;
    background: rgba(255, 255, 255, 0.85);
}

.info-window .info-window-heading {
    height: 36px;
    line-height: 36px;
    background: linear-gradient(90deg, #3388FF, #00A0E9);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    justify-content: space-between;
}

.info-window .info-window-heading.drag {
    pointer-events: auto;
}

.info-window .info-window-heading .info-window-title {
    text-indent: 15px;
    font-weight: bold;
    display: inline-block;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.info-window .info-window-heading .bbb {
    text-align: right;
}

.info-window .info-window-heading .bbb .btn-pin {
    width: 30px;
    height: 30px;
    background-color: red;
}

.info-window .info-window-heading .bbb .btn-pin.pin {
    background-color: #616161;
}

.info-window .info-window-heading .info-window-btn {
    display: inline-block;
    padding: 0 8px;
}

.info-window .info-window-heading .info-window-btn:hover {
    cursor: pointer;
    color: #10d9ee;
    background-color: transparent;
}

.info-window .info-window-content-container {
    max-height: 250px;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 15px;
}

.info-window .info-window-content-container .info-window-content {
    position: relative;
}


```

 public/example/ExampleHtmlBoardPage.md

New file
@@ -0,0 +1,209 @@

### ExampleHtmlBoardPage 代码

```jsx
import React, {Component} from 'react'
import './ExampleHtmlBoardPage.css'
import {Bp, GIS} from "../iclient3d-plot-diy";

import {Button} from "antd";
import $ from "jquery";

export default class ExampleHtmlBoardPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
            cssString: '<h3>正在加载中...</h3>',
            bp: null,
            clickBpIndex: -1,
        };
    }

    options = [
        {
            code: '12xxxx3123',
            "showHtmlBoard": true,
            templateHtml: `
            <div class="info-window">
                <div class="info-window-heading">
                    <span class="info-window-title" style="width: 300px;">{{title}}</span>
                    <div class="bbb">
                         <div class="btn-pin"></div>
                    </div>
                </div>
                <div class="info-window-content-container">
                    <div class="info-window-content">
                        <div class="xxx">
                            <div>名称</div>
                            <div>{{name}}</div>
                        </div>
                        <div class="xxx">
                            <div>经度</div>
                            <div>{{lon}}</div>
                        </div>
                        <div class="xxx">
                            <div>纬度</div>
                            <div>{{lat}}</div>
                        </div>
                    </div>
                </div>
            </div>
        `,
            "templateValue": {
                title: "12xxxx3123",
                name: "name",
                lon: 111.23432,
                lat: 23.1,
            },
            "infoWindowSelector": ".info-window",
            "infoWindowTitleSelector": ".info-window-heading",
            "infoWindowBtnPinSelector": ".btn-pin",
            "type": 2002,
            "useModify": false,
            "lon": 102.74521918551825,
            "lat": 30.982390144247127,
            "height": 0
        },
        {
            code: '12xxxx3122',
            "showHtmlBoard": true,
            "infoWindowSelector": ".info-window",
            "infoWindowTitleSelector": ".info-window-heading",
            "infoWindowBtnPinSelector": ".btn-pin",
            "type": 2002,
            "useModify": false,
            "lon": 112.74521918551825,
            "lat": 30.982390144247127,
            "height": 0
        }
    ]

    htmlBoardElementCallback(code){
        let html = `
            <div class="info-window">
                <div class="info-window-heading">
                    <span class="info-window-title" style="width: 300px;">{{title}}</span>
                    <div class="bbb">
                         <div class="btn-pin"></div>
                    </div>
                </div>
                <div class="info-window-content-container">
                    <div class="info-window-content">
                        <div class="xxx">
                            <div>名称</div>
                            <div>{{name}}</div>
                        </div>
                        <div class="xxx">
                            <div>经度</div>
                            <div>{{lon}}</div>
                        </div>
                        <div class="xxx">
                            <div>纬度</div>
                            <div>{{lat}}</div>
                        </div>
                    </div>
                </div>
            </div>
        `
        let values = {
            title: code,
            name: "name",
            lon: 111.23432,
            lat: 23.1,
        };
        html = html.replace(/\{\{(.*)}}/g, (g, g2) => {
            return values[g2] || '';
        });
        return $(html)[0];
    }

    componentDidMount() {

        fetch('./example/ExampleHtmlBoardPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
        fetch('./example/ExampleHtmlBoardCss.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({cssString: window.marked.parse(mdText)});
            });
        let html = `
            <div class="info-window">
                <div class="info-window-heading">
                    <span class="info-window-title" style="width: 300px;">00003 </span>
                    <div class="bbb">
                        <ng-content select="head-button"></ng-content>
                    </div>
                </div>
                <div class="info-window-content-container">
                    <div class="info-window-content">
                        <div class="xxx">
                            <div>名称</div>
                            <div>xxxx</div>
                        </div>
                        <div class="xxx">
                            <div>经度</div>
                            <div>xxxx</div>
                        </div>
                        <div class="xxx">
                            <div>纬度</div>
                            <div>xxxx</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        // let element = $(html);
        this.mapFunction.mapApiService.showDrawDatas(this.options);
    }

    showWindow() {
        // this.mapFunction.mapApiService.showDrawDatas(this.options);
        this.mapFunction.mapApiService.updateDraw('12xxxx3123', {
            "showHtmlBoard": true
        });
    }
    closeWindow() {
        this.mapFunction.mapApiService.updateDraw('12xxxx3123', {
            "showHtmlBoard": false
        });
    }

    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}
                         htmlBoardElementCallback={this.htmlBoardElementCallback.bind(this)}
                    />
                </div>
                <Button type="primary" onClick={this.showWindow.bind(this)}>打开12xxxx3123窗口</Button>
                <Button type="primary" onClick={this.closeWindow.bind(this)}>关闭12xxxx3123窗口</Button>
                {this.state.clickBpIndex > -1 && <span
                    style={{color: '#f00', marginLeft: '20px'}}>你点击了第 {this.state.clickBpIndex + 1} 个选项!</span>}
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.cssString}}></div>
                </div>
            </div>
        )
    }
}



```

 src/App.js

@@ -25,6 +25,7 @@
import ExampleGetPointsPage from "./example/ExampleGetPointsPage";
import ExampleSelectPage from "./example/ExampleSelectPage";
import ExampleXzxxPage from "./example/ExampleXzxxPage";
import ExampleHtmlBoardPage from "./example/ExampleHtmlBoardPage";

function App() {
    return (
@@ -52,6 +53,7 @@
                    <Route path="/example/getPoints" exact component={ExampleGetPointsPage}/>
                    <Route path="/example/select" exact component={ExampleSelectPage}/>
                    <Route path="/example/xzxx" exact component={ExampleXzxxPage}/>
                    <Route path="/example/htmlBoard" exact component={ExampleHtmlBoardPage}/>
                    <Route path="/doc" exact component={DocPage}/>
                    <Route path="/doc/:page" exact component={DocPage}/>
                    <Route path="/test" exact component={TestPage}/>

 src/example/ExampleHtmlBoardPage.css

New file
@@ -0,0 +1,76 @@

.info-window {
    max-width: 450px;
    position: absolute;
    margin-left: 0;
    left: 90px;
    top: -40px;
    transform: translate(0, -100%);
    display: block;
    z-index: 1000;
    box-shadow: 1px 1px 5px 2px rgba(223, 223, 223, 0.8);
    border-radius: 4px;
    color: #fff;
    background: rgba(255, 255, 255, 0.85);
}

.info-window .info-window-heading {
    height: 36px;
    line-height: 36px;
    background: linear-gradient(90deg, #3388FF, #00A0E9);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    justify-content: space-between;
}

.info-window .info-window-heading.drag {
    pointer-events: auto;
}

.info-window .info-window-heading .info-window-title {
    text-indent: 15px;
    font-weight: bold;
    display: inline-block;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.info-window .info-window-heading .bbb {
    text-align: right;
}

.info-window .info-window-heading .bbb .btn-pin {
    width: 30px;
    height: 30px;
    background-color: red;
}

.info-window .info-window-heading .bbb .btn-pin.pin {
    background-color: #616161;
}

.info-window .info-window-heading .info-window-btn {
    display: inline-block;
    padding: 0 8px;
}

.info-window .info-window-heading .info-window-btn:hover {
    cursor: pointer;
    color: #10d9ee;
    background-color: transparent;
}

.info-window .info-window-content-container {
    max-height: 250px;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 15px;
}

.info-window .info-window-content-container .info-window-content {
    position: relative;
}

 src/example/ExampleHtmlBoardPage.js

New file
@@ -0,0 +1,203 @@
import React, {Component} from 'react'
import './ExampleHtmlBoardPage.css'
import {GIS} from "iclient3d-plot-diy";

import {Button} from "antd";
import $ from "jquery";

export default class ExampleHtmlBoardPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
            cssString: '<h3>正在加载中...</h3>',
            bp: null,
            clickBpIndex: -1,
        };
    }

    options = [
        {
            code: '12xxxx3123',
            "showHtmlBoard": true,
            templateHtml: `
            <div class="info-window">
                <div class="info-window-heading">
                    <span class="info-window-title" style="width: 300px;">{{title}}</span>
                    <div class="bbb">
                         <div class="btn-pin"></div>
                    </div>
                </div>
                <div class="info-window-content-container">
                    <div class="info-window-content">
                        <div class="xxx">
                            <div>名称</div>
                            <div>{{name}}</div>
                        </div>
                        <div class="xxx">
                            <div>经度</div>
                            <div>{{lon}}</div>
                        </div>
                        <div class="xxx">
                            <div>纬度</div>
                            <div>{{lat}}</div>
                        </div>
                    </div>
                </div>
            </div>
        `,
            "templateValue": {
                title: "12xxxx3123",
                name: "name",
                lon: 111.23432,
                lat: 23.1,
            },
            "infoWindowSelector": ".info-window",
            "infoWindowTitleSelector": ".info-window-heading",
            "infoWindowBtnPinSelector": ".btn-pin",
            "type": 2002,
            "useModify": false,
            "lon": 102.74521918551825,
            "lat": 30.982390144247127,
            "height": 0
        },
        {
            code: '12xxxx3122',
            "showHtmlBoard": true,
            "infoWindowSelector": ".info-window",
            "infoWindowTitleSelector": ".info-window-heading",
            "infoWindowBtnPinSelector": ".btn-pin",
            "type": 2002,
            "useModify": false,
            "lon": 112.74521918551825,
            "lat": 30.982390144247127,
            "height": 0
        }
    ]

    htmlBoardElementCallback(code){
        let html = `
            <div class="info-window">
                <div class="info-window-heading">
                    <span class="info-window-title" style="width: 300px;">{{title}}</span>
                    <div class="bbb">
                         <div class="btn-pin"></div>
                    </div>
                </div>
                <div class="info-window-content-container">
                    <div class="info-window-content">
                        <div class="xxx">
                            <div>名称</div>
                            <div>{{name}}</div>
                        </div>
                        <div class="xxx">
                            <div>经度</div>
                            <div>{{lon}}</div>
                        </div>
                        <div class="xxx">
                            <div>纬度</div>
                            <div>{{lat}}</div>
                        </div>
                    </div>
                </div>
            </div>
        `
        let values = {
            title: code,
            name: "name",
            lon: 111.23432,
            lat: 23.1,
        };
        html = html.replace(/\{\{(.*)}}/g, (g, g2) => {
            return values[g2] || '';
        });
        return $(html)[0];
    }

    componentDidMount() {

        fetch('./example/ExampleHtmlBoardPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
        fetch('./example/ExampleHtmlBoardCss.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({cssString: window.marked.parse(mdText)});
            });
        let html = `
            <div class="info-window">
                <div class="info-window-heading">
                    <span class="info-window-title" style="width: 300px;">00003 </span>
                    <div class="bbb">
                        <ng-content select="head-button"></ng-content>
                    </div>
                </div>
                <div class="info-window-content-container">
                    <div class="info-window-content">
                        <div class="xxx">
                            <div>名称</div>
                            <div>xxxx</div>
                        </div>
                        <div class="xxx">
                            <div>经度</div>
                            <div>xxxx</div>
                        </div>
                        <div class="xxx">
                            <div>纬度</div>
                            <div>xxxx</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        // let element = $(html);
        this.mapFunction.mapApiService.showDrawDatas(this.options);
    }

    showWindow() {
        // this.mapFunction.mapApiService.showDrawDatas(this.options);
        this.mapFunction.mapApiService.updateDraw('12xxxx3123', {
            "showHtmlBoard": true
        });
    }
    closeWindow() {
        this.mapFunction.mapApiService.updateDraw('12xxxx3123', {
            "showHtmlBoard": false
        });
    }

    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}
                         htmlBoardElementCallback={this.htmlBoardElementCallback.bind(this)}
                    />
                </div>
                <Button type="primary" onClick={this.showWindow.bind(this)}>打开12xxxx3123窗口</Button>
                <Button type="primary" onClick={this.closeWindow.bind(this)}>关闭12xxxx3123窗口</Button>
                {this.state.clickBpIndex > -1 && <span
                    style={{color: '#f00', marginLeft: '20px'}}>你点击了第 {this.state.clickBpIndex + 1} 个选项!</span>}
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.cssString}}></div>
                </div>
            </div>
        )
    }
}



 src/example/ExamplePage.js

@@ -79,6 +79,7 @@
                    <li><NavLink to='/example/getPoints'>动态获取坐标</NavLink></li>
                    <li><NavLink to='/example/select'>军标选择</NavLink></li>
                    <li><NavLink to='/example/xzxx'>选中、X图标</NavLink></li>
                    <li><NavLink to='/example/htmlBoard'>Html标牌</NavLink></li>
                </ul>
                <div className={"button_wrapper"}>