import React, {PureComponent} from "react";
|
import {Button} from "antd";
|
|
export default class ProfileTool extends PureComponent {
|
|
constructor(props) {
|
super(props);
|
this.layers = null;
|
this.positions = [];
|
this.handlerLine = undefined;
|
this.mapApiService = this.props.mapApiService;
|
this.viewer = this.props.mapApiService.viewer;
|
}
|
|
componentDidMount() {
|
// 订阅事件
|
if (!this.handlerLine) {
|
this.handlerLine = this.mapApiService.getMeasureHandler();
|
//注册测距功能事件
|
this.handlerLine.measureEvt.addEventListener(function (result) {
|
this.positions = result.positions;
|
let dis = Number(result.distance);
|
let distance = dis > 1000 ? (dis / 1000).toFixed(2) + 'km' : dis.toFixed(2) + 'm';
|
this.handlerLine.disLabel.text = '距离:' + distance;
|
if (this.positions.length > 2) {
|
this.positions = [this.positions[0], this.positions[1]];
|
this.handlerLine.deactivate();
|
}
|
}.bind(this));
|
this.handlerLine.activeEvt.addEventListener(function (isActive) {
|
if (isActive) {
|
this.viewer.enableCursorStyle = false;
|
this.viewer._element.style.cursor = '';
|
} else {
|
this.viewer.enableCursorStyle = true;
|
if (this.positions.length == 2) {
|
this.doSampling();
|
}
|
}
|
}.bind(this));
|
}
|
}
|
|
componentWillUnmount() {
|
|
}
|
|
closeEvent() {
|
this.clear();
|
this.props.callBack(null);
|
this.props.closeEvent();
|
}
|
|
callBack(data) {
|
this.props.callBack(data);
|
}
|
|
doSampling() {
|
if (this.positions && this.positions.length == 2) {
|
this.callBack(this.positions);
|
}
|
}
|
|
draw() {
|
this.positions = [];
|
this.handlerLine.activate();
|
}
|
|
|
/*
|
* 清除
|
*/
|
clear() {
|
this.handlerLineClear();
|
this.callBack(null);
|
this.viewer.enableCursorStyle = true;
|
}
|
|
handlerLineClear() {
|
this.handlerLine && this.handlerLine.clear();
|
}
|
|
|
render() {
|
return (
|
<div className="param-container">
|
<Button type="primary" id="addViewPoint" className="button black" onClick={() => {
|
this.draw();
|
}}>绘制
|
</Button>
|
<Button type="primary" id="addTargetPoint" className="button black" onClick={() => {
|
this.clear();
|
}}>清除
|
</Button>
|
<Button type="primary" id="clear" className="button black" onClick={() => {
|
this.closeEvent();
|
}}>关闭
|
</Button>
|
</div>
|
);
|
}
|
}
|