Openlayers 3 drawn circle is smaller than the line

Question

I am drawing a circle and inside it a line that shows its radius , i use same line coordinates , but as result i get a smaller circle , any help ???

 function DrawLine() {
        var lineCoordinates = [[3210202.3139208322, 5944966.311907868], [3075978.8922520624, 6055647.128864803]];
        var line = new ol.geom.LineString(lineCoordinates);
        var feature = new ol.Feature(line);

        var id = guid();
        feature.featureID = id;
        feature.setProperties({
            'id': id,
            'name': typeSelect.value,
            'description': 'Some values'
        })
        source.addFeature(feature);
    };

    function DrawCircle() {
        var sourceProj = map.getView().getProjection();
        var wgs84Sphere = new ol.Sphere(6378137);
        var c1 = ol.proj.transform([3210202.3139208322, 5944966.311907868], sourceProj, 'EPSG:4326');
        var c2 = ol.proj.transform([3075978.8922520624, 6055647.128864803], sourceProj, 'EPSG:4326');
        var distance = wgs84Sphere.haversineDistance(c1, c2);

        var point = new ol.geom.Circle([3210202.3139208322, 5944966.311907868],distance,'XY');
        var feature = new ol.Feature(point);
        console.log(distance);
        var id = guid();
        feature.featureID = id;
        feature.setProperties({
            'id': id,
            'name': typeSelect.value,
            'description': 'Some values'
        })
        source.addFeature(feature);
    };

Would you put this on a fiddle? I'm not sure what you're trying to do. — Jonatas Walker, Sep 08 '15 at 17:19

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

You set the radius of the circle to the real distance between the two points, not the projected distance. Since ol3 works on the projected plane, those might be different for many projections.

I wrote more in depth about the difference between projected and real radii in ol3 in this answer.

edited May 23 '17 at 11:52

Community

1
1

answered Sep 08 '15 at 21:07

Alvin Lindstam

3,094
16
28

score 0 · Accepted Answer · answered Sep 08 '15 at 21:31

Your code looks pretty intense. If the radius is just for looks, why not just go with something simple along the lines of this:

function drawRadius(circle_, direction_){
    context.moveTo(circle_.center_x, circle_.center_y);
    context.lineTo(circle_.center_x + Math.cos(direction_) * circle_.radius, circle_.center_y + Math.sin(direction_) * circle_.radius);
    context.stroke();
}

Where direction is maybe the rotation of the circle in radians: 0 to 2*PI, and the context is a canvasRenderingContext2D.

Your circle generator could look like this:

function getCircleFromPoints(point_a_, point_b_){
    var distance_x=point_b_.x-point_a_.x;
    var distance_y=point_b_.y-point_a_.y;

    var circle={
        center_x:point_a_.x;
        center_y:point_a_.y;
        radius:Math.sqrt(distance_x*distance_x+distance_y*distance_y);
    };

    return circle;
}

This will put your circle's center at point_a_ and its edge at point_b_. It's radius will be equal to the distance between the two points.

I realize that this is all plain JavaScript, but the concept remains the same. Use the distance formula to get the radius of the circle equal to the distance between the two points and set the circle's center to one of the points.

Openlayers 3 drawn circle is smaller than the line

2 Answers2