编写一个函数,使用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以使用Leaflet.

参数: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 {....}

而已!希望能帮助到你.