openlayers - 使用 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]);

}

与 OpenLayers.Util.destinationVincenty 和 OpenLayers.Geometry.LinearRing 等函数等效的传单是什么？知道了这一点，我想我可以使用传单重写该函数以使其工作。帮助？？

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与传单一起工作。

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

返回:
{L.latLng} 目的地点。

很多触发功能。不要害怕。我们只需要更改几行(感谢 John B 的想法。传单的函数看起来像这样。

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 {....}

就是这样!希望能帮助到你。