如何在OpenLayers 3中插入半圈样式标记

Question

是否可以插入如下所示的半圆形？

我想将其用作矢量点标记。

RegularShape接近我的意图，但它似乎仅适用于“常规形状”。

我还发现了一个使用Icon的示例，它看起来非常有用，并且使用多边形也可以实现类似的结果。 有没有更聪明的方法？

使用Point代替Polygon并遮盖另一半该怎么办？ 谢谢。

Answer 1

就像在您发现的示例中一样，您可以创建一个画布并将其用作icon样式的img ：

var canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 4;
var radius = canvas.width / 4;
var startingAngle = Math.PI / 2;
var endingAngle = -Math.PI / 2;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle,
    endingAngle, counterclockwise);
context.fillStyle = '#bada55';
context.fill();
style = new ol.style.Style({
  image: new ol.style.Icon({
    img: canvas,
    imgSize: [size, size]
  })
});

我创建了一个JSFiddle ，它显示了上面的代码。

圆的创建代码基于如何在画布中绘制圆的下半部分的答案。