使用Google Maps Api Js获取边界框

Question

如何在google maps api中获取多边形的边界框？如果我能实现它，可以使用开放图层，但不能使用谷歌地图。

我需要通过增加或减小边界框的大小来使边界框能够操纵与JSTS的交集。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var bermudaCoords = [
    { lat: 25.774, lng: -80.190 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.190 }
  ];

  // Construct the polygon. //triangulo azul
  var bermudaTriangle = new google.maps.Polygon({
    paths: bermudaCoords,
    strokeColor: '#0404B4',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0404B4',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Construct another polygon.
  var anotherCoords = [
    { lat: 25.774, lng: -85.101 },
    { lat: 35.406, lng: -85.101 },
    { lat: 35.406, lng: -54.127 },
    { lat: 25.774, lng: -60.010 }
  ];

//poligono amarillo
  var anotherArea = new google.maps.Polygon({
    paths: anotherCoords,
    strokeColor: '#FFFF00',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFFF00',
    fillOpacity: 0.35
  });
  anotherArea.setMap(map);



  //calc polygons intersection
  var geometryFactory = new jsts.geom.GeometryFactory();
  var bermudaPolygon = createJstsPolygon(geometryFactory, bermudaTriangle);
  var anotherPolygon = createJstsPolygon(geometryFactory, anotherArea);
  var intersection = bermudaPolygon.intersection(anotherPolygon);
  drawIntersectionArea(map, intersection);
}



function drawIntersectionArea(map, polygon) {
  var coords = polygon.getCoordinates().map(function (coord) {
    return { lat: coord.x, lng: coord.y };
  });

//area de interseccion rosa
  var intersectionArea = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#FE2EF7',
    strokeOpacity: 0.8,
    strokeWeight: 4,
    fillColor: '#FE2EF7',
    fillOpacity: 0.35
  });
  intersectionArea.setMap(map);
}



function createJstsPolygon(geometryFactory, polygon) {
  var path = polygon.getPath();
  var coordinates = path.getArray().map(function name(coord) {
    return new jsts.geom.Coordinate(coord.lat(), coord.lng());
  });
  coordinates.push(coordinates[0]);
  var shell = geometryFactory.createLinearRing(coordinates);
  return geometryFactory.createPolygon(shell);
}

#map,
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>

https://jsfiddle.net/vgrem/3ukpuxq9/

Answer 1

下面的函数将计算google.maps.Polygon的边界

function polygonBounds(polygon) {
   var bounds = new google.maps.LatLngBounds();
   for (var i=0; i<polygon.getPaths().getLength(); i++) {
     for (var j=0; j<polygon.getPaths().getAt(i).getLength(); j++) {
        bounds.extend(polygon.getPaths().getAt(i).getAt(j));
     }
   }
   return bounds;
}

proof of concept fiddle

代码段：

function polygonBounds(polygon) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polygon.getPaths().getLength(); i++) {
    for (var j = 0; j < polygon.getPaths().getAt(i).getLength(); j++) {
      bounds.extend(polygon.getPaths().getAt(i).getAt(j));
    }
  }
  return bounds;
}

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var bermudaCoords = [{
      lat: 25.774,
      lng: -80.190
    },
    {
      lat: 18.466,
      lng: -66.118
    },
    {
      lat: 32.321,
      lng: -64.757
    },
    {
      lat: 25.774,
      lng: -80.190
    }
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: bermudaCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
  var triBnds = new google.maps.Rectangle({
    map: map,
    bounds: polygonBounds(bermudaTriangle)
  })

  // Construct another polygon.
  var anotherCoords = [{
      lat: 25.774,
      lng: -85.101
    },
    {
      lat: 35.406,
      lng: -85.101
    },
    {
      lat: 35.406,
      lng: -54.127
    },
    {
      lat: 25.774,
      lng: -60.010
    }
  ];

  var anotherArea = new google.maps.Polygon({
    paths: anotherCoords,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35
  });
  anotherArea.setMap(map);
  var otherBnds = new google.maps.Rectangle({
    map: map,
    bounds: polygonBounds(anotherArea)
  })



  //calc polygons intersection
  var geometryFactory = new jsts.geom.GeometryFactory();
  var bermudaPolygon = createJstsPolygon(geometryFactory, bermudaTriangle);
  var anotherPolygon = createJstsPolygon(geometryFactory, anotherArea);
  var intersection = bermudaPolygon.intersection(anotherPolygon);
  drawIntersectionArea(map, intersection);
}



function drawIntersectionArea(map, polygon) {
  var coords = polygon.getCoordinates().map(function(coord) {
    return {
      lat: coord.x,
      lng: coord.y
    };
  });

  var intersectionArea = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#00FF00',
    strokeOpacity: 0.8,
    strokeWeight: 4,
    fillColor: '#00FF00',
    fillOpacity: 0.35
  });
  intersectionArea.setMap(map);
}



function createJstsPolygon(geometryFactory, polygon) {
  var path = polygon.getPath();
  var coordinates = path.getArray().map(function name(coord) {
    return new jsts.geom.Coordinate(coord.lat(), coord.lng());
  });
  coordinates.push(coordinates[0]);
  var shell = geometryFactory.createLinearRing(coordinates);
  return geometryFactory.createPolygon(shell);
}


google.maps.event.addDomListener(window, 'load', initMap);

#map,
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>
<div id="map"></div>