Google Maps API로 경계 상자 가져 오기

Question

Google지도 api에서 다각형의 경계 상자를 가져 오는 방법은 무엇입니까? 내가 그것을 달성 할 수 있다면 오픈 레이어와 함께,하지만 Google지도와 함께.

경계 상자의 크기를 늘리거나 줄여서 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; 
} 

012,329의 범위를 계산하는 것 97,232,

코드 :

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>