import React, {Component} from 'react'
|
import './ExampleFwyPage.css'
|
import {Bp, GIS} from "iclient3d-plot-diy";
|
import {Button} from "antd";
|
|
export default class ExampleDefaultSelectPage extends Component {
|
drawOps = [];
|
|
constructor(props) {
|
super(props);
|
this.state = {
|
htmlString: '<h3>正在加载中...</h3>',
|
bp: null,
|
clickBpIndex: -1,
|
};
|
}
|
|
options = [
|
{
|
"bz": true,
|
"bzlx": "simple",
|
"jbwb": "R:00017",
|
"type": 2002,
|
"code": "draw_primitive_1000_",
|
"useModify": false,
|
"lon": 102.73181802939419,
|
"lat": 30.982754659441543,
|
"height": 0
|
},
|
{
|
"bz": true,
|
"bzlx": "detail",
|
"jbwb": "R:00017",
|
"type": 2002,
|
"xbwb": "17/10/2019\n16:45:8\n9260.00-10400.00MHZ",
|
"code": "draw_primitive_1001_",
|
"useModify": false,
|
"lon": 102.74521918551825,
|
"lat": 30.982390144247127,
|
"height": 0
|
}, {
|
useModify: false,
|
type: "fwy",
|
bjs: [1, 2, 3],
|
"lon": 102.75521918551825,
|
"lat": 30.972390144247127,
|
"height": 0
|
}
|
]
|
|
componentDidMount() {
|
this.showData();
|
|
fetch('./example/ExampleDefaultSelectPage.md')
|
.then(response => response.text())
|
.then(mdText => {
|
this.setState({htmlString: window.marked.parse(mdText)});
|
});
|
|
//监听拨盘事件
|
this.mapFunction.addBpListener((code, dom, drawObj, obj) => {
|
if (code && dom) {
|
dom.innerHTML = '';
|
const newElement = document.createElement('canvas');
|
newElement.id = 'bpCanvas';
|
dom.append(newElement);
|
|
const bpConfig = {
|
canvasId: 'bpCanvas',
|
items: [
|
{name: '图标1', img: './project3d/icon/bpImgs/icon-1.png'},
|
{name: '图标2', img: './project3d/icon/bpImgs/icon-2.png'},
|
{name: '图标3', img: './project3d/icon/bpImgs/icon-3.png'},
|
{name: '关闭拨盘', img: './project3d/icon/bpImgs/icon-4.png'},
|
]
|
};
|
this.setState({
|
bp: new Bp(bpConfig)
|
})
|
this.state.bp.createBp();
|
this.state.bp.listenClick((index) => {
|
this.setState({
|
clickBpIndex: index
|
});
|
if (index === 3) {
|
this.mapFunction.closeBp();
|
} else {
|
alert('点击了第' + (index + 1) + '个面板')
|
}
|
});
|
}
|
});
|
}
|
|
showData() {
|
|
let op = {
|
useModify: true,
|
type: "fwy",
|
bjs: [1, 2, 3, 4, 5, 6]
|
}
|
this.mapFunction.mapApiService.draw(op);
|
this.mapFunction.mapApiService.showDrawDatas(this.options);
|
}
|
|
openEdit() {
|
this.mapFunction.openDefaultSelectedEdit();
|
alert('已打开编辑')
|
}
|
|
closeEdit() {
|
this.mapFunction.closeDefaultSelectedEdit();
|
alert('已关闭编辑')
|
}
|
openDefaultShowPropertyPanel() {
|
this.mapFunction.openDefaultShowPropertyPanel();
|
alert('已打开属性面板')
|
}
|
|
closeDefaultShowPropertyPanel() {
|
this.mapFunction.closeDefaultShowPropertyPanel();
|
alert('已关闭属性面板')
|
}
|
|
closeBp() {
|
this.state.bp && this.state.bp.removeCanvasListener();
|
this.setState({
|
bp: null,
|
clickBpIndex: -1
|
})
|
this.mapFunction.closeBp();
|
}
|
|
|
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}
|
defaultShowPropertyPanel={false}
|
defaultSelectedEdit={false}
|
/>
|
</div>
|
<Button type="primary" onClick={this.closeEdit.bind(this)}>关闭编辑功能</Button>
|
<Button type="primary" onClick={this.openEdit.bind(this)}>打开编辑功能</Button>
|
<Button type="primary" onClick={this.closeDefaultShowPropertyPanel.bind(this)}>关闭编辑面板</Button>
|
<Button type="primary" onClick={this.openDefaultShowPropertyPanel.bind(this)}>打开编辑面板</Button>
|
|
<Button type="primary" onClick={this.closeBp.bind(this)}>关闭拨盘</Button>
|
<div className={"code_wrapper"}>
|
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
|
</div>
|
</div>
|
)
|
}
|
}
|
