control/measureControl/index.js

import drawControl from '../drawControl';
import MeasureLineTool from './measureLine';
import MeasureAreaTool from './measureArea';

/**
 *@测距控件
 *@author lc
 *@date 2018-04-11 12:52:58
 */
export default class MeasureControl {
    onAdd(map) {

        this._map = map;
        this.drawTool = new drawControl(this._map);
        this._container = document.createElement('div');
        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';

        //添加测距按钮
        let measureDistanceBtn = document.createElement('button');
        measureDistanceBtn.className = 'mapboxgl-ctrl-icon  mapboxgl-ctrl-mapMeasure-distance';
        this._container.appendChild(measureDistanceBtn);
        measureDistanceBtn.addEventListener('click', () => {

            this.drawTool.drawGeometry('line');                                 //开始绘制线段
            new MeasureLineTool(this._map, this.drawTool);

        });

        //添加测量面积按钮
        let measureAreaBtn = document.createElement('button');
        measureAreaBtn.className = 'mapboxgl-ctrl-icon  mapboxgl-ctrl-mapMeasure-area';
        this._container.appendChild(measureAreaBtn);
        measureAreaBtn.addEventListener('click', () => {

            this.drawTool.drawGeometry('polygon');                                 //开始绘制面
            new MeasureAreaTool(this._map, this.drawTool);

        });


        return this._container;

    }

    onRemove() {

        this._container.parentNode.removeChild(this._container);
        this._map = undefined;

    }
}