Draw a circle with defined diameter in OpenLayers

2019-05-23 07:15发布

问题:

I'm trying to write a code which let my users define some points on the map and once they created a point, the program should draw a circle with defined diameter(in kilometers or ... ) around the point.

I can draw a point but I don't know how I could handle what I said.

Here is an example about what I want:

回答1:

Use the following function to create circular points around a point.

//pass the 
//@pointX, 
//@pointY, 
//@radius of circle (in your case diameter/2)
//@pointsToFind this is how detail you want the circle to be (360 if you want one point for each rad)

function createCirclePointCoords(circleCenterX,circleCenterY,circleRadius,pointsToFind){
      var angleToAdd = 360/pointsToFind;
      var coords = [];  
      var angle = 0;
        for (var i=0;i<pointsToFind;i++){
        angle = angle+angleToAdd;
            console.log(angle);
        var coordX = circleCenterX + circleRadius * Math.cos(angle*Math.PI/180);
        var coordY = circleCenterY + circleRadius * Math.sin(angle*Math.PI/180);
            coords.push([coordX,coordY]);
        }

    return coords;
    }

And then create a polygon out of the coordinates returned from the function

var circleCoords = createCirclePointCoords(0,0,1000,360);
var geom = new ol.geom.Polygon([
circleCoords
])