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