使用Leaflet.js编写一个将圆形转换为多边形的函数

Question

下面是一个示例函数，展示了如何在ol2中完成此操作。http://jsfiddle.net/4S5Ke/166/以下是部分代码：

function createGeodesicPolygon(origin, radius, sides, rotation, projection) {

if (projection.getCode() !== "EPSG:4326") {
    origin.transform(projection, new OpenLayers.Projection("EPSG:4326"));
}
var latlon = new OpenLayers.LonLat(origin.x, origin.y);

var angle;
var new_lonlat, geom_point;
var points = [];

for (var i = 0; i < sides; i++) {
    angle = (i * 360 / sides) + rotation;
    new_lonlat = OpenLayers.Util.destinationVincenty(latlon, angle, radius);
    new_lonlat.transform(new OpenLayers.Projection("EPSG:4326"), projection);
    geom_point = new OpenLayers.Geometry.Point(new_lonlat.lon, new_lonlat.lat);
    points.push(geom_point);
}
var ring = new OpenLayers.Geometry.LinearRing(points);
return new OpenLayers.Geometry.Polygon([ring]);

Leaflet中对应OpenLayers.Util.destinationVincenty和OpenLayers.Geometry.LinearRing功能的是什么？了解这些，我就可以重写函数以使用leaflet。能帮忙吗？

- Alfonse Pinto

---

最終，Vincenty公式是眾所周知的，即使數學有點複雜，而OpenLayers是開源的。只需重新編寫出現在此處的功能：http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Util.js - John Powell

谢谢John B。也许我确实需要按照你的建议去做，但我希望我不必这样做。;) 顺便说一下，我想我可能已经找到了一个类似于OpenLayers.Geometry.LinearRing()的leaflet等效函数。我认为它是L.GeometryUtil.geodesicArea()？有人可以确认一下吗？ - Alfonse Pinto

看起来你已经在下面找到了答案。似乎在leaflet中有适用于所有情况的插件。 - John Powell

Answer 1

嗯...我最终做的是重写了一些OpenLayers 2的函数，使它们可以在Leaflet中使用。其中一个函数会创建一个指定半径的正多边形。函数如下：

function createGeodesicPolygon(origin, radius, sides, rotation, projection) {
  var latlon = origin; //leaflet equivalent
  var angle;
  var new_lonlat, geom_point;
  var points = [];

   for (var i = 0; i < sides; i++) {
      angle = (i * 360 / sides) + rotation;
      new_lonlat = destinationVincenty(latlon, angle, radius); 
      geom_point = L.latLng(new_lonlat.lng, new_lonlat.lat); 

      points.push(geom_point); 
    }   

  return points; 
} 

现在来介绍一些三角函数知识。首先，我们设定一些常数：

L.Util.VincentyConstants = {
    a: 6378137,
    b: 6356752.3142,
    f: 1/298.257223563  
};

然后我们重写OpenLayers.Util.destinationVincenty函数http://dev.openlayers.org/docs/files/OpenLayers/Util-js.html#Util.destinationVincenty，使其能在Leaflet中使用。

参数： lonlat -（任何具有 .lat 和 .lng 属性的对象）起点。 brng - {Float} 方位角（度）。 dist - {Float} 地面距离（米）。

返回值： {L.latLng} 目标点。

有很多三角函数。不要害怕。我们只需要更改几行代码（感谢John B提供的想法）。该函数在Leaflet中看起来像这样。

function destinationVincenty(lonlat, brng, dist) { //rewritten to work with leaflet

    var u = L.Util;
    var ct = u.VincentyConstants;
    var a = ct.a, b = ct.b, f = ct.f;
    var lon1 = lonlat.lng;
    var lat1 = lonlat.lat;
    var s = dist;
    var pi = Math.PI;
    var alpha1 = brng * pi/180 ; //converts brng degrees to radius
    var sinAlpha1 = Math.sin(alpha1);
    var cosAlpha1 = Math.cos(alpha1);
    var tanU1 = (1-f) * Math.tan( lat1 * pi/180 /* converts lat1 degrees to radius */ ); 
    var cosU1 = 1 / Math.sqrt((1 + tanU1*tanU1)), sinU1 = tanU1*cosU1;
    var sigma1 = Math.atan2(tanU1, cosAlpha1);
    var sinAlpha = cosU1 * sinAlpha1;
    var cosSqAlpha = 1 - sinAlpha*sinAlpha;
    var uSq = cosSqAlpha * (a*a - b*b) / (b*b);
    var A = 1 + uSq/16384*(4096+uSq*(-768+uSq*(320-175*uSq)));
    var B = uSq/1024 * (256+uSq*(-128+uSq*(74-47*uSq)));
    var sigma = s / (b*A), sigmaP = 2*Math.PI;
    while (Math.abs(sigma-sigmaP) > 1e-12) {
        var cos2SigmaM = Math.cos(2*sigma1 + sigma);
        var sinSigma = Math.sin(sigma);
        var cosSigma = Math.cos(sigma);
        var deltaSigma = B*sinSigma*(cos2SigmaM+B/4*(cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)-
            B/6*cos2SigmaM*(-3+4*sinSigma*sinSigma)*(-3+4*cos2SigmaM*cos2SigmaM)));
        sigmaP = sigma;
        sigma = s / (b*A) + deltaSigma;
    }
    var tmp = sinU1*sinSigma - cosU1*cosSigma*cosAlpha1;
    var lat2 = Math.atan2(sinU1*cosSigma + cosU1*sinSigma*cosAlpha1,
        (1-f)*Math.sqrt(sinAlpha*sinAlpha + tmp*tmp));
    var lambda = Math.atan2(sinSigma*sinAlpha1, cosU1*cosSigma - sinU1*sinSigma*cosAlpha1);
    var C = f/16*cosSqAlpha*(4+f*(4-3*cosSqAlpha));
    var lam = lambda - (1-C) * f * sinAlpha *
        (sigma + C*sinSigma*(cos2SigmaM+C*cosSigma*(-1+2*cos2SigmaM*cos2SigmaM)));  
    var revAz = Math.atan2(sinAlpha, -tmp);  // final bearing
    var lamFunc = lon1 + (lam * 180/pi); //converts lam radius to degrees
    var lat2a = lat2 * 180/pi; //converts lat2a radius to degrees

    return L.latLng(lamFunc, lat2a);

}

由于我使用了Leaflet.Draw来创建这个圆，所以我像这样调用它：

map.on('draw:created', function (e) {

        var type = e.layerType,
            layer = e.layer;
        if (type === 'circle') {

            var origin = layer.getLatLng(); //center of drawn circle
            var radius = layer.getRadius(); //radius of drawn circle
            var projection = L.CRS.EPSG4326;
            var polys = createGeodesicPolygon(origin, radius, 60, 0, projection); //these are the points that make up the circle
            var polygon = []; // store the geometry
            for (var i = 0; i < polys.length; i++) {
                var geometry = [polys[i].lat, polys[i].lng]; 
                polygon.push(geometry);
            }

            var polyCircle = L.polygon(polygon).addTo(map); //convert geometry to a leaflet polygon and add it to the map

        } else {....}

就是这样啦！希望有所帮助。

- Alfonse Pinto

---

不错，自己动手总是很满足的。我刚刚检查了一下，OpenLayers有BDS许可证，所以使用Vincenty公式不用担心——数学公式已经公开可用了。 - John Powell

Answer 2

您可以使用插件：有Leaflet.Geodesic和leaflet-geodesy可供选择，它们都提供测地圆。

- tmcw