Openlayers ol.geom.Circle

Question

在ol.geom.Polygon中，我可以发送代表不同地图坐标的数组数组。这让我通过发送坐标的顺时针顺序中的第一阵列创建一个有一个“洞”的多边形，以及随后的坐标较小，逆时针顺序，就像这样：

var vertices = [ 
    ol.proj.transform([-63.63, 49.45], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-129.02, 49.45], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-129.02, 23.80], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-63.63, 23.80], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-63.63, 49.45], 'EPSG:4326', 'EPSG:3857') 
]; 
var inner = [ 
    ol.proj.transform([-106.56, 41.16], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-97.73, 41.16], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-97.73, 37.66], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-106.56, 37.66], 'EPSG:4326', 'EPSG:3857'), 
    ol.proj.transform([-106.56, 41.16], 'EPSG:4326', 'EPSG:3857') 
]; 
var poly = new ol.Feature({ 
    geometry: new ol.geom.Polygon([vertices, inner]) 
}); 

然而，醇。 geom.Circle不会那样工作。但是，画布允许在其规范中使用可选标志，以便arc（）方法逆时针绘制圆。我希望能够将反向标志发送到ol.geom.Circle方法。我也需要将几何数据数组发送到Circle方法，就像使用ol.geom.Polygon一样。

Answer 1

这不适用于ol.geom.Circle类。我认为ol3 API是明确的。 但是，有一种解决方法：

除了使用ol.geom.Circle，您可以创建圆形多边形，然后追加孔的线性环。要做到这一点：

var circleCenter = [2633654,4572283]; 


var circleLayerSource = new ol.source.Vector({}); 
var circleStyle = new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: 'rgba(0, 0, 0, 0.4)', 
     width: 5 
    }), 
    fill: new ol.style.Fill({ 
     color: 'rgba(0, 255, 0, 0.4)' 
    }) 
}); 
var circleLayer = new ol.layer.Vector({ 
    source: circleLayerSource, 
    style: circleStyle 
}); 

var map = new ol.Map({ 
    target: 'map', 
    layers: [ 
    new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }), 
    circleLayer 
    ], 
    view: new ol.View({ 
    center: circleCenter, 
    zoom: 10 
    }) 
}); 


function drawCircleWithHole(){ 
var circleGeom = new ol.geom.Polygon([ 
    createCirclePointCoords(circleCenter[0],circleCenter[1],30000,60) 
]); 
var inCircleCoords = createCirclePointCoords(circleCenter[0],circleCenter[1],10000,60); 
circleGeom.appendLinearRing(new ol.geom.LinearRing(inCircleCoords)); 
circleLayer.getSource().addFeature(new ol.Feature(circleGeom)); 
} 




/** 
* pass the x, y center of the circle 
* the radius of circle 
* and the number of points to form the circle 
* 60 points seems to be fine in terms of visual impact 
*/ 
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; 
     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; 
} 


drawCircleWithHole(); 

这里是一个fiddle