From a267266de7614618a702170b54d684aead263989 Mon Sep 17 00:00:00 2001
From: sbjw <sbjw.happy@163.com>
Date: Mon, 01 Dec 2025 16:45:39 +0000
Subject: [PATCH] 增加相关html标牌样例
---
src/example/ExampleHtmlBoardPage.css | 76 +++++++
src/example/ExampleHtmlBoardPage.js | 203 ++++++++++++++++++++
src/example/ExamplePage.js | 1
package.json | 2
public/example/ExampleHtmlBoardPage.md | 209 ++++++++++++++++++++
src/App.js | 2
public/example/ExampleHtmlBoardCss.md | 84 ++++++++
7 files changed, 576 insertions(+), 1 deletions(-)
diff --git a/package.json b/package.json
index dedb21b..23b9368 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.30",
+ "iclient3d-plot-diy": "^1.0.31",
"iclient3d-plot-diy-attachment": "^1.0.2",
"jquery": "^3.7.1",
"@turf/turf": "^7.2.0",
diff --git a/public/example/ExampleHtmlBoardCss.md b/public/example/ExampleHtmlBoardCss.md
new file mode 100644
index 0000000..a409007
--- /dev/null
+++ b/public/example/ExampleHtmlBoardCss.md
@@ -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;
+}
+
+
+```
diff --git a/public/example/ExampleHtmlBoardPage.md b/public/example/ExampleHtmlBoardPage.md
new file mode 100644
index 0000000..724638c
--- /dev/null
+++ b/public/example/ExampleHtmlBoardPage.md
@@ -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>
+ )
+ }
+}
+
+
+
+```
diff --git a/src/App.js b/src/App.js
index 341f0b1..0b14ff3 100644
--- a/src/App.js
+++ b/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}/>
diff --git a/src/example/ExampleHtmlBoardPage.css b/src/example/ExampleHtmlBoardPage.css
new file mode 100644
index 0000000..89c8271
--- /dev/null
+++ b/src/example/ExampleHtmlBoardPage.css
@@ -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;
+}
diff --git a/src/example/ExampleHtmlBoardPage.js b/src/example/ExampleHtmlBoardPage.js
new file mode 100644
index 0000000..006a247
--- /dev/null
+++ b/src/example/ExampleHtmlBoardPage.js
@@ -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>
+ )
+ }
+}
+
+
diff --git a/src/example/ExamplePage.js b/src/example/ExamplePage.js
index e79697e..06da1d3 100644
--- a/src/example/ExamplePage.js
+++ b/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"}>
--
Gitblit v1.9.3