How to use the mapbox-gl.ScaleControl function in mapbox-gl

"pk.eyJ1Ijoid3VjYW5nZW8iLCJhIjoiY2oxNGQ1ZDdsMDA0djJxbzdzdGU4NWpqMiJ9.iaTLldYv7GNfxWhN42h__g";
      const map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        style: CONFIG.HOST + "/style.json",
        center: [116.295, 39.945],
        zoom: 16
      });
      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);

      // 地图导航
      var nav = new mapboxgl.NavigationControl();
      map.addControl(nav, "top-left");
      // 比例尺
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "imperial"
      });
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );

onLoad() {
    // helper to set geolocation
    const setGeolocation = data => {
      const geometry = [data.coords.longitude, data.coords.latitude];
      this.props.setUserLocation(geometry);
      if (this.props.moveOnLoad) this.moveTo(geometry, 13);
    };

    // Create scale control
    const scaleControl = new mapboxgl.ScaleControl({
      maxWidth: 80,
      unit: "metric"
    });
    this.map.addControl(scaleControl, "bottom-right");

    // Create geolocation control
    const geolocateControl = new mapboxgl.GeolocateControl({
      trackUserLocation: true,
      positionOptions: {
        enableHighAccuracy: true,
        timeout: 15000
      }
    });
    geolocateControl.on("geolocate", setGeolocation);

    // Initial ask for location and display on the map

hash: false,
      style: getDefaultMapStyle(),
      zoom: 2,
      center: [0, 0],
    });

    map.addControl(
      new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: mapboxgl.accessToken
          ? '' // Included by mapbox
          : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }),
    );
    map.addControl(new mapboxgl.NavigationControl({}));
    map.addControl(new mapboxgl.ScaleControl({position: 'bottom-left'}));

    this.setState({map});
  }

hash: false,
      style: getDefaultMapStyle(),
      zoom: 2,
      center: [0, 0],
    });

    map.addControl(
      new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: mapboxgl.accessToken
          ? '' // Included by mapbox
          : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }),
    );
    map.addControl(new mapboxgl.NavigationControl({}));
    map.addControl(new mapboxgl.ScaleControl({position: 'bottom-left'}));

    this.setState({map});
  }

private initMap(config: MapConfig) {
    this.mapboxMap = createMapboxMap(this.mapElementId, config);
    this.mapboxMap.addControl(new NavigationControl(), 'top-right');
    this.mapboxMap.addControl(new ScaleControl(), 'bottom-right');
    // GeolocateControl needs to be added after ScaleControl to be shown above it
    this.mapboxMap.addControl(new GeolocateControl(), 'bottom-right');

    this.registerMapEventListeners();
    this.fixDefaultMapZoomRate();
  }

hash: false,
      style: getDefaultMapStyle(),
      zoom: 2,
      center: [0, 0],
    });

    map.addControl(
      new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: mapboxgl.accessToken
          ? '' // Included by mapbox
          : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }),
    );
    map.addControl(new mapboxgl.NavigationControl({}));
    map.addControl(new mapboxgl.ScaleControl({position: 'bottom-left'}));

    this.setState({map});
  }

center: [this.configService.init.lng, this.configService.init.lat],
          zoom: this.configService.init.zoom,
          maxZoom: 22,
          doubleClickZoom: false,
          attributionControl: false,
          dragRotate: true,
          trackResize: false,
          pitch: 0,
          pitchWithRotate: false,
          collectResourceTiming: false
        });


        this.map.addControl(new mapboxgl.NavigationControl());

        const scale = new mapboxgl.ScaleControl({
          maxWidth: 160,
          unit: 'metric'
        });
        this.map.addControl(scale);

        this.map.on('load', async () => {

          this.mapIsLoaded();
        });

        this.map.on('move', (e) => {
          if (this.markerMoving || this.markerMoveMoving) {
            this.eventMarkerMove.emit(this.map.getCenter());
          }
        });

});

    geocoder.on("result", e => {
      if (e.result && e.result.center) {
        this.map.flyTo({
          center: e.result.center,
          zoom: 12.5,
          speed: 2.0
        });
      }
    });

    this.map.addControl(geocoder);
    this.map.dragRotate.disable();

    this.map.addControl(new mapboxgl.ScaleControl(), "bottom-right");

    this.map.on("load", () => {
      const { filter: filterMap, update: updateMap } = setupMap(this.map, this.props.style);

      this.filterMap = filterMap;
      this.updateMap = updateMap;

      this.map.on("move", () => {
        this.props.setCoordinates({
          lat: this.map.getCenter().lat,
          lng: this.map.getCenter().lng,
          zoom: this.map.getZoom()
        });
      });

      this.updateMap(this.props.style);