3

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

非常感谢您的帮助

问候

4

2 回答 2

2

这是一个复杂的问题。我可以概述一些步骤，让您获得最大的成功：

解决方案概要

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

资源：

于 2012-05-11T13:49:21.300 回答
0

以下示例演示如何旋转多边形 ( 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

于 2015-12-28T16:58:17.690 回答