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

Question

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

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

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

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

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

Answer 1

与您找到的example一样，您可以创建一个画布并将其用作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，其中显示了上述代码。

圈子创建代码基于How to draw bottom half of a circle in canvas的答案。