control/pitch2dControl/index.js

/**
 * 
 */
class Pitch2dControl {
    constructor() {

        this._container = document.createElement('div');
        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
        this._container.addEventListener('contextmenu', (e) => e.preventDefault());
        this.btn = document.createElement('button');
        this.btn.className = 'mapboxgl-ctrl-icon  mapboxgl-ctrl-view  mapboxgl-ctrl-view2d';
        this._container.appendChild(this.btn);

    }

    onAdd(map) {

        this._map = map;
        this._container.addEventListener('click', () => {

            if (hasClass(this.btn, 'mapboxgl-ctrl-view2d')
            ) {

                this._map.easeTo({pitch: 45});
                removeClass(this.btn, 'mapboxgl-ctrl-view2d');
                addClass(this.btn, 'mapboxgl-ctrl-view3d');

            } else {

                addClass(this.btn, 'mapboxgl-ctrl-view2d');
                removeClass(this.btn, 'mapboxgl-ctrl-view3d');
                this._map.easeTo({pitch: 0});

            }

        });
        return this._container;

    }

    onRemove() {

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

    }
}

function hasClass(elements, cName) {

    return !!elements.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)')); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断

}

function addClass(elements, cName) {

    if (!hasClass(elements, cName)) {
        elements.className.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
        elements.className += ' ' + cName;

    }


}

function removeClass(elements, cName) {

    if (hasClass(elements, cName)) {

        elements.className = elements.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), ' '); // replace方法是替换

    }

}

export default Pitch2dControl;