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

Question

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

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

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

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

使用 Point 而不是 Polygon 并屏蔽另一半怎么样？谢谢。

Answer 1

就像在例如你找到了，你可以创建一个画布，并把它作为img一个的icon风格：

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，它显示了上面的代码。

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