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

但是，ol.geom.Circle不是这样工作的。但是，Canvas 允许在其规范中使用 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();

这是一个小提琴