1

我正在尝试为传单地图创建一些功能，为每个创建的标记添加具有特定旋转的三角形。
这是创建标记和添加三角形的功能（效果很好）：

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 );一切正常，三角形旋转如下图所示：

<一个href=

问题是当最后一行 -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;
}

这就是我调用它时发生的情况： <一个href=

它修改创建的多边形中的坐标。你有什么想法为什么？

4

1 回答 1

3

如果不调试你的方法，我想说旋转一个纬度点比你在这里尝试的要多。您需要旋转点而不是 latlng 并考虑地图的投影。看看这个方法取自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

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

于 2016-02-13T01:04:10.737 回答