2015-09-08 34 views
0

我正在绘制一个圆形并在其内部显示其半径的线条,我使用了相同的线条坐标,但结果我得到一个更小的圆形,任何帮助?Openlayers 3绘制的圆形比线条小

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

你可以把它放在小提琴上吗?我不确定你想要做什么。 –

回答

0

你的代码看起来相当激烈。如果半径仅仅是长相,为什么不干脆去的东西沿着这行简单:

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,但概念保持不变。使用距离公式计算圆的半径等于两点之间的距离,并将圆的中心设置为其中一个点。

0

您将圆的半径设置为两点之间的实际距离,而不是投影距离。由于ol3在投影平面上工作,所以对于许多投影来说这可能是不同的。

我更详细地写了this answer中ol3中投影和实际半径之间的差异。