谷歌地图API V3如何将多边形旋转特定角度

Question

我正在使用谷歌地图来允许用户绘制多边形，然后使用地图API和某种几何方法来绘制最小边界正方形，该正方形覆盖绘制的多边形，并且相对于y轴旋转16度。也就是说，边界正方形应该包围整个多边形区域，并且应该相对于y轴旋转16度。

非常感谢您的帮助

敬礼

- Omran

Answer 1

这是一个复杂的问题。我可以概括一下解决方案的步骤：

解决方案大纲

1. 获取地图投影（map.getProjection()），并使用projection.fromLatLngToPoint将用户多边形转换为点平面。
2. 将用户多边形旋转-16度。
3. 计算新旋转的用户多边形的边界正方形/多边形。
4. 将您的多边形旋转+16度。
5. 使用projection.fromPointToLatLng将您的多边形顶点转换回LatLng坐标。

资源:

• Google Maps Api Projection: https://developers.google.com/maps/documentation/javascript/reference#Projection
• Google Maps API Point Plane Documentation: https://developers.google.com/maps/documentation/javascript/maptypes#WorldCoordinates
• 多边形变换算法: http://www.kralidis.ca/gis/compcart/polytrans/

- Chad Killingsworth

---

有没有内置的算法可以让我旋转用户多边形？ - Omran

不，旋转不是API的一部分。 - Chad Killingsworth

参见： http://stackoverflow.com/questions/12464754/draw-a-rectangle-arround-a-polygon-when-given-in-certain-angle - here

Answer 2

以下示例演示如何旋转一个多边形（{{link1： google.maps.Polygon class }}）。

操作指南：

• 绘制一个多边形
• 单击已绘制的多边形以旋转它

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

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              google.maps.drawing.OverlayType.POLYGON
            ]
        }
    });
    drawingManager.setMap(map);



    google.maps.event.addListener(drawingManager, "overlaycomplete", function (event) {
        var polygon = event.overlay;
        google.maps.event.addListener(polygon, 'click', function (e) {
            autoRotatePolygon(polygon, 5);
        });
    });

}

function autoRotatePolygon(polygon, angle) {
    window.setInterval(function () {
        rotatePolygon(polygon, 5);
    }, 250);
}



function rotatePolygon(polygon,angle) {
    var map = polygon.getMap();
    var prj = map.getProjection();
    var origin = prj.fromLatLngToPoint(polygon.getPath().getAt(0)); //rotate around first point

    var coords = polygon.getPath().getArray().map(function(latLng){
       var point = prj.fromLatLngToPoint(latLng);
       var rotatedLatLng =  prj.fromPointToLatLng(rotatePoint(point,origin,angle));
       return {lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng()};
    });
    polygon.setPath(coords);
}

function rotatePoint(point, origin, angle) {
    var angleRad = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
        y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
    };
}

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

#map {
    height: 100%;
}

<div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=drawing"></script>

JSFiddle

- Vadim Gremyachev