2016-01-23 71 views
1

我有一个问题,在我的单张地图我从多边形创建了一个三角绕点多边形:在单张地图

var polygon = L.polygon([ 
    [parseFloat(decimal_lat),parseFloat(decimal_lon)], 
    [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1], 
    [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ],  
    { 
      color:'green' 
    }); 
polygon.addTo(map); 

,我想围绕Point[decimal_lon, decimal_lat]旋转此多边形。但我无法解决它..
我创建了DEMO,我正在旋转polynom相同我想旋转我的三角形(多边形)以显示我的问题。

+0

你为什么问这两次? http://stackoverflow.com/questions/34965293/moving-with-polygon-around-point-on-leaflet-map – iH8

+0

试图更好地问 –

回答

4

一种方法是通过矩阵旋转。 https://en.wikipedia.org/wiki/Rotation_matrix。 您想将点转换到中心,然后应用旋转,然后将其翻译回来。

这就是代码的结尾。

//changing polyline with slider but I want to change polygon there 
    range_yaw.onchange = function() { 
    var yawAngle = (parseFloat(range_yaw.value)/(819/360) + 90) 
    // line 
    var center = [decimal_lat, decimal_lon] 
    var end = [decimal_lat + 2, decimal_lon + 2] 
    var pointListRotated = rotatePoints(center, [center, end], yawAngle) 
    polyline.setLatLngs(pointListRotated); 
    // polygon 
    var polygonPoints = [ 
     center, 
     [center[0] + 1, center[1] - 1], 
     [center[0] + 1, center[1] + 1] 
    ] 
    polygonRotated = rotatePoints(center, polygonPoints, yawAngle) 
    polygon.setLatLngs(polygonRotated) 
    }; 

    // 
    // rotate a list of points in [lat, lng] format about the center. 
    // 
    function rotatePoints(center, points, yaw) { 
    var res = [] 
    var angle = yaw * (Math.PI/180) 
    for(var i=0; i<points.length; i++) { 
     var p = points[i] 
     // translate to center 
     var p2 = [ p[0]-center[0], p[1]-center[1] ] 
     // rotate using matrix rotation 
     var p3 = [ Math.cos(angle)*p2[0] - Math.sin(angle)*p2[1], Math.sin(angle)*p2[0] + Math.cos(angle)*p2[1]] 
     // translate back to center 
     var p4 = [ p3[0]+center[0], p3[1]+center[1]] 
     // done with that point 
     res.push(p4) 
    } 
    return res 
    } 

这里是一个DEMO

+0

它是歪曲的耻辱。你知道一个在旋转时不偏斜多边形的实现吗? – jperelli

0

可以接近它的几种方法。这里是一个...

第一:计算从锚点到两个'外'点的方位和距离。这里有几个帮手功能: https://github.com/gregallensworth/Leaflet/blob/master/LatLng_Bearings.js

第二:调整那些轴承,但是你想要...保持原来的距离。

第三:使用新的轴承和距离,在这里使用公认的答案计算新LatLngs:How to calculate the latlng of a point a certain distance away from another?(这里使用的谷歌地图,而不是单张,但它很容易移植到单张)

让我知道如果你有任何问题实施...