OpenLayersにハーフサークルスタイルマーカを挿入する方法3

Question

以下のように半円形を挿入できますか？

私は、ベクトルポイントマーカーとして使用したいと思います。

RegularShapeは私の意図に近くていますが、「通常の図形」のみで動作するようです。

Iconを使用した例もあり、非常に便利で、ポリゴンでも同様の結果が得られます。 スマートな方法はありますか？

ポリゴンの代わりにポイントを使用し、残りの半分をマスキングするのはどうですか？おかげさまで

Answer 1

などがexampleにあなたがキャンバスを作成し、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を作成しました。

サークル作成コードは、How to draw bottom half of a circle in canvasの回答に基づいています。