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在投影平面上工作，因此许多投影可能会有所不同。

我在this answer中更深入地了解了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绘制的圆圈小于直线

2 个答案: