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

finish (endPoint) {
    // Remove these events now that finish has been called.
    document.removeEventListener('mousemove', this.onMouseMove)
    document.removeEventListener('mouseup', this.onMouseUp)
    document.removeEventListener('keydown', this.onKeyDown)

    if (this._box) {
      this._box.parentNode.removeChild(this._box)
      this._box = null
    }

    if (this._start && endPoint) { // NOTE: this._start is null when vue hot reloads the map component
      var startLngLat = this._map.unproject(this._start)
      var endLngLat = this._map.unproject(endPoint)
      this.onZoom(new mapboxgl.LngLatBounds(startLngLat, endLngLat))
    }

    this.endBoxZoom()
  }
}

fitBounds =(cb)=> {
    var bounds;
    // hack to fit bounds based on marker coords
    bounds = new mapboxgl.LngLatBounds();
    this.props.data.forEach(function(o) {
      if (!o.lat || !o.lng) {
        return;
      }
      return bounds.extend([o.lng, o.lat]);
    });
    if (!isEmpty(bounds)) {
      this.map.fitBounds(bounds, {
        padding: 20,
        duration: 0
      });
    }
    cb && cb()
  }

it('queryByBounds', (done) => {
        var param = new QueryByBoundsParameters({
            queryParams: {name: "Capitals@World"},
            bounds: new mapboxgl.LngLatBounds([0, 0], [60, 39])
        });
        var queryService = new QueryService(url);
        spyOn(FetchRequest, 'commit').and.callFake((method, testUrl, params, options) => {
            expect(method).toBe("POST");
            expect(testUrl).toBe(url + "/queryResults.json?returnContent=true");
            expect(params).not.toBeNull();
            expect(params).toContain("'queryMode':'BoundsQuery'");
            expect(params).toContain("'bounds': {'rightTop':{'y':39,'x':60},'leftBottom':{'y':0,'x':0}}");
            expect(options).not.toBeNull();
            return Promise.resolve(new Response(JSON.stringify(queryResultJson)));
        });
        queryService.queryByBounds(param, (result) => {
            serviceResult = result
            try {
                expect(queryService).not.toBeNull();
                expect(serviceResult).not.toBeNull();

if (testUrl === url + "/spatialanalyst/buffers.json?token=" + token) {
                var escapedJson = buffersAnalystJob_post;
                return Promise.resolve(new Response(escapedJson));
            }
            return Promise.resolve();
        });
        spyOn(FetchRequest, 'get').and.callFake((newResourceLocationURL) => {
            if (newResourceLocationURL.indexOf(url + "/spatialanalyst/buffers/" + id)===0) {
                var escapedJson = buffersAnalystJob_get;
                return Promise.resolve(new Response(escapedJson));
            }
            return Promise.resolve();
        });
        var buffersJobParameter = new BuffersAnalystJobsParameter({
            datasetName: "samples_processing_newyorkPoint_P",   //必填参数, 源数据集
            bounds: new mapboxgl.LngLatBounds(new mapboxgl.LngLat(74.15, 40.55), new mapboxgl.LngLat(-73.75, 40.95)), //选填参数,分析范围
            distance: "15",     //缓冲区半径
            distanceField: "pickup_latitude",    //缓冲距离字段
            distanceUnit: "Meter",     //缓冲距离单位
            dissolveField: "pickup_longitude"    //融合字段, 根据字段值对缓冲区结果面对象进行融合
        });
        processingService.addBuffersJob(buffersJobParameter, (result) => {
            expect(result.type).toBe("processCompleted");
            expect(result.object.CLASS_NAME).toBe("SuperMap.BuffersAnalystJobsService");
            expect(result.object.format).toBe("GEOJSON");
            expect(result.object.url).toBe(url + "/spatialanalyst/buffers");
            expect(result.result.id).toBe(id);
            var state = result.result.state;
            expect(state.elapsedTime).toEqual(0);
            expect(state.endState).toBeTruthy();
            expect(state.startTime).toEqual(1511242637097);
            expect(state.endTime).toEqual(1511242714269);

zoomToGeometry(geometry: Geometry) {
    let bounds: any;
    if (geometry.type === 'Polygon') {
      const coordinates: number[][] = geometry.coordinates[0];
      bounds = coordinates.reduce((bounds: any, coord) => {
        return bounds.extend(coord);
      }, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
    }
    if (geometry.type === 'MultiPolygon') {
      const sets: number[][][] = geometry.coordinates;
      bounds = sets.reduce((bounds: any, set) => {
        const coordinates: number[] = set[0];
        const innerBounds = coordinates.reduce((inner: any, coord) => {
          return inner.extend(coord);
        }, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
        return bounds.extend(innerBounds);
      }, new mapboxgl.LngLatBounds(sets[0][0][0], sets[0][0][0]));
    }
    if (!bounds) return false;
    const dx = (bounds._ne.lat - bounds._sw.lat);
    const dy = (bounds._ne.lng - bounds._sw.lng);
    const distance = Math.sqrt((dx * dx) + (dy * dy));
    const maxZoom = distance > 30 || this.props.countryProfile === 'usa' ? 1.3 : 3.5;

function getBounds(bbox) {
    var left = +bbox.left,
        right = +bbox.right,
        top = +bbox.top,
        bottom = +bbox.bottom;

    return new mapboxgl.LngLatBounds(
        new mapboxgl.LngLat(left, bottom),
        new mapboxgl.LngLat(right, top)
    );
}

const createBoundsFromCoordinates = (coordinates, bounds) => {
  if (bounds == null) {
    return new LngLatBounds(coordinates, coordinates);
  }

  return bounds.extend(coordinates);
};

setTimeout(() => {
        map.fitBounds(
          coordinates[0].reduce(
            (bounds, coord) => bounds.extend(coord),
            new mapboxgl.LngLatBounds(coordinates[0][0], coordinates[0][0]),
          ),
          options,
        );
      }, 0);
    },

_syncMbMapWithMapState = () => {
    const {
      isMapReady,
      goto,
      clearGoto,
    } = this.props;

    if (!isMapReady || !goto) {
      return;
    }

    clearGoto();

    if (goto.bounds) {
      //clamping ot -89/89 latitudes since Mapboxgl does not seem to handle bounds that contain the poles (logs errors to the console when using -90/90)
      const lnLatBounds = new mapboxgl.LngLatBounds(
        new mapboxgl.LngLat(clamp(goto.bounds.min_lon, -180, 180), clamp(goto.bounds.min_lat, -89, 89)),
        new mapboxgl.LngLat(clamp(goto.bounds.max_lon, -180, 180), clamp(goto.bounds.max_lat, -89, 89)),
      );
      //maxZoom ensure we're not zooming in too far on single points or small shapes
      //the padding is to avoid too tight of a fit around edges
      this._mbMap.fitBounds(lnLatBounds, { maxZoom: 17, padding: 16 });
    } else if (goto.center) {
      this._mbMap.setZoom(goto.center.zoom);
      this._mbMap.setCenter({
        lng: goto.center.lon,
        lat: goto.center.lat
      });
    }


  };