Mapbox.gl some common utility functions

// Calculate the bounds of polygon /* map: map instance object */

fitPolygonBoundingBox(mapbox, coordinates) { // bounds [xMin, yMin][xMax, yMax] const bounds = [[], []]; let polygon; let latitude; let longitude; // tslint:disable-next-line:prefer-for-of for (let i = 0; i < coordinates.length; i++) { if (coordinates.length === 1) { // Polygon coordinates[0][nodes] polygon = coordinates[0]; } else { // Polygon coordinates[poly][0][nodes] polygon = coordinates[i][0]; } // tslint:disable-next-line:prefer-for-of for (let j = 0; j < polygon.length; j++) { longitude = polygon[j][0]; latitude = polygon[j][1]; bounds[0][0] = bounds[0][0] < longitude ? bounds[0][0] : longitude; bounds[1][0] = bounds[1][0] > longitude ? bounds[1][0] : longitude; bounds[0][1] = bounds[0][1] < latitude ? bounds[0][1] : latitude; bounds[1][1] = bounds[1][1] > latitude ? bounds[1][1] : latitude; }}Copy the code

// console.log(bounds); mapbox.fitBounds(bounds, { padding: 200 }); }

/// Multepoly’s bounds compute location /* map: map instance object */

getBoundingBox(data, map) { let bounds = {}; let coords; let point; let latitude; let longitude; // We want to use the "features" key of the FeatureCollection (see above) data = data.features; // Loop through each "feature" // tslint:disable-next-line: prefer-for-for for (let I = 0; i < data.length; i++) { // Pull out the coordinates of this feature coords = data[i].geometry.coordinates[0]; // For each individual coordinate in this feature coordinates... // tslint:disable-next-line:prefer-for-of for (let j = 0; j < coords.length; j++) { point = coords[j]; // tslint:disable-next-line:prefer-for-of for (let a = 0; a < point.length; a++){ longitude = point[a][0]; latitude = point[a][1]; // Update the bounds recursively by comparing the current // xMin/xMax and yMin/yMax with the coordinate // we're currently checking bounds['xMin'] = bounds['xMin'] < longitude ? bounds['xMin'] : longitude; bounds['xMax'] = bounds['xMax'] > longitude ? bounds['xMax'] : longitude; bounds['yMin'] = bounds['yMin'] < latitude ? bounds['yMin'] : latitude; bounds['yMax'] = bounds['yMax'] > latitude ? bounds['yMax'] : latitude; } } } // Returns an object that contains the bounds of this GeoJSON // data. The keys of this object describe a box formed by the // northwest (xMin, yMin) and southeast (xMax, yMax) coordinates. // console.log(bounds); map.fitBounds([[bounds['xMin'], bounds['yMin']], [bounds['xMax'], bounds['yMax']]], 200); // return bounds; }Copy the code

// line bounds calculates the position

/* map: map instance object */

  fitLineBounds(map, coordinates){
    const bounds = coordinates.reduce( (bound, coord) => {
      return bound.extend(coord);
    },
    new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));
    console.log(bounds);
    map.fitBounds(bounds, {
      padding: 20
    });
  }
Copy the code

// Get the screen coordinates of the mouse click

/* map: map instance object */

  mousePos(map, e) {
    const canvas = map.getCanvasContainer();
    const rect = canvas.getBoundingClientRect();
    return new mapboxgl.Point(
    e.clientX - rect.left - canvas.clientLeft,
    e.clientY - rect.top - canvas.clientTop
    );
  }
Copy the code