import mapboxgl from 'mapbox-gl';
import {getGreatCircleDistance} from '../../../tools/mapTools';
/**
*@测距工具
*@author lc
*@date 2018-04-11 12:52:37
*/
export default class MeasureLineTool {
constructor(map, drawTool) {
this._map = map;
this.drawTool = drawTool;
this.lastPoint = null;
this.totalDistance = 0;
this.startMeasure = false;
this.lastMarker = null;
this.markers = [];
this.currentLineId = '';
this._map.on('mousemove', this.mouseMoveMeasure); //每次单击地图后计算距离
this._map.on('dblclick', this.finishMeasure); //结束测量
this._map.on('click', this.mouseClickMeasure); //每次单击地图后计算距离
}
/**
*@单击鼠标显示当前节点间隔
*@author lc
*@date 2018-04-11 09:52:10
*/
mouseClickMeasure = e => {
let currentPoint = [e.lngLat.lng, e.lngLat.lat];
if (!this.lastPoint) {
this.lastMarker = this.showTips('起点', currentPoint);
this.markers.push(this.lastMarker);
} else {
let distance = getGreatCircleDistance(this.lastPoint, currentPoint);
if (distance === 0) {
return;
}
this.totalDistance += distance;
distance = this.getdistanceWithUnit(distance);
let marker = this.showTips(distance, currentPoint);
this.lastMarker = marker;
this.markers.push(marker);
}
this.lastPoint = currentPoint;
};
/**
*@移动鼠标显示总距离
*@author lc
*@date 2018-04-11 09:52:37
*/
mouseMoveMeasure = e => {
let currentPoint = [e.lngLat.lng, e.lngLat.lat];
if (!this.startMeasure) {
this.startMeasure = true;
this.movingMarker = this.showTips('单击确定起点', currentPoint);
this.markers.push(this.movingMarker);
} else {
this.movingMarker.setLngLat(currentPoint);
if (this.lastPoint) {
let temTotalDistance = this.totalDistance + getGreatCircleDistance(this.lastPoint, currentPoint);
this.movingMarker.getElement().innerHTML = `总长: ${this.getdistanceWithUnit(temTotalDistance)}<br/> 单击确定地点，双击结束`;
} else {
this.movingMarker.getElement().innerHTML = '单击确定起点';
}
}
};
/**
*@完成测量
*@author lc
*@date 2018-04-11 09:53:26
*/
finishMeasure = e => {
this._map.off('click', this.mouseClickMeasure); //销毁地图的鼠标单击监听
this._map.off('dblclick', this.finishMeasure); //销毁地图的鼠标双击监听
this._map.off('mousemove', this.mouseMoveMeasure); //销毁地图的鼠标移动监听
this.currentLineId = this.drawTool.Draw.getSelectedIds();
let currentPoint = [e.lngLat.lng, e.lngLat.lat];
this.lastMarker.remove();
this.addCloseMarker(currentPoint); //添加关闭窗口
this.movingMarker.getElement().innerHTML = `总长: ${this.getdistanceWithUnit(this.totalDistance)}`;
this.lastPoint = null;
this._map.getCanvas().style.cursor = '';
};
/**
*@测量的结果加上单位
*@author lc
*@date 2018-04-11 09:53:42
*/
getdistanceWithUnit(distance) {
if (distance > 1000) {
return `${(distance / 1000).toFixed(2)} 千米`;
} else {
return `${distance} 米`;
}
}
/**
*@信息框内显示内容
*@author lc
*@date 2018-04-11 09:54:03
*/
showTips(context, currentPoint) {
let marker = this.addMarker({coord: currentPoint, offset: [15, 20]});
marker.getElement().className = 'mapboxgl-ctrl-mapMeasure-tip';
marker.getElement().innerHTML = context;
return marker;
}
/**
*@添加信息框
*@author lc
*@date 2018-04-11 09:54:29
*/
addMarker({ coord = [0, 0], offset = [0, 0]} = {}) {
let el = document.createElement('div');
return new mapboxgl.Marker(el, {offset}).setLngLat(coord).addTo(this._map);
}
/**
*@添加关闭窗口
*@author lc
*@date 2018-04-11 12:55:53
*/
addCloseMarker(coord) {
let marker = this.addMarker({coord: coord, offset: [-5, -20]});
marker.getElement().className = 'mapboxgl-ctrl-mapMeasure-close';
marker.getElement().addEventListener('click', () => {
this.markers.map(marker => {
marker.remove();
});
marker.remove();
this.drawTool.Draw.delete(this.currentLineId);
});
}
}