ExampleCustomToolbarPage 代码
import React, {Component} from 'react'
import './ExamplePage.css'
import "./CommonExample.css";
import {GIS} from "iclient3d-plot-diy";
;
import ProfileTool from "./profile/ProfileTool";
import ProfilePage from "./profile/ProfilePage";
export default class ExampleCustomToolbarPage extends Component {
constructor(props) {
super(props);
this.state = {
profileVisible: false,
profileResult: null,
htmlString: '<h3>正在加载中...</h3>'
};
}
toolbars = [
'global',
'fullscreen',
'measureDistance',
'measureArea',
'seethrough',
{
key: 'profile',
icon: 'profile',
title: '剖面分析',
titleI18n: 'profile',
handleClick: () => {
this.doProfile();
}
},
];
componentDidMount() {
fetch('./example/ExampleCustomToolbarPage.md')
.then(response => response.text())
.then(mdText => {
this.setState({htmlString: window.marked.parse(mdText)});
});
//启用旋转和倾斜
this.mapFunction.mapApiService.enableTilt();
}
doProfile() {
this.profileVisible = !this.profileVisible;
this.setState({
profileVisible: this.profileVisible
})
}
callProfile(profileResult) {
this.setState({
profileResult: profileResult
})
}
render() {
return (
<div className={"example"}>
<h3>分组数据展示</h3>
<div className={"map_wrapper"}>
<GIS refs={
e => {
this.mapFunction = e
}
}
mapRef={this}
showDefaultLayer={true}
toolbars={this.toolbars}
/>
</div>
{this.state.profileVisible &&
<ProfileTool
mapApiService={this.mapFunction.mapApiService}
closeEvent={this.doProfile.bind(this)}
i18n={this.i18n}
callBack={this.callProfile.bind(this)}
/>}
{this.state.profileResult &&
<ProfilePage
mapApiService={this.mapFunction.mapApiService}
profileResult={this.state.profileResult}
i18n={this.i18n}
closeEvent={this.callProfile.bind(this)}
/>}
<div className={"code_wrapper"}>
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
</div>
</div>
)
}
}