函數令人驚訝地改變傳單地圖中的多邊形座標

Question

我想創建一些功能傳單地圖，爲每個創建的標記我加特定的旋轉三角形。
這是函數來創建標記並添加三角形（這個效果很好）：

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);一切正常，三角旋轉像這樣的畫面：

問題是當我的函數最後一行 - 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; 
} 

這是發生了什麼，當我把它叫做：

它修改中創建的多邊形COORDS。你有什麼想法爲什麼？

Answer 1

沒有調試你的方法，我想說還有更多的旋轉latlng點然後你在這裏嘗試。您需要旋轉該點而不是latlng，並考慮地圖的投影。看看這個方法從L.GeometryUtil採取：上Plunker

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); 

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

如果採取

/** 
    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

與多邊形使用示例考慮到並重寫你的方法來分離/創建一個旋轉單個latlngs的方法，你將不會有問題喲我目前正在經歷。希望有所幫助。祝你好運！