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