How to use @mapbox/mapbox-gl-draw - 10 common examples

});
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      //添加绘制功能
      var modes = MapboxDraw.modes;
      modes.draw_rectangle = DrawRectangle;

      var draw = new MapboxDraw({
        modes: modes
      });
      map.addControl(draw);

      map.on("draw.create", feature => {
        this.feature = feature;
      });
      //设置为全局变量
      this.draw = draw;
      this.map = map;
      //地图事件
      var that = this;
      this.map.on("moveend", async function() {

import MapboxDraw from '@mapbox/mapbox-gl-draw';

import { DRAW_CLICK_BUFFER } from 'draw/config';
import { NodeMangler } from 'draw/modes/mainMode';
/**
 * @TOFIX need to figure out for direct_Select
 *  need it to scale!
 */

MapboxDraw.modes.simple_select.clickAnywhere = function(state, e) {
  // Clear the re-render selection
  const wasSelected = this.getSelectedIds();
  const wasSelectedFeatures = wasSelected.map(id => this.getFeature(id));
  // console.log('simple_select wasSelected=', wasSelected);
  // if (wasSelected.length > 0) {
  //   this.clearSelectedFeatures();
  //   this.deleteFeature(wasSelected);
  // }
  this.changeMode('NodeMangler', {
    wasSelected,
    wasSelectedFeatures,
    event: e
  });
  this.stopExtendedInteractions(state);
};

// 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      //添加绘制功能
      var modes = MapboxDraw.modes;
      modes.draw_rectangle = DrawRectangle;

      var draw = new MapboxDraw({
        modes: modes
      });
      map.addControl(draw);

      map.on("draw.create", feature => {
        this.feature = feature;
      });
      //设置为全局变量
      this.draw = draw;
      this.map = map;
      //地图事件
      var that = this;
      this.map.on("moveend", async function() {
        that.addBUIA();
      });
      this.addBUIA();

initMap: function (el) {
    if (el && !this.map && App.glSupport) {
      mapboxgl.accessToken = 'pk.eyJ1IjoibWFwZWd5cHQiLCJhIjoiY2l6ZTk5YTNxMjV3czMzdGU5ZXNhNzdraSJ9.HPI_4OulrnpD8qI57P12tg';
      this.map = App.map = new mapboxgl.Map({
        center: [105.66, 20],
        container: el,
        style: 'mapbox://styles/mapbox/satellite-v9',
        zoom: initialZoom
      });
      const nav = new mapboxgl.NavigationControl();
      this.map.addControl(nav, 'bottom-right');
      const draw = new MapboxDraw({
        styles: drawStyles,
        displayControlsDefault: false,
        userProperties: true
      });
      this.map.addControl(draw);
      this.draw = draw;
      // TODO: review whether the create and delete listeners fire anywhere now
      // that we're calling some events programatically
      this.map.on('draw.create', (e) => this.handleCreate(e.features));
      this.map.on('draw.delete', (e) => this.handleDelete(e.features));
      this.map.on('draw.update', (e) => {
        this.handleUpdate(e.features);
        e.features.forEach(this.markAsEdited);
      });
      this.map.on('draw.selectionchange', (e) => {
        // internal state used to track "previous state" of edited geometry

});
        });
    }
  };

  const parsePopupContent = (popupContent, properties) => {
    return popupContent.replace(/{{([A-Za-z0-0_-]+?)}}/g, (match, property) => {
      return properties[property];
    });
  };

  let draw;
  // Unless drawing_enabled is explicitly set to false, we assume we should
  // instantiate the draw plugin.
  if (options.drawing_enabled !== false && !isTouchDevice) {
    draw = new MapboxDraw({
      displayControlsDefault: false,
      userProperties: true,
      // These data-driven styles are used for styling geometry created with the
      // draw plugin.
      // https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/EXAMPLES.md
      styles: [
        // Polygon fill: selected.
        {
          id: "gl-draw-polygon-fill-active",
          type: "fill",
          filter: [
            "all",
            ["==", "$type", "Polygon"],
            ["!=", "mode", "static"],
            ["==", "active", "true"],
          ],

_createControl = () => {
    // $FlowFixMe
    const map = this._map;
    // $FlowFixMe
    this._draw = new MapboxDraw({
      keybindings: this.props.keybindings,
      touchEnabled: this.props.touchEnabled,
      boxSelect: this.props.boxSelect,
      clickBuffer: this.props.clickBuffer,
      touchBuffer: this.props.touchBuffer,
      controls: {
        point: this.props.pointControl,
        line_string: this.props.lineStringControl,
        polygon: this.props.polygonControl,
        trash: this.props.trashControl,
        combine_features: this.props.combineFeaturesControl,
        uncombine_features: this.props.uncombineFeaturesControl
      },
      displayControlsDefault: this.props.displayControlsDefault,
      styles: this.props.styles,
      modes: typeof this.props.modes === 'function'

const {
      modes,
      onDrawActionable,
      onDrawCombine,
      onDrawCreate,
      onDrawDelete,
      onDrawModeChange,
      onDrawRender,
      onDrawSelectionChange,
      onDrawUncombine,
      onDrawUpdate,
      position
    } = this.props;
    const { map } = this.context;

    this.draw = new MapboxDraw({
      ...this.props,
      modes: {
        ...MapboxDraw.modes,
        ...modes
      }
    });
    map.addControl(this.draw, position);

    // Hook draw events
    map.on('draw.actionable', onDrawActionable);
    map.on('draw.combine', onDrawCombine);
    map.on('draw.create', onDrawCreate);
    map.on('draw.delete', onDrawDelete);
    map.on('draw.modechange', onDrawModeChange);
    map.on('draw.render', onDrawRender);
    map.on('draw.selectionchange', onDrawSelectionChange);

componentDidMount() {
    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/light-v9',
      center: [5, 34],
      zoom: 1.5
    });

    this.draw = new MapboxDraw();

    this.map.on('load', () => {
      this.map.addControl(this.draw);
      // Triggers a map redraw once the component has finished mounting to ensure the rendered map fills the entire container. See: https://www.mapbox.com/help/blank-tiles/#mapbox-gl-js
      this.map.resize();
    });
  }

coordPath: e.featureTarget.properties.coord_path,
    startPos: e.lngLat
  });
  // this.updateUIClasses({ mouse: Constants.cursors.MOVE });
};

MapboxDraw.modes.direct_select.clickNoTarget = function() {
  const wasSelected = this.getSelectedIds();
  const wasSelectedFeatures = wasSelected.map(id => this.getFeature(id));
  this.changeMode('NodeMangler', {
    wasSelected,
    wasSelectedFeatures
  });
};

MapboxDraw.modes.direct_select.clickInactive = function() {
  const wasSelected = this.getSelectedIds();
  const wasSelectedFeatures = wasSelected.map(id => this.getFeature(id));
  this.changeMode('NodeMangler', {
    wasSelected,
    wasSelectedFeatures
  });
};

export function setupDraw() {
  return new MapboxDraw({
    displayControlsDefault: true,
    clickBuffer: DRAW_CLICK_BUFFER,
    doubleClickZoom: false,
    controls: {
      lineString: true,
      polygon: true,

onDrawCombine,
      onDrawCreate,
      onDrawDelete,
      onDrawModeChange,
      onDrawRender,
      onDrawSelectionChange,
      onDrawUncombine,
      onDrawUpdate,
      position
    } = this.props;
    const { map } = this.context;

    this.draw = new MapboxDraw({
      ...this.props,
      modes: {
        ...MapboxDraw.modes,
        ...modes
      }
    });
    map.addControl(this.draw, position);

    // Hook draw events
    map.on('draw.actionable', onDrawActionable);
    map.on('draw.combine', onDrawCombine);
    map.on('draw.create', onDrawCreate);
    map.on('draw.delete', onDrawDelete);
    map.on('draw.modechange', onDrawModeChange);
    map.on('draw.render', onDrawRender);
    map.on('draw.selectionchange', onDrawSelectionChange);
    map.on('draw.uncombine', onDrawUncombine);
    map.on('draw.update', onDrawUpdate);
  }