mapbox.gl一些常用工具函数

// 计算polygon的bounds /* map:地图实例对象 */

  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;
    }
}

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

/// multepoly的bounds计算定位 /* map:地图实例对象 */

 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-of
  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's 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;
 }

// line bounds 计算定位

/* map:地图实例对象 */

  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
    });
  }

// 得到鼠标点击时的屏幕坐标

/* map:地图实例对象 */

  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
    );
  }