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