javascript - 函数令人惊讶地改变传单 map 中的多边形坐标

Question

我正在尝试为传单 map 创建一些功能，为每个创建的标记添加具有特定旋转的三 Angular 形。
这是创建标记并添加三 Angular 形的函数(效果很好):

function add_items_to_map( to_map, longitude, latitude, path, polygon_color, rotation_of_polygon, fov )
{
    var newMarker = L.marker([latitude, longitude]).addTo( to_map );
    markerGroup.addLayer( newMarker );

    var b = ( 2 * Math.sin( (fov*Math.PI/180.0)/2 ) ) / 2;
    var h = Math.sqrt( 1 - b*b );
// stuff to rotate triangle
    var angleRad = -rotation_of_polygon * Math.PI / 180.0;
    var y_ = parseFloat(latitude) + h;
    var x_1 = parseFloat(longitude) - b;
    var x_2 = parseFloat(longitude) + b;

    var origin_point = new Array();
    var pnt = new Array();
    origin_point[0] = parseFloat(longitude);
    origin_point[1] = parseFloat(latitude);
// rotation
    pnt[0] = Math.cos(angleRad) * (origin_point[0] - origin_point[0]) - Math.sin(angleRad) * (origin_point[1] - origin_point[1]) + origin_point[0];
    pnt[1] = Math.sin(angleRad) * (origin_point[0] - origin_point[0]) + Math.cos(angleRad) * (origin_point[1] - origin_point[1]) + origin_point[1];
    pnt[2] = Math.cos(angleRad) * (x_1 - origin_point[0]) - Math.sin(angleRad) * (y_ - origin_point[1]) + origin_point[0];
    pnt[3] = Math.sin(angleRad) * (x_1 - origin_point[0]) + Math.cos(angleRad) * (y_ - origin_point[1]) + origin_point[1];
    pnt[4] = Math.cos(angleRad) * (x_2 - origin_point[0]) - Math.sin(angleRad) * (y_ - origin_point[1]) + origin_point[0];
    pnt[5] = Math.sin(angleRad) * (x_2 - origin_point[0]) + Math.cos(angleRad) * (y_ - origin_point[1]) + origin_point[1];

    var polygon = L.polygon(
                        [   [pnt[1], pnt[0]],
                            [pnt[3], pnt[2]],
                            [pnt[5], pnt[4]]
                        ],
                        {
                            color: polygon_color
    }).addTo(to_map);
    polygonLayer.push( polygon );
// this function makes me trouble
    // var rot_polygon = rotate_polygon( polygon.getLatLngs(), rotation_of_polygon );
}

当我调用这样的函数时:add_items_to_map( map, 0, 0, path[0], 'green', 270, 90 );一切正常，三 Angular 形旋转如下图所示:

问题是最后一行 - var rot_polygon = rotate_polygon( polygon.getLatLngs(), rotation_of_polygon );我的函数被调用。
这个函数看起来像这样:

function rotate_polygon( points, angle )
{
    var angleRad = angle * Math.PI / 180.0;
    var origin_point = new Array();
    origin_point[0] = points[0]['lng'];
    origin_point[1] = points[0]['lat'];

    points[0]['lat'] = Math.cos(angleRad) * (points[0]['lat'] - origin_point[0]) - Math.sin(angleRad) * (points[0]['lng'] - origin_point[1]) + origin_point[0];
    points[0]['lng'] = Math.sin(angleRad) * (points[0]['lat'] - origin_point[0]) + Math.cos(angleRad) * (points[0]['lng'] - origin_point[1]) + origin_point[1];
    points[1]['lat'] = Math.cos(angleRad) * (points[1]['lat'] - origin_point[0]) - Math.sin(angleRad) * (points[1]['lng'] - origin_point[1]) + origin_point[0];
    points[1]['lng'] = Math.sin(angleRad) * (points[1]['lat'] - origin_point[0]) + Math.cos(angleRad) * (points[1]['lng'] - origin_point[1]) + origin_point[1];
    points[2]['lat'] = Math.cos(angleRad) * (points[2]['lat'] - origin_point[0]) - Math.sin(angleRad) * (points[2]['lng'] - origin_point[1]) + origin_point[0];
    points[2]['lng'] = Math.sin(angleRad) * (points[2]['lat'] - origin_point[0]) + Math.cos(angleRad) * (points[2]['lng'] - origin_point[1]) + origin_point[1];

    return points;
}  

这就是我调用它时发生的情况:

它修改创建的多边形中的坐标。你知道为什么吗？

Answer 1

在不调试您的方法的情况下，我想说旋转纬度点比您在这里尝试的更多。您需要旋转该点而不是纬度，并考虑 map 的投影。看看这个取自L.GeometryUtil的方法:

/**
   Returns LatLng of rotated point around specified LatLng center.
    @param {L.LatLng} latlngPoint: point to rotate
    @param {double} angleDeg: angle to rotate in degrees
    @param {L.LatLng} latlngCenter: center of rotation
    @returns {L.LatLng} rotated point
 */
rotatePoint: function(map, latlngPoint, angleDeg, latlngCenter) {
    var maxzoom = map.getMaxZoom();
    if (maxzoom === Infinity)
        maxzoom = map.getZoom();
    var angleRad = angleDeg*Math.PI/180,
        pPoint = map.project(latlngPoint, maxzoom),
        pCenter = map.project(latlngCenter, maxzoom),
        x2 = Math.cos(angleRad)*(pPoint.x-pCenter.x) - Math.sin(angleRad)*(pPoint.y-pCenter.y) + pCenter.x,
        y2 = Math.sin(angleRad)*(pPoint.x-pCenter.x) + Math.cos(angleRad)*(pPoint.y-pCenter.y) + pCenter.y;
    return map.unproject(new L.Point(x2,y2), maxzoom);
}

https://github.com/makinacorpus/Leaflet.GeometryUtil/blob/master/dist/leaflet.geometryutil.js#L483

多边形的使用示例:

var polygon = new L.Polygon([[[-45,-45],[-45,45],[45,45],[45,-45]]]).addTo(map),
    latLngs = polygon.getLatLngs(),
    bounds = polygon.getBounds(),
    center = bounds.getCenter(),
    newLatLngs = [],
    angle = 45;

latLngs.forEach(function (latLng) {
    newLatLngs.push(L.GeometryUtil.rotatePoint(map, latLng, angle, center));
});

polygon.setLatLngs(newLatLngs);

Plunker 上的工作示例:http://plnkr.co/edit/5j7jFgJcNcTP9IjUo9ou?p=preview

如果您考虑到这一点并重写您的方法来分离/创建一个用于旋转单个纬度的方法，您将不会遇到当前遇到的问题。希望有帮助。祝你好运!