Openlayers 3绘制的圆圈小于直线(Openlayers 3 drawn circle is smaller than the line)

Openlayers 3绘制的圆圈小于直线(Openlayers 3 drawn circle is smaller than the line)

我画了一个圆圈，里面有一条显示其半径的线，我使用相同的线坐标，但结果我得到一个较小的圆圈，任何帮助???

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

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

最满意答案

你的代码看起来很激烈。 如果半径只是为了看起来，为什么不只是简单地沿着这个方向：

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，但概念仍然相同。 使用距离公式可以使圆的半径等于两点之间的距离，并将圆的中心设置为其中一个点。

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.