Openlayers 3画的圆比直线小

Question

我正在画一个圆，里面有一条线显示它的半径，我使用相同的线坐标，但结果我得到一个更小的圆，有什么帮助吗？？？

 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);
    };

Answer 1

您将圆的半径设置为两点之间的实际距离，而不是投影距离。由于 ol3 在投影平面上工作，因此许多投影可能不同。

我在中更深入地介绍了 ol3 中投影半径和实际半径之间的差异。

Answer 2

您的代码看起来很复杂。如果半径只是为了看起来，为什么不沿着这条线做一些简单的事情：

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();
}

其中方向可能是圆的旋转弧度：0 到 2*PI，上下文是 canvasRenderingContext2D.

您的圆生成器可能如下所示：

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;
}

这将使您的圆心位于 point_a_，边缘位于 point_b_。它的半径将等于两点之间的距离。

我意识到这很简单JavaScript，但概念保持不变。使用距离公式得到圆的半径等于两点之间的距离，并将圆的中心设置为其中一个点。

Openlayers 3画的圆比直线小

Openlayers 3 drawn circle is smaller than the line

javascript

openlayers-3